Improve District filter in User Management

ohcnetwork · Mar 6, 2024 · 1d52ed7 · 1d52ed7
1 parent 85e6c88
commit 1d52ed7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 42 deletions.
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import { navigate } from "raviger";
-import { lazy, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CountBlock from "../../CAREUI/display/Count";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -73,8 +73,7 @@ export default function ManageUsers() {
   const [weeklyHoursError, setWeeklyHoursError] = useState<string>("");
 
   const extremeSmallScreenBreakpoint = 320;
-  const isExtremeSmallScreen =
-    width <= extremeSmallScreenBreakpoint ? true : false;
+  const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint;
 
   const {
     data: userListData,
@@ -92,15 +91,24 @@ export default function ManageUsers() {
       phone_number: qParams.phone_number,
       alt_phone_number: qParams.alt_phone_number,
       user_type: qParams.user_type,
-      district_id: qParams.district_id,
+      district_id: qParams.district,
     },
   });
 
+  useEffect(() => {
+    if (!qParams.state && qParams.district) {
+      advancedFilter.removeFilters(["district"]);
+    }
+    if (!qParams.district && qParams.state) {
+      advancedFilter.removeFilters(["state"]);
+    }
+  }, [advancedFilter, qParams]);
+
   const { data: districtData, loading: districtDataLoading } = useQuery(
     routes.getDistrict,
     {
-      prefetch: !!qParams.district_id,
-      pathParams: { id: qParams.district_id },
+      prefetch: !!qParams.district,
+      pathParams: { id: qParams.district },
     }
   );
 
@@ -535,8 +543,8 @@ export default function ManageUsers() {
             badge("Role", "user_type"),
             value(
               "District",
-              "district_id",
-              qParams.district_id ? districtData?.name || "" : ""
+              "district",
+              qParams.district ? districtData?.name || "" : ""
             ),
           ]}
         />

diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
@@ -1,4 +1,3 @@
-import DistrictSelect from "../Facility/FacilityFilter/DistrictSelect";
 import { parsePhoneNumber } from "../../Utils/utils";
 import TextFormField from "../Form/FormFields/TextFormField";
 import SelectMenuV2 from "../Form/SelectMenuV2";
@@ -7,8 +6,9 @@ import { USER_TYPE_OPTIONS } from "../../Common/constants";
 import useMergeState from "../../Common/hooks/useMergeState";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
-import useQuery from "../../Utils/request/useQuery";
-import routes from "../../Redux/api";
+import DistrictAutocompleteFormField from "../Common/DistrictAutocompleteFormField";
+import StateAutocompleteFormField from "../Common/StateAutocompleteFormField";
+import { useTranslation } from "react-i18next";
 
 const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
   if (!phoneNumber) return "";
@@ -18,55 +18,52 @@ const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
 };
 
 export default function UserFilter(props: any) {
+  const { t } = useTranslation();
   const { filter, onChange, closeFilter, removeFilters } = props;
   const [filterState, setFilterState] = useMergeState({
     first_name: filter.first_name || "",
     last_name: filter.last_name || "",
     phone_number: filter.phone_number || "+91",
     alt_phone_number: filter.alt_phone_number || "+91",
     user_type: filter.user_type || "",
-    district_id: filter.district_id || "",
-    district_ref: null,
+    district: filter.district || "",
+    state: filter.state || "",
   });
 
-  const setDistrict = (selected: any) => {
-    const filterData: any = { ...filterState };
-    filterData["district_ref"] = selected;
-    filterData["district_id"] = (selected || {}).id;
-    setFilterState(filterData);
-  };
-
   const applyFilter = () => {
     const {
       first_name,
       last_name,
       phone_number,
       alt_phone_number,
       user_type,
-      district_id,
+      district,
+      state,
     } = filterState;
     const data = {
       first_name: first_name || "",
       last_name: last_name || "",
       phone_number: parsePhoneNumberForFilterParam(phone_number),
       alt_phone_number: parsePhoneNumberForFilterParam(alt_phone_number),
       user_type: user_type || "",
-      district_id: district_id || "",
+      district: district || "",
+      state: district ? state || "" : "",
     };
     onChange(data);
   };
 
-  useQuery(routes.getDistrict, {
-    prefetch: !!filter.district_id,
-    pathParams: { id: filter.district_id },
-    onResponse: (result) => {
-      if (!result || !result.data || !result.res) return;
-      setFilterState({ district_ref: result.data });
-    },
-  });
+  const handleChange = ({ name, value }: any) => {
+    if (name === "state" && !value)
+      setFilterState({ ...filterState, state: value, district: undefined });
+    else setFilterState({ ...filterState, [name]: value });
+  };
 
-  const handleChange = ({ name, value }: any) =>
-    setFilterState({ ...filterState, [name]: value });
+  const field = (name: string) => ({
+    name,
+    label: t(name),
+    value: filterState[name],
+    onChange: handleChange,
+  });
 
   return (
     <FiltersSlideover
@@ -107,16 +104,12 @@ export default function UserFilter(props: any) {
         />
       </div>
 
-      <div className="w-full flex-none">
-        <FieldLabel>District</FieldLabel>
-        <DistrictSelect
-          multiple={false}
-          name="district"
-          selected={filterState.district_ref}
-          setSelected={setDistrict}
-          errors={""}
-        />
-      </div>
+      <StateAutocompleteFormField {...field("state")} className="-mb-4" />
+      <DistrictAutocompleteFormField
+        {...field("district")}
+        className="-mb-4"
+        state={filterState.state}
+      />
       <div className="-mb-4">
         <PhoneNumberFormField
           label="Phone Number"