Adds support to remove all filters via useFilters's utility method and fixes issues with patient advanced filters

src/Common/hooks/useFilters.tsx

@@ -54,7 +54,8 @@ export default function useFilters({
     if (!hasPagination) return;
     setQueryParams(Object.assign({}, qParams, { page }), { replace: true });
   };
-  const removeFilters = (params: string[]) => {
+  const removeFilters = (params?: string[]) => {
+    params ??= Object.keys(qParams);
     setQueryParams(removeFromQuery(qParams, params));
   };
   const removeFilter = (param: string) => removeFilters([param]);
@@ -184,19 +185,16 @@ export default function useFilters({
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
         ))}
-        {activeFilters.length >= 1 && (
+        {children}
+        {(activeFilters.length >= 1 || children) && (
           <button
             id="clear-all-filters"
             className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
-            onClick={() => {
-              updateFiltersCache({});
-              removeFilters(Object.keys(qParams));
-            }}
+            onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}
           </button>
         )}
-        {children}
       </div>
     );
   };

src/Components/Assets/AssetFilter.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useQueryParams } from "raviger";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
@@ -53,18 +53,10 @@ function AssetFilter(props: any) {
     );
   }, [facility?.id, qParams.facility, qParams.location]);
 
-  const clearFilter = useCallback(() => {
-    removeFilters([
-      "facility",
-      "asset_type",
-      "asset_class",
-      "status",
-      "location",
-      "warranty_amc_end_of_validity_before",
-      "warranty_amc_end_of_validity_after",
-    ]);
+  const clearFilter = () => {
+    removeFilters();
     closeFilter();
-  }, [qParams]);
+  };
 
   const applyFilter = () => {
     const data = {

src/Components/ExternalResult/ListFilter.tsx

@@ -13,16 +13,6 @@ import routes from "../../Redux/api";
 import Loading from "../Common/Loading";
 import { LocalBodyModel, WardModel } from "../Facility/models";
 
-const clearFilterState = {
-  created_date_before: "",
-  created_date_after: "",
-  result_date_before: "",
-  result_date_after: "",
-  sample_collection_date_before: "",
-  sample_collection_date_after: "",
-  srf_id: "",
-};
-
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
 
@@ -185,11 +175,7 @@ export default function ListFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters([
-          ...Object.keys(clearFilterState),
-          "wards",
-          "local_bodies",
-        ]);
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Facility/FacilityFilter/index.tsx

@@ -8,13 +8,6 @@ import DistrictAutocompleteFormField from "../../Common/DistrictAutocompleteForm
 import LocalBodyAutocompleteFormField from "../../Common/LocalBodyAutocompleteFormField";
 import { SelectFormField } from "../../Form/FormFields/SelectFormField";
 
-const clearFilterState = {
-  state: "",
-  district: "",
-  local_body: "",
-  facility_type: "",
-};
-
 function FacilityFilter(props: any) {
   const { t } = useTranslation();
   const { filter, onChange, closeFilter, removeFilters } = props;
@@ -65,7 +58,7 @@ function FacilityFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Patient/PatientFilter.tsx

@@ -101,50 +101,6 @@ export default function PatientFilter(props: any) {
   });
   const dispatch: any = useDispatch();
 
-  const clearFilterState = {
-    district: "",
-    facility: "",
-    facility_type: "",
-    lsgBody: "",
-    facility_ref: null,
-    lsgBody_ref: null,
-    district_ref: null,
-    date_declared_positive_before: "",
-    date_declared_positive_after: "",
-    date_of_result_before: "",
-    date_of_result_after: "",
-    created_date_before: "",
-    created_date_after: "",
-    modified_date_before: "",
-    modified_date_after: "",
-    category: null,
-    gender: null,
-    disease_status: null,
-    age_min: "",
-    age_max: "",
-    date_of_result: null,
-    date_declared_positive: null,
-    last_consultation_medico_legal_case: null,
-    last_consultation_encounter_date_before: "",
-    last_consultation_encounter_date_after: "",
-    last_consultation_discharge_date_before: "",
-    last_consultation_discharge_date_after: "",
-    last_consultation_admitted_to_list: [],
-    last_consultation_current_bed__location: "",
-    srf_id: "",
-    number_of_doses: null,
-    covin_id: "",
-    is_kasp: null,
-    is_declared_positive: null,
-    last_consultation_symptoms_onset_date_before: "",
-    last_consultation_symptoms_onset_date_after: "",
-    last_vaccinated_date_before: "",
-    last_vaccinated_date_after: "",
-    last_consultation_is_telemedicine: null,
-    is_antenatal: null,
-    ventilator_interface: null,
-  };
-
   useEffect(() => {
     async function fetchData() {
       if (filter.facility) {
@@ -336,7 +292,7 @@ export default function PatientFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Patient/SampleFilters.tsx

@@ -15,14 +15,6 @@ import { FieldLabel } from "../Form/FormFields/FormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 
-const clearFilterState = {
-  status: "",
-  result: "",
-  facility: "",
-  facility_ref: null,
-  sample_type: "",
-};
-
 export default function UserFilter(props: any) {
   const { filter, onChange, closeFilter, removeFilters } = props;
 
@@ -73,7 +65,7 @@ export default function UserFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Resource/ListFilter.tsx

@@ -14,22 +14,6 @@ import { dateQueryString } from "../../Utils/utils";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 
-const clearFilterState = {
-  origin_facility: "",
-  origin_facility_ref: "",
-  approving_facility: "",
-  approving_facility_ref: "",
-  assigned_facility: "",
-  assigned_facility_ref: "",
-  emergency: "",
-  created_date_before: "",
-  created_date_after: "",
-  modified_date_before: "",
-  modified_date_after: "",
-  ordering: "",
-  status: "",
-};
-
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
 
@@ -139,7 +123,7 @@ export default function ListFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Shifting/ListFilter.tsx

@@ -28,30 +28,6 @@ import dayjs from "dayjs";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 
-const clearFilterState = {
-  origin_facility: "",
-  origin_facility_ref: "",
-  shifting_approving_facility: "",
-  shifting_approving_facility_ref: "",
-  assigned_facility: "",
-  assigned_facility_ref: "",
-  emergency: "",
-  is_up_shift: "",
-  created_date_before: "",
-  created_date_after: "",
-  modified_date_before: "",
-  modified_date_after: "",
-  patient_phone_number: "",
-  ordering: "",
-  is_kasp: "",
-  status: "",
-  assigned_user_ref: "",
-  assigned_to: "",
-  disease_status: "",
-  is_antenatal: "",
-  breathlessness_level: "",
-};
-
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
 
@@ -220,7 +196,7 @@ export default function ListFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >

src/Components/Users/UserFilter.tsx

@@ -29,16 +29,6 @@ export default function UserFilter(props: any) {
     district_ref: null,
   });
 
-  const clearFilterState = {
-    first_name: "",
-    last_name: "",
-    phone_number: undefined,
-    alt_phone_number: undefined,
-    user_type: "",
-    district_id: "",
-    district_ref: null,
-  };
-
   const setDistrict = (selected: any) => {
     const filterData: any = { ...filterState };
     filterData["district_ref"] = selected;
@@ -83,7 +73,7 @@ export default function UserFilter(props: any) {
       advancedFilter={props}
       onApply={applyFilter}
       onClear={() => {
-        removeFilters(Object.keys(clearFilterState));
+        removeFilters();
         closeFilter();
       }}
     >