feat: add multi option for priority queryParam

Author: Diego Dario

src/pages/Home/Home.tsx

@@ -11,7 +11,7 @@ import { IFilterFormProps } from './components/Filter/types';
 
 const initialFilterData: IFilterFormProps = {
   search: '',
-  priority: null,
+  priority: [],
   supplyCategoryIds: [],
   supplyIds: [],
   shelterStatus: [],

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).join(),
           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,24 +7,28 @@ export interface ISelectField<T = string> {
 
 export interface IFilterFormProps {
   search: string;
-  priority: SupplyPriority | null;
+  priority: string[];
   supplyCategoryIds: string[];
   supplyIds: string[];
   shelterStatus: ShelterAvailabilityStatus[];
   cities: string[];
 }
 
+export interface IFilterSubmittionForm
+  extends Omit<IFilterFormProps, 'priority'> {
+  priority: string;
+}
 export interface IFilterFormikProps {
   search: string;
-  priority: ISelectField<SupplyPriority> | null;
+  priority: ISelectField[];
   supplyCategories: ISelectField[];
   supplies: ISelectField[];
   shelterStatus: ISelectField<ShelterAvailabilityStatus>[];
   cities: string[];
 }
 
 export interface IFilterProps {
-  onSubmit: (values: IFilterFormProps) => void;
+  onSubmit: (values: IFilterSubmittionForm) => void;
   data: IFilterFormProps;
   open: boolean;
   onClose: () => void;