From 11bddff64c2e642efb31f11df22981dc0a35ff51 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sat, 22 Oct 2022 12:36:38 +0300
Subject: [PATCH] update: empty search state, change "all projects" tab to
 "search resutls" on filtering

---
 src/features/Projects/Components/Categories/Categories.tsx     | 3 ++-
 src/features/Projects/pages/ExplorePage/ExplorePage.tsx        | 2 +-
 .../Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx   | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/Projects/Components/Categories/Categories.tsx b/src/features/Projects/Components/Categories/Categories.tsx
index af71e8b..b103d13 100644
--- a/src/features/Projects/Components/Categories/Categories.tsx
+++ b/src/features/Projects/Components/Categories/Categories.tsx
@@ -20,6 +20,7 @@ const colors = [
 export type Category = Pick<CategoryList, 'id' | 'name' | 'icon' | 'projectsCount'>
 
 interface Props {
+    filtersActive?: boolean;
     value: Category | null
     onChange?: (v: Category | null) => void
 }
@@ -60,7 +61,7 @@ export default function Categories(props: Props) {
                             flex flex-col font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-16 py-16 min-w-max
                             ${props.value === null ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"} 
                             `}
-                    >All projects</button>
+                    >{props.filtersActive ? "Search results" : "All projects"}</button>
                     {sortedByAppsCount.map((category, idx) =>
                         <button
                             key={category!.id}
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 9a9c1fe..495e174 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -125,7 +125,7 @@ export default function ExplorePage() {
                     category={selectedCategory}
                 />
                 <div className="grid grid-cols-[1fr_auto] items-center gap-32">
-                    <div className="min-w-0"><Categories value={selectedCategory} onChange={v => selectCategoryTab(v)} /></div>
+                    <div className="min-w-0"><Categories filtersActive={!!queryFilters} value={selectedCategory} onChange={v => selectCategoryTab(v)} /></div>
                     <Button
                         className={`self-center ${!!queryFilters ? "!font-bold !bg-primary-50 !text-primary-600 !border-2 !border-primary-400" : "!text-gray-600"}`}
                         variant='outline'
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx b/src/features/Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx
index 2f9a85b..ba5c063 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx
@@ -31,6 +31,7 @@ export default function ProjectsGrid({ isLoading, projects }: Props) {
             gridGap: '24px',
         }}>
             {isLoading && Array(12).fill(0).map((_, idx) => <ProjectCardMiniSkeleton key={idx} />)}
+            {!isLoading && projects.length === 0 && <p className="text-center text-gray-400 py-48 text-body2 font-medium col-span-full">No results found here...</p>}
             {!isLoading && projects.map((project) => <ProjectCardMini key={project.id} project={project} onClick={handleClick} />)}
         </div>
     )