From afe04b988931cac066ca5ec99ce8f5a028e63613 Mon Sep 17 00:00:00 2001 From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com> Date: Wed, 17 Jan 2024 18:09:56 +0530 Subject: [PATCH] Cache only the advance filters (#6988) * add blacklisting logic * update useFilter * add space * Update useFilters.tsx * Update useFilters.tsx * lint --- src/Common/hooks/useFilters.tsx | 17 +++++++++++++++-- src/Components/Assets/AssetsList.tsx | 1 + src/Components/ExternalResult/ResultList.tsx | 6 +++++- src/Components/Facility/HospitalList.tsx | 1 + src/Components/Patient/ManagePatients.tsx | 6 ++++++ src/Components/Patient/SampleViewAdmin.tsx | 3 +++ src/Components/Shifting/BoardView.tsx | 1 + src/Components/Shifting/ListView.tsx | 2 +- src/Components/Users/ManageUsers.tsx | 5 ++++- 9 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx index 117a14ba418..dd08a2442a5 100644 --- a/src/Common/hooks/useFilters.tsx +++ b/src/Common/hooks/useFilters.tsx @@ -8,6 +8,7 @@ import { classNames } from "../../Utils/utils"; export type FilterState = Record; export type FilterParamKeys = string | string[]; + interface FilterBadgeProps { name: string; value?: string; @@ -18,7 +19,13 @@ interface FilterBadgeProps { * A custom hook wrapped around raviger's `useQueryParams` hook to ease handling * of pagination and filters. */ -export default function useFilters({ limit = 14 }: { limit?: number }) { +export default function useFilters({ + limit = 14, + cacheBlacklist = [], +}: { + limit?: number; + cacheBlacklist?: string[]; +}) { const { t } = useTranslation(); const { kasp_string } = useConfig(); const hasPagination = limit > 0; @@ -29,8 +36,14 @@ export default function useFilters({ limit = 14 }: { limit?: number }) { query: QueryParam, options?: setQueryParamsOptions ) => { + const updatedQParams = { ...query }; + + for (const param of cacheBlacklist) { + delete updatedQParams[param]; + } + _setQueryParams(query, options); - updateFiltersCache(query); + updateFiltersCache(updatedQParams); }; const updateQuery = (filter: FilterState) => { diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx index 3fc9c9f9f14..bc0abbd4c2a 100644 --- a/src/Components/Assets/AssetsList.tsx +++ b/src/Components/Assets/AssetsList.tsx @@ -38,6 +38,7 @@ const AssetsList = () => { resultsPerPage, } = useFilters({ limit: 18, + cacheBlacklist: ["search"], }); const [assets, setAssets] = useState([{} as AssetData]); const [isLoading, setIsLoading] = useState(false); diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx index 9a04fcf38b6..f644c2b54e0 100644 --- a/src/Components/ExternalResult/ResultList.tsx +++ b/src/Components/ExternalResult/ResultList.tsx @@ -18,6 +18,7 @@ import useQuery from "../../Utils/request/useQuery"; import { parsePhoneNumber } from "../../Utils/utils"; import useAuthUser from "../../Common/hooks/useAuthUser"; import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor"; + const Loading = lazy(() => import("../Common/Loading")); export default function ResultList() { @@ -29,7 +30,10 @@ export default function ResultList() { FilterBadges, advancedFilter, resultsPerPage, - } = useFilters({ limit: 14 }); + } = useFilters({ + limit: 14, + cacheBlacklist: ["mobile_number", "name"], + }); const [showDialog, setShowDialog] = useState(false); const [selectedFacility, setSelectedFacility] = useState({ name: "", diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx index 075ad8de39e..e173f78e20e 100644 --- a/src/Components/Facility/HospitalList.tsx +++ b/src/Components/Facility/HospitalList.tsx @@ -34,6 +34,7 @@ export const HospitalList = () => { resultsPerPage, } = useFilters({ limit: 14, + cacheBlacklist: ["search"], }); let manageFacilities: any = null; const { user_type } = useAuthUser(); diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx index 0f9a6656f67..6f1fa4cafeb 100644 --- a/src/Components/Patient/ManagePatients.tsx +++ b/src/Components/Patient/ManagePatients.tsx @@ -99,6 +99,12 @@ export const PatientManager = () => { resultsPerPage, } = useFilters({ limit: 12, + cacheBlacklist: [ + "name", + "patient_no", + "phone_number", + "emergency_phone_number", + ], }); const [selectedFacility, setSelectedFacility] = useState({ name: "", diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx index 085616adfac..5aca767e480 100644 --- a/src/Components/Patient/SampleViewAdmin.tsx +++ b/src/Components/Patient/SampleViewAdmin.tsx @@ -26,6 +26,7 @@ import CountBlock from "../../CAREUI/display/Count"; import CareIcon from "../../CAREUI/icons/CareIcon"; import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover"; import Page from "../Common/components/Page"; + const Loading = lazy(() => import("../Common/Loading")); export default function SampleViewAdmin() { @@ -38,6 +39,7 @@ export default function SampleViewAdmin() { resultsPerPage, } = useFilters({ limit: 10, + cacheBlacklist: ["patient_name", "district_name"], }); const dispatch: any = useDispatch(); const initialData: any[] = []; @@ -58,6 +60,7 @@ export default function SampleViewAdmin() { const res = await dispatch(getAnyFacility(qParams.facility)); setFacilityName(res?.data?.name); } + fetchData(); }, [dispatch, qParams.facility]); diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 9c96daa0e59..ed29a16b8d5 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -29,6 +29,7 @@ const ScrollingComponent = withScrolling("div"); export default function BoardView() { const { qParams, updateQuery, FilterBadges, advancedFilter } = useFilters({ limit: -1, + cacheBlacklist: ["patient_name"], }); const { wartime_shifting } = useConfig(); diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx index ec11f4cf91f..45a484af933 100644 --- a/src/Components/Shifting/ListView.tsx +++ b/src/Components/Shifting/ListView.tsx @@ -36,7 +36,7 @@ export default function ListView() { FilterBadges, advancedFilter, resultsPerPage, - } = useFilters({}); + } = useFilters({ cacheBlacklist: ["patient_name"] }); const [modalFor, setModalFor] = useState({ externalId: undefined, diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx index 300f9846a89..597ddefba19 100644 --- a/src/Components/Users/ManageUsers.tsx +++ b/src/Components/Users/ManageUsers.tsx @@ -44,7 +44,10 @@ export default function ManageUsers() { FilterBadges, advancedFilter, resultsPerPage, - } = useFilters({ limit: 18 }); + } = useFilters({ + limit: 18, + cacheBlacklist: ["username"], + }); let manageUsers: any = null; const [expandSkillList, setExpandSkillList] = useState(false); const [expandFacilityList, setExpandFacilityList] = useState(false);