From dd86c83f8522dbe925142f18cb62f447d557b98d Mon Sep 17 00:00:00 2001 From: johnviti Date: Fri, 24 May 2024 21:52:43 -0300 Subject: [PATCH 1/7] Fix: persist filters on return --- src/pages/Home/Home.tsx | 62 ++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 4f51f924..cfe1d070 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, Search } from 'lucide-react'; import qs from 'qs'; import { BurgerMenu, Footer, Header } from '@/components'; @@ -18,34 +18,39 @@ const initialFilterData: IFilterFormProps = { cities: [], }; +const loadFilterData = (): IFilterFormProps => { + const storedFilterData = JSON.parse(localStorage.getItem('filterData') || '{}'); + return { ...initialFilterData, ...storedFilterData, ...qs.parse(new URLSearchParams(window.location.search).toString()) }; +}; + +const saveFilterData = (filterData: IFilterFormProps) => { + localStorage.setItem('filterData', JSON.stringify(filterData)); +}; + const Home = () => { const { data: shelters, loading, refresh } = useShelters({ cache: true }); const [isModalOpen, setOpenModal] = useState(false); const [, setSearchParams] = useSearchParams(); - const [filterData, setFilterData] = useState({ - ...initialFilterData, - ...qs.parse(new URLSearchParams(window.location.search).toString()), - }); + const [filterData, setFilterData] = useState(loadFilterData); const [, setSearch] = useThrottle( { 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('filterData'); setSearchParams(''); + console.log(filterData, 'filterData'); refresh(); }, [refresh, setSearch, setSearchParams]); @@ -58,15 +63,10 @@ const Home = () => { (values: IFilterFormProps) => { setOpenModal(false); setFilterData(values); - const searchQuery = qs.stringify(values, { - skipNulls: true, - }); + const searchQuery = qs.stringify(values, { skipNulls: true }); setSearchParams(searchQuery); - refresh({ - params: { - search: searchQuery, - }, - }); + saveFilterData(values); + refresh({ params: { search: searchQuery } }); }, [refresh, setSearchParams] ); @@ -78,15 +78,25 @@ const Home = () => { perPage: shelters.perPage, search: qs.stringify(filterData), }; - - refresh( - { - params: params, - }, - true - ); + refresh({ params }, true); }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]); + useEffect(() => { + const storedFilterData = loadFilterData(); + console.log('Loaded filter data:', storedFilterData['cities'].length); + const Keys = ['search', 'priority', 'cities']; + if ( Keys.every(key => storedFilterData[key].length > 0)){ + console.log('Applying filter data from localStorage:', storedFilterData); + setFilterData(storedFilterData); + setSearchParams(qs.stringify(storedFilterData)); + refresh({ params: { search: qs.stringify(storedFilterData) } }); + } + }, [refresh, setSearchParams]); + + useEffect(() => { + saveFilterData(filterData); + }, [filterData]); + return (
{isModalOpen && ( From 9c8a52e7517a5367055830e90792624fb2b411aa Mon Sep 17 00:00:00 2001 From: johnviti Date: Fri, 24 May 2024 22:01:18 -0300 Subject: [PATCH 2/7] retirando console.log --- src/pages/Home/Home.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index cfe1d070..5cf8ed40 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -50,7 +50,6 @@ const Home = () => { setFilterData(initialFilterData); localStorage.removeItem('filterData'); setSearchParams(''); - console.log(filterData, 'filterData'); refresh(); }, [refresh, setSearch, setSearchParams]); @@ -83,10 +82,8 @@ const Home = () => { useEffect(() => { const storedFilterData = loadFilterData(); - console.log('Loaded filter data:', storedFilterData['cities'].length); const Keys = ['search', 'priority', 'cities']; if ( Keys.every(key => storedFilterData[key].length > 0)){ - console.log('Applying filter data from localStorage:', storedFilterData); setFilterData(storedFilterData); setSearchParams(qs.stringify(storedFilterData)); refresh({ params: { search: qs.stringify(storedFilterData) } }); From 337cdc5991411726e7c058e5256cc2b355237230 Mon Sep 17 00:00:00 2001 From: johnviti Date: Sun, 26 May 2024 13:03:05 -0300 Subject: [PATCH 3/7] =?UTF-8?q?Feat:=20Ajustando=20v=C3=A1riaveis=20fixas?= =?UTF-8?q?=20e=20aprimorando?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 5cf8ed40..90d22d5a 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -27,11 +27,14 @@ const saveFilterData = (filterData: IFilterFormProps) => { localStorage.setItem('filterData', JSON.stringify(filterData)); }; +const Keys = ['search', 'priority', 'cities']; + const Home = () => { const { data: shelters, loading, refresh } = useShelters({ cache: true }); const [isModalOpen, setOpenModal] = useState(false); const [, setSearchParams] = useSearchParams(); - const [filterData, setFilterData] = useState(loadFilterData); + const storedFilterData = loadFilterData(); + const [filterData, setFilterData] = useState(storedFilterData); const [, setSearch] = useThrottle( { @@ -81,8 +84,6 @@ const Home = () => { }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]); useEffect(() => { - const storedFilterData = loadFilterData(); - const Keys = ['search', 'priority', 'cities']; if ( Keys.every(key => storedFilterData[key].length > 0)){ setFilterData(storedFilterData); setSearchParams(qs.stringify(storedFilterData)); From 7e7c18c4e443f030e70a25193d098ce6626f93b2 Mon Sep 17 00:00:00 2001 From: johnviti Date: Mon, 27 May 2024 19:35:22 -0300 Subject: [PATCH 4/7] Feat: otimizando o useEffets e ajustando a condicional --- src/pages/Home/Home.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 90d22d5a..2da665ae 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -24,17 +24,16 @@ const loadFilterData = (): IFilterFormProps => { }; const saveFilterData = (filterData: IFilterFormProps) => { + console.log('Valores storage',filterData); localStorage.setItem('filterData', JSON.stringify(filterData)); }; -const Keys = ['search', 'priority', 'cities']; const Home = () => { const { data: shelters, loading, refresh } = useShelters({ cache: true }); const [isModalOpen, setOpenModal] = useState(false); const [, setSearchParams] = useSearchParams(); - const storedFilterData = loadFilterData(); - const [filterData, setFilterData] = useState(storedFilterData); + const [filterData, setFilterData] = useState(loadFilterData()); const [, setSearch] = useThrottle( { @@ -84,16 +83,12 @@ const Home = () => { }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]); useEffect(() => { - if ( Keys.every(key => storedFilterData[key].length > 0)){ - setFilterData(storedFilterData); - setSearchParams(qs.stringify(storedFilterData)); - refresh({ params: { search: qs.stringify(storedFilterData) } }); + if (filterData.search || filterData.cities.length > 0 || filterData.priority || filterData.shelterStatus.length > 0 || filterData.supplyCategoryIds.length > 0 || filterData.supplyIds.length > 0){ + setSearchParams(qs.stringify(filterData)); + refresh({ params: { search: qs.stringify(filterData) } }); } - }, [refresh, setSearchParams]); - - useEffect(() => { saveFilterData(filterData); - }, [filterData]); + }, [filterData, refresh, setSearchParams]); return (
From cf4212bef6824264cb2d96eb671829a429304804 Mon Sep 17 00:00:00 2001 From: johnviti Date: Mon, 27 May 2024 19:37:21 -0300 Subject: [PATCH 5/7] Fix: excluindo console.log --- src/pages/Home/Home.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 2da665ae..903deffd 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -24,7 +24,6 @@ const loadFilterData = (): IFilterFormProps => { }; const saveFilterData = (filterData: IFilterFormProps) => { - console.log('Valores storage',filterData); localStorage.setItem('filterData', JSON.stringify(filterData)); }; From 39e29689241ba5049fe279404941c6ae8e99bba9 Mon Sep 17 00:00:00 2001 From: johnviti Date: Sun, 2 Jun 2024 01:21:37 -0300 Subject: [PATCH 6/7] Fix: add key to kebab-case and removing unnecessary dependencies --- src/pages/Home/Home.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 909cb45a..dd51f3ce 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { RotateCw, Search } from 'lucide-react'; +import { RotateCw} from 'lucide-react'; import qs from 'qs'; import { BurgerMenu, Footer, Header } from '@/components'; @@ -19,15 +19,14 @@ const initialFilterData: IFilterFormProps = { }; const loadFilterData = (): IFilterFormProps => { - const storedFilterData = JSON.parse(localStorage.getItem('filterData') || '{}'); + 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('filterData', JSON.stringify(filterData)); + localStorage.setItem('filter-data', JSON.stringify(filterData)); }; - const Home = () => { const { data: shelters, loading, refresh } = useShelters({ cache: true }); const [isModalOpen, setOpenModal] = useState(false); @@ -49,7 +48,7 @@ const Home = () => { const clearSearch = useCallback(() => { setSearch(''); setFilterData(initialFilterData); - localStorage.removeItem('filterData'); + localStorage.removeItem('filter-data'); setSearchParams(''); refresh(); }, [refresh, setSearch, setSearchParams]); @@ -80,7 +79,7 @@ const Home = () => { saveFilterData(values); refresh({ params: { search: searchQuery } }); }, - [refresh, setSearchParams, factorySearchArgs] + [refresh, setSearchParams] ); const handleFetchMore = useCallback(() => { @@ -91,10 +90,10 @@ const Home = () => { search: qs.stringify(factorySearchArgs(filterData)), }; refresh({ params }, true); - }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage,factorySearchArgs,]); + }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage, factorySearchArgs]); useEffect(() => { - if (filterData.search || filterData.cities.length > 0 || filterData.priority || filterData.shelterStatus.length > 0 || filterData.supplyCategoryIds.length > 0 || filterData.supplyIds.length > 0){ + if (filterData.search || filterData.cities.length > 0 || filterData.priorities || filterData.shelterStatus.length > 0 || filterData.supplyCategoryIds.length > 0 || filterData.supplyIds.length > 0){ setSearchParams(qs.stringify(filterData)); refresh({ params: { search: qs.stringify(filterData) } }); } From 9bef761a168a54bc19c690a2f73078168b705a08 Mon Sep 17 00:00:00 2001 From: johnviti Date: Sun, 2 Jun 2024 01:34:20 -0300 Subject: [PATCH 7/7] Fix: check filterData.priorities is array --- src/pages/Home/Home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index dd51f3ce..f4d83701 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -93,7 +93,7 @@ const Home = () => { }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage, factorySearchArgs]); useEffect(() => { - if (filterData.search || filterData.cities.length > 0 || filterData.priorities || filterData.shelterStatus.length > 0 || filterData.supplyCategoryIds.length > 0 || filterData.supplyIds.length > 0){ + 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) } }); }