From 0daaf671322957aa6d50de997d1a9332ee493146 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Wed, 29 May 2024 07:56:11 -0300
Subject: [PATCH 01/11] initial test to show filtro Status do Item no Abrigo
 quando selecionados

---
 .../components/ShelterListView/ShelterListView.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index ec57fc7b..de863016 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -8,7 +8,7 @@ import {
   ShelterListItem,
 } from '@/components';
 import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import { cn, getSupplyPriorityProps } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
 import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
@@ -64,6 +64,18 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
               <span className="pr-1">{item}</span> <X className="h-4 w-4" />
             </div>
           ))}
+
+          {filterData.priority?.map((item) => (
+            <div
+              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+              key={item}
+            >
+              <span className="pr-1">{getSupplyPriorityProps(+item).label}</span> <X className="h-4 w-4" />
+            </div>
+          
+          ))}
+
+
         </div>
         <div className="flex flex-row">
           <Button

From 8cb2e27130e11e2c93829babd2d3029cf3463d41 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 09:40:14 -0300
Subject: [PATCH 02/11] refactor to make more reusable and maintable providing
 a removeFilter function

---
 src/pages/Home/Home.tsx                       |  6 +-
 src/pages/Home/components/Filter/types.ts     |  1 +
 .../ShelterListView/ShelterListView.tsx       | 56 +++++++++++++++++--
 .../Home/components/ShelterListView/types.ts  |  2 +-
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index d1105a9f..65b82797 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -141,10 +141,10 @@ const Home = () => {
           setFilterData((prev) => ({ ...prev, search: v }));
           setSearch(v);
         }}
-        onCitiesChange={(v) => {
-          setFilterData((prev) => ({ ...prev, cities: v }));
+        onCitiesChange={(newFilterData) => {
+          setFilterData((prev) => ({ ...prev, ...newFilterData }));
           const searchQuery = qs.stringify(
-            { ...filterData, cities: v },
+            { ...filterData, ...newFilterData },
             {
               skipNulls: true,
             }
diff --git a/src/pages/Home/components/Filter/types.ts b/src/pages/Home/components/Filter/types.ts
index 347633f8..3847822f 100644
--- a/src/pages/Home/components/Filter/types.ts
+++ b/src/pages/Home/components/Filter/types.ts
@@ -12,6 +12,7 @@ export interface IFilterFormProps {
   supplyIds: string[];
   shelterStatus: ShelterAvailabilityStatus[];
   cities: string[];
+  [key: string]: string | string[];
 }
 
 export interface IFilterFormikProps {
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index de863016..e82e9644 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -12,6 +12,32 @@ import { cn, getSupplyPriorityProps } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
 import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
+import { IFilterFormProps } from '../Filter/types';
+
+
+function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
+  const filterFormPropsListNames = Object.keys(filterData);
+  const onlyArrayProps = filterFormPropsListNames.filter((prop) => Array.isArray(filterData[prop as keyof IFilterFormProps]));
+  const newFilterData: IFilterFormProps = {
+    search: "",
+    priority: [],
+    supplyCategoryIds: [],
+    supplyIds: [],
+    shelterStatus: [],
+    cities: []
+  }
+
+  onlyArrayProps.forEach((property: string) => {
+    const propertyValue = filterData[property as keyof IFilterFormProps];
+
+    if (Array.isArray(propertyValue)) {
+        const newValues =  propertyValue.filter((it) => it !== item) as typeof propertyValue;
+        newFilterData[property] = [...newValues];
+    }
+  });
+
+  return newFilterData;
+}
 
 const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
   (props, ref) => {
@@ -53,27 +79,45 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           }
         />
         <div className="flex flex-wrap gap-1 items-center">
-          {filterData.cities?.map((item) => (
+          {filterData.cities?.map((city) => (
             <div
               className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={item}
+              key={city}
               onClick={() =>
-                onCitiesChange?.(filterData.cities.filter((it) => it !== item))
+                onCitiesChange?.(removeFilter({from: filterData, filter: city}))
               }
             >
-              <span className="pr-1">{item}</span> <X className="h-4 w-4" />
+              <span className="pr-1">{city}</span> <X className="h-4 w-4" />
             </div>
           ))}
 
-          {filterData.priority?.map((item) => (
+          {filterData.priority?.map((priorityLevel) => (
+            <div
+              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+              key={priorityLevel}
+              onClick={() =>
+                onCitiesChange?.(removeFilter({from: filterData, filter: priorityLevel}))
+              }
+            >
+              <span className="pr-1">{getSupplyPriorityProps(+priorityLevel).label}</span> <X className="h-4 w-4" />
+            </div>
+          
+          ))}
+{/* 
+          {filterData.supplyCategoryIds?.map((item) => (
             <div
               className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
               key={item}
+              onClick={() =>
+                onCitiesChange?.(removeFilter({from: filterData, in: item}))
+              }
             >
               <span className="pr-1">{getSupplyPriorityProps(+item).label}</span> <X className="h-4 w-4" />
             </div>
           
-          ))}
+          ))} */}
+
+          
 
 
         </div>
diff --git a/src/pages/Home/components/ShelterListView/types.ts b/src/pages/Home/components/ShelterListView/types.ts
index 6e817200..24b93962 100644
--- a/src/pages/Home/components/ShelterListView/types.ts
+++ b/src/pages/Home/components/ShelterListView/types.ts
@@ -11,7 +11,7 @@ export interface IShelterListViewProps
   onOpenModal?: () => void;
   onClearSearch?: () => void;
   onSearchValueChange?: (v: string) => void;
-  onCitiesChange?: (v: string[]) => void;
+  onCitiesChange?: (v: IFilterFormProps) => void;
   onFetchMoreData?: () => void;
   onSelectShelter?: (shelter: IUseSheltersData) => void;
   filterData: IFilterFormProps;

From 2e7ef64a7b7f8e5a40a200fa8d2748fa83fcee90 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 09:41:57 -0300
Subject: [PATCH 03/11] provided to show supplyCategoryIds

---
 .../components/ShelterListView/ShelterListView.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index e82e9644..aa41d17d 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -103,19 +103,19 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
             </div>
           
           ))}
-{/* 
-          {filterData.supplyCategoryIds?.map((item) => (
+
+          {filterData.supplyCategoryIds?.map((supplyCategoryId) => (
             <div
               className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={item}
+              key={supplyCategoryId}
               onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, in: item}))
+                onCitiesChange?.(removeFilter({from: filterData, filter: supplyCategoryId}))
               }
             >
-              <span className="pr-1">{getSupplyPriorityProps(+item).label}</span> <X className="h-4 w-4" />
+              <span className="pr-1">{supplyCategoryId}</span> <X className="h-4 w-4" />
             </div>
           
-          ))} */}
+          ))}
 
           
 

From d9e622cb5583f8abc888a1d0d473e1a6e7b8eac3 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 10:08:21 -0300
Subject: [PATCH 04/11] refactor to reuse mapSupplyCategories and provide a
 Label to SupplyCategories filter

---
 src/pages/Home/components/Filter/Filter.tsx        | 14 ++++++++------
 .../components/ShelterListView/ShelterListView.tsx |  9 +++++++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/components/Filter/Filter.tsx b/src/pages/Home/components/Filter/Filter.tsx
index f71d98b7..1d164158 100644
--- a/src/pages/Home/components/Filter/Filter.tsx
+++ b/src/pages/Home/components/Filter/Filter.tsx
@@ -43,17 +43,19 @@ const priorityOpts = Object.entries(priorityOptions).reduce(
   {} as Record<SupplyPriority, string>
 );
 
+export const mapSupplyCategories = (supplyCategories: ISupplyCategory[]) => 
+  supplyCategories.reduce(
+    (prev, current) => ({ ...prev, [current.id]: current }),
+    {} as Record<string, ISupplyCategory>
+  );
+
 const Filter = (props: IFilterProps) => {
   const { data, onClose, onSubmit, open } = props;
   const { data: supplies, loading: loadingSupplies } = useSupplies();
   const { data: supplyCategories, loading: loadingSupplyCategories } =
     useSupplyCategories();
-  const mappedSupplyCategories = useMemo(() => {
-    return supplyCategories.reduce(
-      (prev, current) => ({ ...prev, [current.id]: current }),
-      {} as Record<string, ISupplyCategory>
-    );
-  }, [supplyCategories]);
+  const mappedSupplyCategories = useMemo(() =>
+    mapSupplyCategories(supplyCategories), [supplyCategories]);
   const mappedSupplies = useMemo(() => {
     return supplies.reduce(
       (prev, current) => ({ ...prev, [current.id]: current }),
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index aa41d17d..9e42b8ce 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { CircleAlert, ListFilter, X } from 'lucide-react';
 
 import {
@@ -13,6 +13,8 @@ import { IShelterListViewProps } from './types';
 import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
 import { IFilterFormProps } from '../Filter/types';
+import { useSupplyCategories } from '@/hooks/useSupplyCategories';
+import { mapSupplyCategories } from '../Filter/Filter';
 
 
 function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
@@ -58,6 +60,9 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
     } = props;
 
     const [searchParams] = useSearchParams();
+    const { data: supplyCategories } = useSupplyCategories();
+    const mappedSupplyCategories = useMemo(() =>
+      mapSupplyCategories(supplyCategories), [supplyCategories]);
 
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
@@ -112,7 +117,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
                 onCitiesChange?.(removeFilter({from: filterData, filter: supplyCategoryId}))
               }
             >
-              <span className="pr-1">{supplyCategoryId}</span> <X className="h-4 w-4" />
+              <span className="pr-1">{mappedSupplyCategories[supplyCategoryId]?.name}</span> <X className="h-4 w-4" />
             </div>
           
           ))}

From 339dc8cb4b178d9caeb966c34a6d5813fafa366e Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 10:19:43 -0300
Subject: [PATCH 05/11] provided to show supplies filter

---
 src/pages/Home/components/Filter/Filter.tsx   | 16 ++++++++--------
 .../ShelterListView/ShelterListView.tsx       | 19 ++++++++++++++++---
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/pages/Home/components/Filter/Filter.tsx b/src/pages/Home/components/Filter/Filter.tsx
index 1d164158..e724b442 100644
--- a/src/pages/Home/components/Filter/Filter.tsx
+++ b/src/pages/Home/components/Filter/Filter.tsx
@@ -49,19 +49,19 @@ export const mapSupplyCategories = (supplyCategories: ISupplyCategory[]) =>
     {} as Record<string, ISupplyCategory>
   );
 
+export const mapSupplies = (supplies: IUseSuppliesData[]) => 
+  supplies.reduce(
+    (prev, current) => ({ ...prev, [current.id]: current }),
+    {} as Record<string, IUseSuppliesData>
+  );
+
 const Filter = (props: IFilterProps) => {
   const { data, onClose, onSubmit, open } = props;
   const { data: supplies, loading: loadingSupplies } = useSupplies();
   const { data: supplyCategories, loading: loadingSupplyCategories } =
     useSupplyCategories();
-  const mappedSupplyCategories = useMemo(() =>
-    mapSupplyCategories(supplyCategories), [supplyCategories]);
-  const mappedSupplies = useMemo(() => {
-    return supplies.reduce(
-      (prev, current) => ({ ...prev, [current.id]: current }),
-      {} as Record<string, IUseSuppliesData>
-    );
-  }, [supplies]);
+  const mappedSupplyCategories = useMemo(() => mapSupplyCategories(supplyCategories), [supplyCategories]);
+  const mappedSupplies = useMemo(() => mapSupplies(supplies), [supplies]);
 
   const { handleSubmit, values, setFieldValue } = useFormik<IFilterFormikProps>(
     {
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index 9e42b8ce..f1235157 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -14,7 +14,8 @@ import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
 import { IFilterFormProps } from '../Filter/types';
 import { useSupplyCategories } from '@/hooks/useSupplyCategories';
-import { mapSupplyCategories } from '../Filter/Filter';
+import { mapSupplies, mapSupplyCategories } from '../Filter/Filter';
+import { useSupplies } from '@/hooks/useSupplies';
 
 
 function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
@@ -63,7 +64,9 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
     const { data: supplyCategories } = useSupplyCategories();
     const mappedSupplyCategories = useMemo(() =>
       mapSupplyCategories(supplyCategories), [supplyCategories]);
-
+    const { data: supplies } = useSupplies();
+    const mappedSupplies = useMemo(() => mapSupplies(supplies), [supplies]);
+    
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
         <h1 className="text-[#2f2f2f] font-semibold text-2xl">
@@ -122,8 +125,18 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           
           ))}
 
+          {filterData.supplyIds?.map((supplyId) => (
+            <div
+              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+              key={supplyId}
+              onClick={() =>
+                onCitiesChange?.(removeFilter({from: filterData, filter: supplyId}))
+              }
+            >
+              <span className="pr-1">{mappedSupplies[supplyId]?.name}</span> <X className="h-4 w-4" />
+            </div>
           
-
+          ))}
 
         </div>
         <div className="flex flex-row">

From 0de346260dba7a22c390514c6a45790fe1f66839 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 10:34:19 -0300
Subject: [PATCH 06/11] was refactor to be more maintainable

---
 src/pages/Home/components/Filter/Filter.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/components/Filter/Filter.tsx b/src/pages/Home/components/Filter/Filter.tsx
index e724b442..467d1b81 100644
--- a/src/pages/Home/components/Filter/Filter.tsx
+++ b/src/pages/Home/components/Filter/Filter.tsx
@@ -43,17 +43,19 @@ const priorityOpts = Object.entries(priorityOptions).reduce(
   {} as Record<SupplyPriority, string>
 );
 
+const dataKeyToIdValueToObj =
+  (
+    prev: Record<string, IUseSuppliesData | ISupplyCategory>,
+    current: ISupplyCategory | IUseSuppliesData
+  ) =>
+    ({ ...prev, [current.id]: current });
+
+
 export const mapSupplyCategories = (supplyCategories: ISupplyCategory[]) => 
-  supplyCategories.reduce(
-    (prev, current) => ({ ...prev, [current.id]: current }),
-    {} as Record<string, ISupplyCategory>
-  );
+  supplyCategories.reduce(dataKeyToIdValueToObj, {} as Record<string, ISupplyCategory>);
 
 export const mapSupplies = (supplies: IUseSuppliesData[]) => 
-  supplies.reduce(
-    (prev, current) => ({ ...prev, [current.id]: current }),
-    {} as Record<string, IUseSuppliesData>
-  );
+  supplies.reduce(dataKeyToIdValueToObj, {} as Record<string, IUseSuppliesData>);
 
 const Filter = (props: IFilterProps) => {
   const { data, onClose, onSubmit, open } = props;

From f81ebb13813b7cbd41ce20c24a9a99a6beabc22c Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 10:58:20 -0300
Subject: [PATCH 07/11] provided to show Shelter status filter

---
 src/pages/Home/components/Filter/Filter.tsx       |  2 +-
 .../ShelterListView/ShelterListView.tsx           | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home/components/Filter/Filter.tsx b/src/pages/Home/components/Filter/Filter.tsx
index 467d1b81..eb4c71a2 100644
--- a/src/pages/Home/components/Filter/Filter.tsx
+++ b/src/pages/Home/components/Filter/Filter.tsx
@@ -26,7 +26,7 @@ import CitiesFilter from './CitiesFilter';
 import { IUseSuppliesData } from '@/hooks/useSupplies/types';
 import { SupplyPriority } from '@/service/supply/types';
 
-const ShelterAvailabilityStatusMapped: Record<
+export const ShelterAvailabilityStatusMapped: Record<
   ShelterAvailabilityStatus,
   string
 > = {
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index f1235157..1069b953 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -14,7 +14,7 @@ import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
 import { IFilterFormProps } from '../Filter/types';
 import { useSupplyCategories } from '@/hooks/useSupplyCategories';
-import { mapSupplies, mapSupplyCategories } from '../Filter/Filter';
+import { ShelterAvailabilityStatusMapped, mapSupplies, mapSupplyCategories } from '../Filter/Filter';
 import { useSupplies } from '@/hooks/useSupplies';
 
 
@@ -138,6 +138,19 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           
           ))}
 
+          {filterData.shelterStatus?.map((statusLabel) => (
+            <div
+              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+              key={statusLabel}
+              onClick={() =>
+                onCitiesChange?.(removeFilter({from: filterData, filter: statusLabel}))
+              }
+            >
+              <span className="pr-1">{ShelterAvailabilityStatusMapped[statusLabel]}</span> <X className="h-4 w-4" />
+            </div>
+          
+          ))}
+
         </div>
         <div className="flex flex-row">
           <Button

From d53b866cccefd8369cb875e0113e36d5e2b0bc44 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 11:57:46 -0300
Subject: [PATCH 08/11] was refactor to reuse renderFilterBadge

---
 .../ShelterListView/ShelterListView.tsx       | 83 +++++--------------
 1 file changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index 1069b953..a14eb309 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -66,6 +66,16 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
       mapSupplyCategories(supplyCategories), [supplyCategories]);
     const { data: supplies } = useSupplies();
     const mappedSupplies = useMemo(() => mapSupplies(supplies), [supplies]);
+
+    const renderFilterBadge = (filterKey: string, filterLabel: string) => {
+      return <div
+        className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+        key={filterKey}
+        onClick={() => onCitiesChange?.(removeFilter({ from: filterData, filter: filterKey }))}
+      >
+        <span className="pr-1">{filterLabel}</span> <X className="h-4 w-4" />
+      </div>;
+    };
     
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
@@ -87,70 +97,15 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           }
         />
         <div className="flex flex-wrap gap-1 items-center">
-          {filterData.cities?.map((city) => (
-            <div
-              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={city}
-              onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, filter: city}))
-              }
-            >
-              <span className="pr-1">{city}</span> <X className="h-4 w-4" />
-            </div>
-          ))}
-
-          {filterData.priority?.map((priorityLevel) => (
-            <div
-              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={priorityLevel}
-              onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, filter: priorityLevel}))
-              }
-            >
-              <span className="pr-1">{getSupplyPriorityProps(+priorityLevel).label}</span> <X className="h-4 w-4" />
-            </div>
-          
-          ))}
-
-          {filterData.supplyCategoryIds?.map((supplyCategoryId) => (
-            <div
-              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={supplyCategoryId}
-              onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, filter: supplyCategoryId}))
-              }
-            >
-              <span className="pr-1">{mappedSupplyCategories[supplyCategoryId]?.name}</span> <X className="h-4 w-4" />
-            </div>
-          
-          ))}
-
-          {filterData.supplyIds?.map((supplyId) => (
-            <div
-              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={supplyId}
-              onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, filter: supplyId}))
-              }
-            >
-              <span className="pr-1">{mappedSupplies[supplyId]?.name}</span> <X className="h-4 w-4" />
-            </div>
-          
-          ))}
-
-          {filterData.shelterStatus?.map((statusLabel) => (
-            <div
-              className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-              key={statusLabel}
-              onClick={() =>
-                onCitiesChange?.(removeFilter({from: filterData, filter: statusLabel}))
-              }
-            >
-              <span className="pr-1">{ShelterAvailabilityStatusMapped[statusLabel]}</span> <X className="h-4 w-4" />
-            </div>
-          
-          ))}
-
+          {filterData.cities?.map((city) => renderFilterBadge(city, city))}
+          {filterData.priority?.map((priorityLevel) =>
+            renderFilterBadge(priorityLevel, getSupplyPriorityProps(+priorityLevel).label))}
+          {filterData.supplyCategoryIds?.map((supplyCategoryId) =>
+            renderFilterBadge(supplyCategoryId, mappedSupplyCategories[supplyCategoryId]?.name))}
+          {filterData.supplyIds?.map((supplyId) =>
+            renderFilterBadge(supplyId, mappedSupplies[supplyId]?.name))}
+          {filterData.shelterStatus?.map((statusLabel) =>
+            renderFilterBadge(statusLabel, ShelterAvailabilityStatusMapped[statusLabel]))}
         </div>
         <div className="flex flex-row">
           <Button

From bbde67350226c8da09e8b3f9e861695e0441965d Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 12:25:42 -0300
Subject: [PATCH 09/11] was refactor to provide FilterBadges component

---
 .../components/FilterBadges/FilterBadges.tsx  | 72 +++++++++++++++++++
 .../Home/components/FilterBadges/index.ts     |  3 +
 .../Home/components/FilterBadges/types.ts     |  8 +++
 .../ShelterListView/ShelterListView.tsx       | 65 ++---------------
 4 files changed, 90 insertions(+), 58 deletions(-)
 create mode 100644 src/pages/Home/components/FilterBadges/FilterBadges.tsx
 create mode 100644 src/pages/Home/components/FilterBadges/index.ts
 create mode 100644 src/pages/Home/components/FilterBadges/types.ts

diff --git a/src/pages/Home/components/FilterBadges/FilterBadges.tsx b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
new file mode 100644
index 00000000..62da6125
--- /dev/null
+++ b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { X } from 'lucide-react';
+
+import { getSupplyPriorityProps } from '@/lib/utils';
+import { useSupplyCategories } from '@/hooks/useSupplyCategories';
+import { useSupplies } from '@/hooks/useSupplies';
+import { ShelterAvailabilityStatusMapped, mapSupplies, mapSupplyCategories } from '../Filter/Filter';
+import { IFilterBadgesProps } from './types';
+import { IFilterFormProps } from '../Filter/types';
+
+function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
+    const filterFormPropsListNames = Object.keys(filterData);
+    const onlyArrayProps = filterFormPropsListNames.filter((prop) => Array.isArray(filterData[prop as keyof IFilterFormProps]));
+    const newFilterData: IFilterFormProps = {
+      search: "",
+      priority: [],
+      supplyCategoryIds: [],
+      supplyIds: [],
+      shelterStatus: [],
+      cities: []
+    }
+  
+    onlyArrayProps.forEach((property: string) => {
+      const propertyValue = filterData[property as keyof IFilterFormProps];
+  
+      if (Array.isArray(propertyValue)) {
+          const newValues =  propertyValue.filter((it) => it !== item) as typeof propertyValue;
+          newFilterData[property] = [...newValues];
+      }
+    });
+  
+    return newFilterData;
+  }
+
+const FilterBadges = React.forwardRef<
+  HTMLDivElement,
+  IFilterBadgesProps
+>((props, ref) => {
+    const { filterData, onCitiesChange } = props;
+
+    const { data: supplyCategories } = useSupplyCategories();
+    const mappedSupplyCategories = useMemo(() =>
+      mapSupplyCategories(supplyCategories), [supplyCategories]);
+    const { data: supplies } = useSupplies();
+    const mappedSupplies = useMemo(() => mapSupplies(supplies), [supplies]);
+
+    const renderFilterBadge = (filterKey: string, filterLabel: string) => {
+        return <div
+          className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
+          key={filterKey}
+          onClick={() => onCitiesChange?.(removeFilter({ from: filterData, filter: filterKey }))}
+        >
+          <span className="pr-1">{filterLabel}</span> <X className="h-4 w-4" />
+        </div>;
+    };
+
+    return (
+        <div ref={ref} className="flex flex-wrap gap-1 items-center">
+            {filterData.cities?.map((city) => renderFilterBadge(city, city))}
+            {filterData.priority?.map((priorityLevel) =>
+                renderFilterBadge(priorityLevel, getSupplyPriorityProps(+priorityLevel).label))}
+            {filterData.supplyCategoryIds?.map((supplyCategoryId) =>
+                renderFilterBadge(supplyCategoryId, mappedSupplyCategories[supplyCategoryId]?.name))}
+            {filterData.supplyIds?.map((supplyId) =>
+                renderFilterBadge(supplyId, mappedSupplies[supplyId]?.name))}
+            {filterData.shelterStatus?.map((statusLabel) =>
+                renderFilterBadge(statusLabel, ShelterAvailabilityStatusMapped[statusLabel]))}
+        </div>
+    );
+});
+
+export { FilterBadges };
diff --git a/src/pages/Home/components/FilterBadges/index.ts b/src/pages/Home/components/FilterBadges/index.ts
new file mode 100644
index 00000000..c07d416f
--- /dev/null
+++ b/src/pages/Home/components/FilterBadges/index.ts
@@ -0,0 +1,3 @@
+import { FilterBadges } from './FilterBadges';
+
+export { FilterBadges };
diff --git a/src/pages/Home/components/FilterBadges/types.ts b/src/pages/Home/components/FilterBadges/types.ts
new file mode 100644
index 00000000..b620dd04
--- /dev/null
+++ b/src/pages/Home/components/FilterBadges/types.ts
@@ -0,0 +1,8 @@
+import { IFilterFormProps } from "../Filter/types";
+
+
+export interface IFilterBadgesProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+    filterData: IFilterFormProps;
+    onCitiesChange?: (v: IFilterFormProps) => void;
+}
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index a14eb309..0598492d 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -1,5 +1,5 @@
-import React, { Fragment, useMemo } from 'react';
-import { CircleAlert, ListFilter, X } from 'lucide-react';
+import React, { Fragment } from 'react';
+import { CircleAlert, ListFilter } from 'lucide-react';
 
 import {
   Alert,
@@ -8,39 +8,11 @@ import {
   ShelterListItem,
 } from '@/components';
 import { Button } from '@/components/ui/button';
-import { cn, getSupplyPriorityProps } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
 import { useSearchParams } from 'react-router-dom';
 import { LoadingSkeleton } from '@/components/LoadingSkeleton';
-import { IFilterFormProps } from '../Filter/types';
-import { useSupplyCategories } from '@/hooks/useSupplyCategories';
-import { ShelterAvailabilityStatusMapped, mapSupplies, mapSupplyCategories } from '../Filter/Filter';
-import { useSupplies } from '@/hooks/useSupplies';
-
-
-function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
-  const filterFormPropsListNames = Object.keys(filterData);
-  const onlyArrayProps = filterFormPropsListNames.filter((prop) => Array.isArray(filterData[prop as keyof IFilterFormProps]));
-  const newFilterData: IFilterFormProps = {
-    search: "",
-    priority: [],
-    supplyCategoryIds: [],
-    supplyIds: [],
-    shelterStatus: [],
-    cities: []
-  }
-
-  onlyArrayProps.forEach((property: string) => {
-    const propertyValue = filterData[property as keyof IFilterFormProps];
-
-    if (Array.isArray(propertyValue)) {
-        const newValues =  propertyValue.filter((it) => it !== item) as typeof propertyValue;
-        newFilterData[property] = [...newValues];
-    }
-  });
-
-  return newFilterData;
-}
+import { FilterBadges } from '../FilterBadges';
 
 const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
   (props, ref) => {
@@ -61,22 +33,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
     } = props;
 
     const [searchParams] = useSearchParams();
-    const { data: supplyCategories } = useSupplyCategories();
-    const mappedSupplyCategories = useMemo(() =>
-      mapSupplyCategories(supplyCategories), [supplyCategories]);
-    const { data: supplies } = useSupplies();
-    const mappedSupplies = useMemo(() => mapSupplies(supplies), [supplies]);
 
-    const renderFilterBadge = (filterKey: string, filterLabel: string) => {
-      return <div
-        className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
-        key={filterKey}
-        onClick={() => onCitiesChange?.(removeFilter({ from: filterData, filter: filterKey }))}
-      >
-        <span className="pr-1">{filterLabel}</span> <X className="h-4 w-4" />
-      </div>;
-    };
-    
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
         <h1 className="text-[#2f2f2f] font-semibold text-2xl">
@@ -96,17 +53,9 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
               : undefined
           }
         />
-        <div className="flex flex-wrap gap-1 items-center">
-          {filterData.cities?.map((city) => renderFilterBadge(city, city))}
-          {filterData.priority?.map((priorityLevel) =>
-            renderFilterBadge(priorityLevel, getSupplyPriorityProps(+priorityLevel).label))}
-          {filterData.supplyCategoryIds?.map((supplyCategoryId) =>
-            renderFilterBadge(supplyCategoryId, mappedSupplyCategories[supplyCategoryId]?.name))}
-          {filterData.supplyIds?.map((supplyId) =>
-            renderFilterBadge(supplyId, mappedSupplies[supplyId]?.name))}
-          {filterData.shelterStatus?.map((statusLabel) =>
-            renderFilterBadge(statusLabel, ShelterAvailabilityStatusMapped[statusLabel]))}
-        </div>
+
+        <FilterBadges filterData={filterData} onCitiesChange={onCitiesChange} />
+
         <div className="flex flex-row">
           <Button
             variant="ghost"

From 1c660f533cb4b262f7ff260bbcb487440f2cd1a6 Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 12:34:38 -0300
Subject: [PATCH 10/11] was refator onFilterBadgeClicked to be more concise and
 intuitive

---
 src/pages/Home/Home.tsx                                    | 2 +-
 src/pages/Home/components/FilterBadges/FilterBadges.tsx    | 7 ++++---
 src/pages/Home/components/FilterBadges/types.ts            | 2 +-
 .../Home/components/ShelterListView/ShelterListView.tsx    | 4 ++--
 src/pages/Home/components/ShelterListView/types.ts         | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 65b82797..87ec64f2 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -141,7 +141,7 @@ const Home = () => {
           setFilterData((prev) => ({ ...prev, search: v }));
           setSearch(v);
         }}
-        onCitiesChange={(newFilterData) => {
+        onFilterBadgeClicked={(newFilterData) => {
           setFilterData((prev) => ({ ...prev, ...newFilterData }));
           const searchQuery = qs.stringify(
             { ...filterData, ...newFilterData },
diff --git a/src/pages/Home/components/FilterBadges/FilterBadges.tsx b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
index 62da6125..7864a58a 100644
--- a/src/pages/Home/components/FilterBadges/FilterBadges.tsx
+++ b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
@@ -30,13 +30,13 @@ function removeFilter({ from: filterData, filter: item } : { from: IFilterFormPr
     });
   
     return newFilterData;
-  }
+}
 
 const FilterBadges = React.forwardRef<
   HTMLDivElement,
   IFilterBadgesProps
 >((props, ref) => {
-    const { filterData, onCitiesChange } = props;
+    const { filterData, onBadgeClicked } = props;
 
     const { data: supplyCategories } = useSupplyCategories();
     const mappedSupplyCategories = useMemo(() =>
@@ -48,7 +48,8 @@ const FilterBadges = React.forwardRef<
         return <div
           className="flex items-center px-4 py-1 font-normal text-sm md:text-md rounded-3xl bg-gray-300 justify-center cursor-pointer hover:opacity-80 transition-all duration-200"
           key={filterKey}
-          onClick={() => onCitiesChange?.(removeFilter({ from: filterData, filter: filterKey }))}
+          onClick={() =>
+            onBadgeClicked?.(removeFilter({ from: filterData, filter: filterKey }))}
         >
           <span className="pr-1">{filterLabel}</span> <X className="h-4 w-4" />
         </div>;
diff --git a/src/pages/Home/components/FilterBadges/types.ts b/src/pages/Home/components/FilterBadges/types.ts
index b620dd04..df1e7829 100644
--- a/src/pages/Home/components/FilterBadges/types.ts
+++ b/src/pages/Home/components/FilterBadges/types.ts
@@ -4,5 +4,5 @@ import { IFilterFormProps } from "../Filter/types";
 export interface IFilterBadgesProps
   extends React.ComponentPropsWithoutRef<'div'> {
     filterData: IFilterFormProps;
-    onCitiesChange?: (v: IFilterFormProps) => void;
+    onBadgeClicked?: (v: IFilterFormProps) => void;
 }
diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
index 0598492d..0109277d 100644
--- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx
+++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx
@@ -23,7 +23,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
       searchValue = '',
       hasMoreItems = false,
       onSearchValueChange,
-      onCitiesChange,
+      onFilterBadgeClicked,
       onFetchMoreData,
       className = '',
       onOpenModal,
@@ -54,7 +54,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           }
         />
 
-        <FilterBadges filterData={filterData} onCitiesChange={onCitiesChange} />
+        <FilterBadges filterData={filterData} onBadgeClicked={onFilterBadgeClicked} />
 
         <div className="flex flex-row">
           <Button
diff --git a/src/pages/Home/components/ShelterListView/types.ts b/src/pages/Home/components/ShelterListView/types.ts
index 24b93962..c33292ac 100644
--- a/src/pages/Home/components/ShelterListView/types.ts
+++ b/src/pages/Home/components/ShelterListView/types.ts
@@ -11,7 +11,7 @@ export interface IShelterListViewProps
   onOpenModal?: () => void;
   onClearSearch?: () => void;
   onSearchValueChange?: (v: string) => void;
-  onCitiesChange?: (v: IFilterFormProps) => void;
+  onFilterBadgeClicked?: (v: IFilterFormProps) => void;
   onFetchMoreData?: () => void;
   onSelectShelter?: (shelter: IUseSheltersData) => void;
   filterData: IFilterFormProps;

From 01e388b4316742557ce74c153c3020c40cf6ac4d Mon Sep 17 00:00:00 2001
From: Armando Jr <elfiservice@hotmail.com>
Date: Thu, 30 May 2024 13:02:53 -0300
Subject: [PATCH 11/11] ensured that data is array in FilterBadges component

---
 .../components/FilterBadges/FilterBadges.tsx  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home/components/FilterBadges/FilterBadges.tsx b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
index 7864a58a..ce6ef3bc 100644
--- a/src/pages/Home/components/FilterBadges/FilterBadges.tsx
+++ b/src/pages/Home/components/FilterBadges/FilterBadges.tsx
@@ -6,7 +6,7 @@ import { useSupplyCategories } from '@/hooks/useSupplyCategories';
 import { useSupplies } from '@/hooks/useSupplies';
 import { ShelterAvailabilityStatusMapped, mapSupplies, mapSupplyCategories } from '../Filter/Filter';
 import { IFilterBadgesProps } from './types';
-import { IFilterFormProps } from '../Filter/types';
+import { IFilterFormProps, ShelterAvailabilityStatus } from '../Filter/types';
 
 function removeFilter({ from: filterData, filter: item } : { from: IFilterFormProps, filter: string }): IFilterFormProps {
     const filterFormPropsListNames = Object.keys(filterData);
@@ -32,6 +32,21 @@ function removeFilter({ from: filterData, filter: item } : { from: IFilterFormPr
     return newFilterData;
 }
 
+const ensureDataIsArray = (data: string[] | ShelterAvailabilityStatus[] | string): string[] | ShelterAvailabilityStatus[] => {
+
+    try {
+        if (Array.isArray(data)) {
+            return data;
+        }
+        
+        throw new Error("Filter URI query is not an array.");
+    } catch (error) {
+        console.error(error);
+    }
+
+    return [];
+};
+
 const FilterBadges = React.forwardRef<
   HTMLDivElement,
   IFilterBadgesProps
@@ -57,15 +72,15 @@ const FilterBadges = React.forwardRef<
 
     return (
         <div ref={ref} className="flex flex-wrap gap-1 items-center">
-            {filterData.cities?.map((city) => renderFilterBadge(city, city))}
-            {filterData.priority?.map((priorityLevel) =>
+            {ensureDataIsArray(filterData.cities)?.map((city) => renderFilterBadge(city, city))}
+            {ensureDataIsArray(filterData.priority)?.map((priorityLevel) =>
                 renderFilterBadge(priorityLevel, getSupplyPriorityProps(+priorityLevel).label))}
-            {filterData.supplyCategoryIds?.map((supplyCategoryId) =>
+            {ensureDataIsArray(filterData.supplyCategoryIds)?.map((supplyCategoryId) =>
                 renderFilterBadge(supplyCategoryId, mappedSupplyCategories[supplyCategoryId]?.name))}
-            {filterData.supplyIds?.map((supplyId) =>
+            {ensureDataIsArray(filterData.supplyIds)?.map((supplyId) =>
                 renderFilterBadge(supplyId, mappedSupplies[supplyId]?.name))}
-            {filterData.shelterStatus?.map((statusLabel) =>
-                renderFilterBadge(statusLabel, ShelterAvailabilityStatusMapped[statusLabel]))}
+            {ensureDataIsArray(filterData.shelterStatus)?.map((statusLabel) =>
+                renderFilterBadge(statusLabel, ShelterAvailabilityStatusMapped[statusLabel as ShelterAvailabilityStatus]))}
         </div>
     );
 });