feat: loading state and display

Relates #256
enBloc-org · Jun 27, 2024 · 9af8704 · 9af8704
1 parent 1e1b8bb
commit 9af8704
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/app/(dashboard)/search/page.tsx b/app/(dashboard)/search/page.tsx
@@ -20,8 +20,10 @@ export default function SearchItemPage() {
   const [searchParams, setSearchParams] =
     useState<SearchParamsType>(initialSearchParams);
   const [searchResults, setSearchResults] = useState<PartialItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const fetchSearchResults = async () => {
+    setIsLoading(true);
     let data: PartialItem[] = [];
     switch (true) {
       // case !!searchParams.query &&
@@ -58,6 +60,7 @@ export default function SearchItemPage() {
         break;
     }
     setSearchResults(data);
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -72,10 +75,8 @@ export default function SearchItemPage() {
       />
       <QuickBrowse />
       <ItemDisplayContainer
-        query={searchParams.query}
-        category={searchParams.category}
-        subcategory={searchParams.subcategory}
         searchResults={searchResults}
+        isLoading={isLoading}
       />
     </div>
   );

diff --git a/components/search/ItemDisplayContainer.tsx b/components/search/ItemDisplayContainer.tsx
@@ -3,41 +3,40 @@ import { PartialItem } from '@/types/supabaseTypes';
 import ItemCard from '../ItemCard';
 
 type ItemDisplayContainerProps = {
-  query: string;
-  category: string;
-  subcategory: string;
   searchResults: PartialItem[] | [];
+  isLoading: boolean;
 };
 
 const ItemDisplayContainer: React.FC<ItemDisplayContainerProps> = ({
-  query,
-  category,
-  subcategory,
   searchResults,
+  isLoading,
 }) => {
+  if (isLoading) {
+    return (
+      <div className='mt-8 flex justify-center'>
+        <h2>Loading....</h2>
+      </div>
+    );
+  }
   return (
     <div className='lg-px-20 m-auto mt-5 lg:w-5/6'>
-      <h2 className='mx-5 font-semibold italic'>
-        Search for:{' '}
-        <span className='font-normal'>
-          {query.length > 0 ? query : ''}
-          {category.length > 0 ? category : ''}
-          {subcategory.length > 0 ? subcategory : ''}
-        </span>
-      </h2>
       <div className='mt-10 flex flex-col items-center gap-5'>
-        {searchResults.map((result) => (
-          <ItemCard
-            key={result.id}
-            imageSrc={result.imageSrc}
-            item_name={result.item_name}
-            condition={result.condition}
-            item_type={result.item_type}
-            postcode={result.postcode}
-            postable={result.postable}
-            itemId={result.id}
-          />
-        ))}
+        {searchResults.length > 0 ? (
+          searchResults.map((result) => (
+            <ItemCard
+              key={result.id}
+              imageSrc={result.imageSrc}
+              item_name={result.item_name}
+              condition={result.condition}
+              item_type={result.item_type}
+              postcode={result.postcode}
+              postable={result.postable}
+              itemId={result.id}
+            />
+          ))
+        ) : (
+          <p className='text-center'>No results found.</p>
+        )}
       </div>
     </div>
   );