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(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('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 (