From 9612ff3336b7f0205d64cf18fd4a4c6e0e519eb5 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Tue, 24 Oct 2023 20:52:22 +0200
Subject: [PATCH] fix(app-store): show a text when there is no filtering result

---
 .../components/AppStoreTable/AppStoreTable.tsx    | 15 +++++++++++----
 src/app/(dashboard)/app-store/page.tsx            |  6 +-----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/(dashboard)/app-store/components/AppStoreTable/AppStoreTable.tsx b/src/app/(dashboard)/app-store/components/AppStoreTable/AppStoreTable.tsx
index f0ef5d6c..2a98fef3 100644
--- a/src/app/(dashboard)/app-store/components/AppStoreTable/AppStoreTable.tsx
+++ b/src/app/(dashboard)/app-store/components/AppStoreTable/AppStoreTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import { EmptyPage } from '../../../../components/EmptyPage';
 import { AppStoreTile } from '../AppStoreTile';
 import { AppTableData } from '../../helpers/table.types';
 import { useAppStoreState } from '../../state/appStoreState';
@@ -15,11 +16,17 @@ export const AppStoreTable: React.FC<IProps> = ({ data }) => {
 
   const tableData = React.useMemo(() => sortTable({ data: data || [], col: sort, direction: sortDirection, category, search }), [data, sort, sortDirection, category, search]);
 
+  if (!tableData.length) {
+    return <EmptyPage title="apps.app-store.no-results" subtitle="apps.app-store.no-results-subtitle" />;
+  }
+
   return (
-    <div className="row row-cards">
-      {tableData.map((app) => (
-        <AppStoreTile key={app.id} app={app} />
-      ))}
+    <div className="card px-3 pb-3">
+      <div className="row row-cards">
+        {tableData.map((app) => (
+          <AppStoreTile key={app.id} app={app} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/app/(dashboard)/app-store/page.tsx b/src/app/(dashboard)/app-store/page.tsx
index 5583f969..71adc11e 100644
--- a/src/app/(dashboard)/app-store/page.tsx
+++ b/src/app/(dashboard)/app-store/page.tsx
@@ -15,9 +15,5 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function AppStorePage() {
   const { apps } = await AppServiceClass.listApps();
 
-  return (
-    <div className="card px-3 pb-3">
-      <AppStoreTable data={apps} />
-    </div>
-  );
+  return <AppStoreTable data={apps} />;
 }