feat: add multi option for priority queryParam

Author: Diego Dario

src/pages/Home/Home.tsx

@@ -7,11 +7,11 @@ import { BurgerMenu, Footer, Header } from '@/components';
 import { useShelters, useThrottle } from '@/hooks';
 import { Button } from '@/components/ui/button';
 import { Filter, ShelterListView } from './components';
-import { IFilterFormProps } from './components/Filter/types';
+import { IFilterFormProps, IFilterSubmittionForm } from './components/Filter/types';
 
 const initialFilterData: IFilterFormProps = {
   search: '',
-  priority: null,
+  priority: [],
   supplyCategoryIds: [],
   supplyIds: [],
   shelterStatus: [],
@@ -54,29 +54,45 @@ const Home = () => {
     [shelters.page, shelters.perPage, shelters.count]
   );
 
+  const factorySearchArgs = useCallback((values: IFilterFormProps) => {
+    const searchQueryArgs: IFilterSubmittionForm = {
+      search: values.search,
+      priority: values.priority.join(),
+      supplyCategoryIds: values.supplyCategoryIds,
+      supplyIds: values.supplyIds,
+      shelterStatus: values.shelterStatus,
+      cities: values.cities
+    }
+
+    return searchQueryArgs;
+  }, [])
+
   const onSubmitFilterForm = useCallback(
     (values: IFilterFormProps) => {
       setOpenModal(false);
       setFilterData(values);
-      const searchQuery = qs.stringify(values, {
+
+      const searchQuery = qs.stringify(factorySearchArgs(values), {
         skipNulls: true,
       });
+
       setSearchParams(searchQuery);
+
       refresh({
         params: {
           search: searchQuery,
         },
       });
     },
-    [refresh, setSearchParams]
+    [refresh, setSearchParams, factorySearchArgs]
   );
 
   const handleFetchMore = useCallback(() => {
     const params = {
       ...shelters.filters,
       page: shelters.page + 1,
       perPage: shelters.perPage,
-      search: qs.stringify(filterData),
+      search: qs.stringify(factorySearchArgs(filterData)),
     };
 
     refresh(
@@ -85,7 +101,7 @@ const Home = () => {
       },
       true
     );
-  }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]);
+  }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage, factorySearchArgs]);
 
   return (
     <div className="flex flex-col h-screen items-center">

src/pages/Home/components/Filter/Filter.tsx

@@ -19,7 +19,6 @@ import {
 import {
   IFilterFormikProps,
   IFilterProps,
-  ISelectField,
   ShelterAvailabilityStatus,
 } from './types';
 import { priorityOptions } from '@/lib/utils';
@@ -66,12 +65,10 @@ const Filter = (props: IFilterProps) => {
     {
       initialValues: {
         cities: data.cities ?? [],
-        priority: data.priority
-          ? {
-              label: priorityOpts[data.priority],
-              value: data.priority,
-            }
-          : null,
+        priority: data.priority.map((p: string) => ({
+          label: priorityOpts[Number(p) as SupplyPriority],
+          value: p,
+        })),
         search: data.search,
         shelterStatus: data.shelterStatus.map((s) => ({
           label: ShelterAvailabilityStatusMapped[s],
@@ -103,16 +100,15 @@ const Filter = (props: IFilterProps) => {
           cities,
         } = values;
         onSubmit({
-          priority: priority?.value ? +priority.value : null,
+          priority: priority.map((p) => p.value),
           search,
           shelterStatus: shelterStatus.map((s) => s.value),
           supplyCategoryIds: supplyCategories.map((s) => s.value),
           supplyIds: supplies.map((s) => s.value),
           cities,
         });
       },
-    }
-  );
+  });
 
   const supplyOptions = useMemo(() => {
     return supplies
@@ -187,20 +183,14 @@ const Filter = (props: IFilterProps) => {
                 <Select
                   placeholder="Selecione"
                   value={values.priority}
+                  isMulti
                   options={Object.entries(priorityOpts).map(
-                    ([priority, label]) =>
-                      ({
-                        label,
-                        value: +priority,
-                      } as ISelectField<SupplyPriority>)
+                    ([priority, label]) => ({
+                      label,
+                      value: priority,
+                    }),
                   )}
-                  onChange={(v) => {
-                    const newValue = {
-                      ...v,
-                      value: v ? +v.value : SupplyPriority.Urgent,
-                    };
-                    setFieldValue('priority', newValue);
-                  }}
+                  onChange={(v) => setFieldValue('priority', v)}
                 />
               </div>
               <div className="flex flex-col gap-1 w-full">

src/pages/Home/components/Filter/types.ts

@@ -1,5 +1,3 @@
-import { SupplyPriority } from '@/service/supply/types';
-
 export type ShelterAvailabilityStatus = 'available' | 'unavailable' | 'waiting';
 
 export interface ISelectField<T = string> {
@@ -9,7 +7,7 @@ export interface ISelectField<T = string> {
 
 export interface IFilterFormProps {
   search: string;
-  priority: SupplyPriority | null;
+  priority: string[];
   supplyCategoryIds: string[];
   supplyIds: string[];
   shelterStatus: ShelterAvailabilityStatus[];
@@ -18,7 +16,7 @@ export interface IFilterFormProps {
 
 export interface IFilterFormikProps {
   search: string;
-  priority: ISelectField<SupplyPriority> | null;
+  priority: ISelectField[];
   supplyCategories: ISelectField[];
   supplies: ISelectField[];
   shelterStatus: ISelectField<ShelterAvailabilityStatus>[];