Migrate useDispatch with useQuery/request in src/Components/Common/**

src/Components/Common/AssetSelect.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
-import { listAssets } from "../../Redux/actions";
 import AutoCompleteAsync from "../Form/AutoCompleteAsync";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 
 interface AssetSelectProps {
   name: string;
@@ -16,7 +16,6 @@ interface AssetSelectProps {
   asset_class?: string;
   showAll?: boolean;
   showNOptions?: number;
-  freeText?: boolean;
   selected: any;
   setSelected: (selected: any) => void;
 }
@@ -33,21 +32,13 @@ export const AssetSelect = (props: AssetSelectProps) => {
     is_permanent = null,
     showNOptions = 10,
     className = "",
-    freeText = false,
     errors = "",
     asset_class = "",
   } = props;
 
-  const dispatchAction: any = useDispatch();
-
   const AssetSearch = useCallback(
     async (text: string) => {
-      const params: Partial<AssetSelectProps> & {
-        limit: number;
-        offset: number;
-        search_text: string;
-        asset_class: string;
-      } = {
+      const query = {
         limit: 50,
         offset: 0,
         search_text: text,
@@ -56,17 +47,12 @@ export const AssetSelect = (props: AssetSelectProps) => {
         in_use_by_consultation,
         is_permanent,
         asset_class,
-      };
+      } as const;
 
-      const res = await dispatchAction(listAssets(params));
-      if (freeText)
-        res?.data?.results?.push({
-          id: -1,
-          name: text,
-        });
-      return res?.data?.results;
+      const { data } = await request(routes.listAssets, { query });
+      return data?.results;
     },
-    [dispatchAction]
+    [asset_class, facility, in_use_by_consultation, is_permanent, is_working]
   );
 
   return (

src/Components/Common/BedSelect.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
-import { listFacilityBeds } from "../../Redux/actions";
 import { BedModel } from "../Facility/models";
 import AutoCompleteAsync from "../Form/AutoCompleteAsync";
 import { useTranslation } from "react-i18next";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 
 interface BedSelectProps {
   name: string;
@@ -34,13 +34,11 @@ export const BedSelect = (props: BedSelectProps) => {
     location,
     showNOptions = 20,
   } = props;
-
-  const dispatchAction: any = useDispatch();
   const { t } = useTranslation();
 
   const onBedSearch = useCallback(
     async (text: string) => {
-      const params = {
+      const query = {
         limit: 50,
         offset: 0,
         search_text: text,
@@ -49,17 +47,17 @@ export const BedSelect = (props: BedSelectProps) => {
         location,
       };
 
-      const res = await dispatchAction(listFacilityBeds(params));
-      if (res && res.data) {
-        let beds = res.data.results;
-        if (unoccupiedOnly) {
-          beds = beds.filter((bed: BedModel) => bed?.is_occupied === false);
-        }
+      const { data } = await request(routes.listFacilityBeds, { query });
 
-        return beds;
+      if (unoccupiedOnly) {
+        return data?.results?.filter(
+          (bed: BedModel) => bed?.is_occupied === false
+        );
       }
+
+      return data?.results;
     },
-    [dispatchAction, facility, location, searchAll, unoccupiedOnly]
+    [facility, location, searchAll, unoccupiedOnly]
   );
 
   return (

src/Components/Common/DistrictAutocompleteFormField.tsx

@@ -1,51 +1,27 @@
-import { useDispatch } from "react-redux";
 import { FormFieldBaseProps } from "../Form/FormFields/Utils";
-import { IState } from "./StateAutocompleteFormField";
 import AutocompleteFormField from "../Form/FormFields/Autocomplete";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { useCallback, useState } from "react";
-import { getDistrictByState } from "../../Redux/actions";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { DistrictModel, StateModel } from "../Facility/models";
 
-export type IDistrict = {
-  id: number;
-  name: string;
-};
-
-type Props = FormFieldBaseProps<IDistrict["id"]> & {
+type Props = FormFieldBaseProps<DistrictModel["id"]> & {
   placeholder?: string;
-  state?: IState["id"];
+  state?: StateModel["id"];
 };
 
 export default function DistrictAutocompleteFormField(props: Props) {
-  const dispatch = useDispatch<any>();
-  const [districts, setDistricts] = useState<IDistrict[]>();
-
-  const fetchDistricts = useCallback(
-    async (status: any) => {
-      setDistricts(undefined);
-      if (!props.state) {
-        return;
-      }
-      const res = await dispatch(getDistrictByState({ id: props.state }));
-      if (!status.aborted && res.data) {
-        setDistricts(res.data);
-      }
-    },
-    [dispatch, props.state]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => fetchDistricts(status),
-    [props.state]
-  );
+  const { data, loading } = useQuery(routes.getDistrictByState, {
+    pathParams: { id: props.state?.toString() ?? "" },
+    prefetch: props.state !== undefined,
+  });
 
   return (
     <AutocompleteFormField
       {...props}
-      options={districts ?? []}
+      options={data ?? []}
       optionLabel={(option) => option.name}
       optionValue={(option) => option.id}
-      isLoading={!!(props.state && districts === undefined)}
+      isLoading={loading}
       disabled={!props.state}
     />
   );

src/Components/Common/FacilitySelect.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
-import { getAllFacilities, getPermittedFacilities } from "../../Redux/actions";
 import AutoCompleteAsync from "../Form/AutoCompleteAsync";
 import { FacilityModel } from "../Facility/models";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 
 interface FacilitySelectProps {
   name: string;
@@ -37,11 +37,9 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     errors = "",
   } = props;
 
-  const dispatchAction: any = useDispatch();
-
   const facilitySearch = useCallback(
     async (text: string) => {
-      const params = {
+      const query = {
         limit: 50,
         offset: 0,
         search_text: text,
@@ -51,17 +49,19 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
         district,
       };
 
-      const res = await dispatchAction(
-        showAll ? getAllFacilities(params) : getPermittedFacilities(params)
+      const { data } = await request(
+        showAll ? routes.getAllFacilities : routes.getPermittedFacilities,
+        { query }
       );
+
       if (freeText)
-        res?.data?.results?.push({
+        data?.results?.push({
           id: -1,
           name: text,
         });
-      return res?.data?.results;
+      return data?.results;
     },
-    [dispatchAction, searchAll, showAll, facilityType, district]
+    [searchAll, showAll, facilityType, district, exclude_user, freeText]
   );
 
   return (

src/Components/Common/LocalBodyAutocompleteFormField.tsx

@@ -1,53 +1,27 @@
-import { useDispatch } from "react-redux";
 import { FormFieldBaseProps } from "../Form/FormFields/Utils";
 import AutocompleteFormField from "../Form/FormFields/Autocomplete";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { useCallback, useState } from "react";
-import { getLocalbodyByDistrict } from "../../Redux/actions";
-import { IDistrict } from "./DistrictAutocompleteFormField";
+import { DistrictModel, LocalBodyModel } from "../Facility/models";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
-export type ILocalBody = {
-  id: number;
-  name: string;
-};
-
-type Props = FormFieldBaseProps<ILocalBody["id"]> & {
+type Props = FormFieldBaseProps<LocalBodyModel["id"]> & {
   placeholder?: string;
-  district?: IDistrict["id"];
+  district?: DistrictModel["id"];
 };
 
 export default function LocalBodyAutocompleteFormField(props: Props) {
-  const dispatch = useDispatch<any>();
-  const [localBodies, setLocalBodies] = useState<ILocalBody[]>();
-
-  const fetchLocalBodies = useCallback(
-    async (status: any) => {
-      setLocalBodies(undefined);
-      if (!props.district) {
-        return;
-      }
-      const res = await dispatch(
-        getLocalbodyByDistrict({ id: props.district })
-      );
-      if (!status.aborted && res && res.data) {
-        setLocalBodies(res.data);
-      }
-    },
-    [dispatch, props.district]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => fetchLocalBodies(status),
-    [props.district]
-  );
+  const { data, loading } = useQuery(routes.getLocalbodyByDistrict, {
+    pathParams: { id: props.district?.toString() ?? "" },
+    prefetch: props.district !== undefined,
+  });
 
   return (
     <AutocompleteFormField
       {...props}
-      options={localBodies ?? []}
+      options={data ?? []}
       optionLabel={(option) => option.name}
       optionValue={(option) => option.id}
-      isLoading={!!(props.district && localBodies === undefined)}
+      isLoading={loading}
       disabled={!props.district}
     />
   );