From b58d4370ef8483cbd2e1dd29bf13c1040979884e Mon Sep 17 00:00:00 2001
From: John Victor <84483840+Johnviti@users.noreply.github.com>
Date: Sun, 2 Jun 2024 14:20:41 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20[BUG]=20Filtros=20n=C3=A3o=20persistem?=
 =?UTF-8?q?=20ao=20retornar=20de=20um=20abrigo=20espec=C3=ADfico.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix: persist filters on return

* retirando console.log

* Feat: Ajustando váriaveis fixas e aprimorando

* Feat: otimizando o useEffets e ajustando a condicional

* Fix: excluindo console.log

* Fix: add key to kebab-case and removing unnecessary dependencies

* Fix: check filterData.priorities is array
---
 src/pages/Home/Home.tsx | 67 ++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index bc088a7a..f4d83701 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { RotateCw } from 'lucide-react';
+import { RotateCw} from 'lucide-react';
 import qs from 'qs';
 
 import { BurgerMenu, Footer, Header } from '@/components';
@@ -18,33 +18,37 @@ const initialFilterData: IFilterFormProps = {
   cities: [],
 };
 
+const loadFilterData = (): IFilterFormProps => {
+  const storedFilterData = JSON.parse(localStorage.getItem('filter-data') || '{}');
+  return { ...initialFilterData, ...storedFilterData, ...qs.parse(new URLSearchParams(window.location.search).toString()) };
+};
+
+const saveFilterData = (filterData: IFilterFormProps) => {
+  localStorage.setItem('filter-data', JSON.stringify(filterData));
+};
+
 const Home = () => {
   const { data: shelters, loading, refresh } = useShelters({ cache: true });
   const [isModalOpen, setOpenModal] = useState<boolean>(false);
   const [, setSearchParams] = useSearchParams();
-  const [filterData, setFilterData] = useState<IFilterFormProps>({
-    ...initialFilterData,
-    ...qs.parse(new URLSearchParams(window.location.search).toString()),
-  });
+  const [filterData, setFilterData] = useState<IFilterFormProps>(loadFilterData());
 
   const [, setSearch] = useThrottle<string>(
     {
       throttle: 400,
       callback: () => {
         const params = new URLSearchParams(qs.stringify(filterData));
-
         setSearchParams(params);
-        refresh({
-          params: params,
-        });
+        refresh({ params });
       },
     },
-    []
+    [filterData]
   );
 
   const clearSearch = useCallback(() => {
     setSearch('');
     setFilterData(initialFilterData);
+    localStorage.removeItem('filter-data');
     setSearchParams('');
     refresh();
   }, [refresh, setSearch, setSearchParams]);
@@ -70,20 +74,12 @@ const Home = () => {
     (values: IFilterFormProps) => {
       setOpenModal(false);
       setFilterData(values);
-
-      const searchQuery = qs.stringify(factorySearchArgs(values), {
-        skipNulls: true,
-      });
-
+      const searchQuery = qs.stringify(values, { skipNulls: true });
       setSearchParams(searchQuery);
-
-      refresh({
-        params: {
-          search: searchQuery,
-        },
-      });
+      saveFilterData(values);
+      refresh({ params: { search: searchQuery } });
     },
-    [refresh, setSearchParams, factorySearchArgs]
+    [refresh, setSearchParams]
   );
 
   const handleFetchMore = useCallback(() => {
@@ -93,21 +89,16 @@ const Home = () => {
       perPage: shelters.perPage,
       search: qs.stringify(factorySearchArgs(filterData)),
     };
-
-    refresh(
-      {
-        params: params,
-      },
-      true
-    );
-  }, [
-    refresh,
-    filterData,
-    shelters.filters,
-    shelters.page,
-    shelters.perPage,
-    factorySearchArgs,
-  ]);
+    refresh({ params }, true);
+  }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage, factorySearchArgs]);
+
+  useEffect(() => {
+    if (filterData.search || filterData.cities.length > 0 || filterData.priorities.length > 0 || filterData.shelterStatus.length > 0 || filterData.supplyCategoryIds.length > 0 || filterData.supplyIds.length > 0){
+      setSearchParams(qs.stringify(filterData));
+      refresh({ params: { search: qs.stringify(filterData) } });
+    }
+    saveFilterData(filterData);
+  }, [filterData, refresh, setSearchParams]);
 
   return (
     <div className="flex flex-col h-screen items-center">