Skip to content

Commit

Permalink
fix: [BUG] Filtros não persistem ao retornar de um abrigo específico.
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Johnviti authored Jun 2, 2024
1 parent 37cc2ec commit b58d437
Showing 1 changed file with 29 additions and 38 deletions.
67 changes: 29 additions & 38 deletions src/pages/Home/Home.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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]);
Expand All @@ -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(() => {
Expand All @@ -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">
Expand Down

0 comments on commit b58d437

Please sign in to comment.