refactor: filter page

Author: fagundesjg

package-lock.json

@@ -27,6 +27,7 @@
     "date-fns": "^3.6.0",
     "formik": "^2.4.6",
     "lucide-react": "^0.378.0",
+    "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",

package.json

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+
+import { Input } from '../ui/input';
+import { ISearchInputProps } from './types';
+import { cn } from '@/lib/utils';
+
+const SearchInput = React.forwardRef<HTMLDivElement, ISearchInputProps>(
+  (props, ref) => {
+    const { value, onChange, className, ...rest } = props;
+
+    return (
+      <div ref={ref} className={cn(className, 'relative')} {...rest}>
+        <Input
+          value={value}
+          placeholder="Buscar por abrigo ou endereço"
+          className="h-12 text-md font-medium text-zinc-600 pl-10 pr-4"
+          onChange={onChange}
+        />
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+          <Search name="search" size="20" className="stroke-zinc-300" />
+        </div>
+      </div>
+    );
+  }
+);
+
+export { SearchInput };

src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,3 @@
+import { SearchInput } from './SearchInput';
+
+export { SearchInput };

src/components/SearchInput/index.ts

@@ -0,0 +1,4 @@
+export interface ISearchInputProps
+  extends React.ComponentPropsWithoutRef<'input'> {
+  value: string;
+}

src/components/SearchInput/types.ts

@@ -0,0 +1,3 @@
+import { VerifiedBadge } from './VerifiedBadge';
+
+export { VerifiedBadge };

src/components/VerifiedBadge/index.ts

@@ -9,6 +9,8 @@ import { DialogSelector } from './DialogSelector';
 import { TextField } from './TextField';
 import { Chip } from './Chip';
 import { Footer } from './Footer';
+import { SearchInput } from './SearchInput';
+import { VerifiedBadge } from './VerifiedBadge';
 
 export {
   LoadingScreen,
@@ -22,4 +24,6 @@ export {
   TextField,
   Chip,
   Footer,
+  VerifiedBadge,
+  SearchInput,
 };

src/components/index.ts

@@ -20,13 +20,3 @@ export interface IUseSheltersDataSupplyData {
   supply: { name: string };
   priority: number;
 }
-
-export interface IUseShelterSearchParams {
-  priority: number | undefined;
-  supplies: string[] | undefined;
-  supplyCategories: number[] | undefined;
-  search: string | undefined;
-  filterAvailableShelter: boolean;
-  filterUnavailableShelter: boolean;
-  waitingShelterAvailability: boolean;
-}

src/hooks/useShelters/types.ts

@@ -13,94 +13,47 @@ const useShelters = () => {
     page: 1,
     perPage: 20,
     results: [],
-    filters: {
-      search: '',
-      priority: undefined,
-      supplies: [],
-      supplyCategories: [],
-      filterAvailableShelter: false,
-      filterUnavailableShelter: false,
-      waitingShelterAvailability: false
-    }
   });
 
-  const resetSearch = () => {
-    const params = {
-      search: '',
-      priority: undefined,
-      supplies: [],
-      supplyCategories: [],
-      filterAvailableShelter: false,
-      filterUnavailableShelter: false,
-      waitingShelterAvailability: false,
-      page: 1,
-      perPage: 20,      
-    }
-    search({          
-      params: params,
-    });
-  }
-
-  const search = useCallback(
+  const refresh = useCallback(
     (config: AxiosRequestConfig<any> = {}, append: boolean = false) => {
       if (!append) setLoading(true);
       api
-        .get<IServerResponse<any>>(
-          '/shelters/search',
-          {
-            ...config,
-            params: {
-              orderBy: 'prioritySum',
-              order: 'desc',
-              ...(config.params ?? {}),
-            },
-          }
-        )
+        .get<IServerResponse<any>>('/shelters', {
+          ...config,
+          params: {
+            orderBy: 'prioritySum',
+            order: 'desc',
+            ...(config.params ?? {}),
+          },
+        })
         .then(({ data }) => {
           if (append) {
             setData((prev) => ({
               ...prev,
               ...data.data,
               results: [...prev.results, ...data.data.results],
-              filters: {
-                search: '',
-                priority: config.params.priority,
-                supplies: config.params.supplies ?? [],
-                supplyCategories: config.params.supplyCategories ?? [],
-                filterAvailableShelter: config.params.filterAvailableShelter ?? false,
-                filterUnavailableShelter: config.params.filterUnavailableShelter ?? false,
-                waitingShelterAvailability: config.params.waitingShelterAvailability ?? false,
-              }
             }));
           } else {
             setData((prev) => ({
               ...prev,
               ...data.data,
               results: [...data.data.results],
-              filters: {
-                search: config.params.search,
-                priority: config.params.priority,
-                supplies: config.params.supplies ?? [],
-                supplyCategories: config.params.supplyCategories ?? [],
-                filterAvailableShelter: config.params.filterAvailableShelter ?? false,
-                filterUnavailableShelter: config.params.filterUnavailableShelter ?? false,
-                waitingShelterAvailability: config.params.waitingShelterAvailability ?? false,
-              }
-            }));          
+            }));
           }
         })
         .finally(() => {
-          if(!append) setLoading(false);
+          if (!append) setLoading(false);
         });
     },
     []
   );
 
   useEffect(() => {
-    resetSearch();
-  }, []);
+    refresh();
+  }, [refresh]);
 
-  return { data, loading, search, resetSearch };
+  return { data, loading, refresh };
 };
 
 export { useShelters };

src/hooks/useShelters/useShelters.tsx

@@ -58,26 +58,34 @@ function getAvailabilityProps(
     };
 }
 
+const priorityOptions: Record<SupplyPriority, string> = {
+  [SupplyPriority.Urgent]: 'Necessita urgente',
+  [SupplyPriority.Needing]: 'Precisa',
+  [SupplyPriority.Remaining]: 'Disponível para doação',
+  [SupplyPriority.NotNeeded]: 'Não preciso',
+};
+
 function getSupplyPriorityProps(priority: SupplyPriority) {
+  const label = priorityOptions[priority];
   switch (priority) {
     case SupplyPriority.NotNeeded:
       return {
-        label: 'Não preciso',
+        label,
         className: 'bg-gray-200',
       };
     case SupplyPriority.Remaining:
       return {
-        label: 'Disponível para doação',
+        label,
         className: 'bg-light-green',
       };
     case SupplyPriority.Needing:
       return {
-        label: 'Precisa',
+        label,
         className: 'bg-light-orange',
       };
     case SupplyPriority.Urgent:
       return {
-        label: 'Precisa Urgentemente',
+        label,
         className: 'bg-light-red',
       };
   }
@@ -114,4 +122,5 @@ export {
   variantStatusPriority,
   colorStatusPriority,
   nameStatusPriority,
+  priorityOptions,
 };