diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx index 264a3eba7bd..7e0db465031 100644 --- a/src/Common/hooks/useFilters.tsx +++ b/src/Common/hooks/useFilters.tsx @@ -1,4 +1,4 @@ -import { useQueryParams } from "raviger"; +import { QueryParam, setQueryParamsOptions, useQueryParams } from "raviger"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import GenericFilterBadge from "../../CAREUI/display/FilterBadge"; @@ -30,17 +30,23 @@ export default function useFilters({ const { kasp_string } = useConfig(); const hasPagination = limit > 0; const [showFilters, setShowFilters] = useState(false); - const [qParams, setQueryParams] = useQueryParams(); + const [qParams, _setQueryParams] = useQueryParams(); + + const setQueryParams = ( + query: QueryParam, + options?: setQueryParamsOptions + ) => { + const updatedQParams = { ...query }; + for (const param of cacheBlacklist) { + delete updatedQParams[param]; + } + _setQueryParams(query, options); + updateFiltersCache(updatedQParams); + }; const updateQuery = (filter: FilterState) => { filter = hasPagination ? { page: 1, limit, ...filter } : filter; - const updatedQParams = { ...qParams }; - for (const key of cacheBlacklist) { - delete updatedQParams[key]; - } - setQueryParams(Object.assign({}, updatedQParams, filter), { - replace: true, - }); + setQueryParams(Object.assign({}, qParams, filter), { replace: true }); }; const updatePage = (page: number) => { if (!hasPagination) return; @@ -51,15 +57,6 @@ export default function useFilters({ }; const removeFilter = (param: string) => removeFilters([param]); - useEffect(() => { - const updatedQParams = { ...qParams }; - - for (const key of cacheBlacklist) { - delete updatedQParams[key]; - } - updateFiltersCache(updatedQParams); - }, [qParams, cacheBlacklist]); - useEffect(() => { const cache = getFiltersCache(); const qParamKeys = Object.keys(qParams);