Replaced dispatch with useQuery and request in Asset module

cypress/e2e/assets_spec/asset_homepage.cy.ts

@@ -90,7 +90,7 @@ describe("Asset Tab", () => {
     assetPage.selectImportOption();
     assetPage.selectImportFacility("Dummy Facility 1");
     assetPage.importAssetFile();
-    assetPage.selectImportLocation("Camera Loc");
+    assetPage.selectImportLocation("Camera Locations");
     assetPage.clickImportAsset();
   });
 

src/Components/Assets/AssetFilter.tsx

@@ -1,19 +1,14 @@
 import { useState, useEffect, useCallback } from "react";
-import { useAbortableEffect, statusType } from "../../Common/utils";
 import { navigate, useQueryParams } from "raviger";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
-import { useDispatch } from "react-redux";
-import {
-  getFacilityAssetLocation,
-  getPermittedFacility,
-} from "../../Redux/actions";
-import * as Notification from "../../Utils/Notifications.js";
 import { LocationSelect } from "../Common/LocationSelect";
 import { AssetClass, AssetLocationObject } from "./AssetTypes";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
 import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
 import dayjs from "dayjs";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
@@ -35,7 +30,6 @@ const getDate = (value: any) =>
 
 function AssetFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
-  const dispatch: any = useDispatch();
   const [facility, setFacility] = useState<FacilityModel>({ name: "" });
   const [location, setLocation] =
     useState<AssetLocationObject>(initialLocation);
@@ -46,16 +40,39 @@ function AssetFilter(props: any) {
   const [asset_class, setAssetClass] = useState<string>(
     filter.asset_class || ""
   );
-  const [facilityId, setFacilityId] = useState<number | "">(filter.facility);
+  const [facilityId, setFacilityId] = useState<string | "">(filter.facility);
   const [locationId, setLocationId] = useState<string | "">(filter.location);
   const [warrantyExpiry, setWarrantyExpiry] = useState({
     before: filter.warranty_amc_end_of_validity_before || null,
     after: filter.warranty_amc_end_of_validity_after || null,
   });
   const [qParams, _] = useQueryParams();
 
+  useQuery(routes.getPermittedFacility, {
+    pathParams: { id: facilityId },
+    onResponse: ({ res, data }) => {
+      if (res?.status === 200 && data) {
+        setFacility(data);
+      }
+    },
+    prefetch: !!facilityId,
+  });
+
+  useQuery(routes.getFacilityAssetLocation, {
+    pathParams: {
+      facilityId: String(facilityId),
+      locationId: String(locationId),
+    },
+    onResponse: ({ res, data }) => {
+      if (res?.status === 200 && data) {
+        setLocation(data);
+      }
+    },
+    prefetch: !!(facilityId && locationId),
+  });
+
   useEffect(() => {
-    setFacilityId(facility?.id ? facility?.id : "");
+    setFacilityId(facility?.id ? `${facility?.id}` : "");
     setLocationId(
       facility?.id === qParams.facility ? qParams.location ?? "" : ""
     );
@@ -75,48 +92,6 @@ function AssetFilter(props: any) {
     else navigate("/assets");
   }, [qParams]);
 
-  const fetchFacility = useCallback(
-    async (status: statusType) => {
-      if (facilityId) {
-        const facilityData: any = await dispatch(
-          getPermittedFacility(facilityId)
-        );
-        if (!status.aborted) {
-          setFacility(facilityData?.data);
-        }
-      }
-    },
-    [filter.facility]
-  );
-
-  const fetchLocation = useCallback(
-    async (status: statusType) => {
-      if (locationId && facilityId) {
-        const [locationData]: any = await Promise.all([
-          dispatch(
-            getFacilityAssetLocation(String(facilityId), String(locationId))
-          ),
-        ]);
-        if (!status.aborted && locationData !== undefined) {
-          if (!locationData.data)
-            Notification.Error({
-              msg: "Something went wrong..!",
-            });
-          else {
-            setLocation(locationData.data);
-          }
-        }
-      } else {
-        setLocation(initialLocation);
-      }
-    },
-    [filter.location]
-  );
-
-  useAbortableEffect((status: statusType) => {
-    filter.facility && fetchFacility(status);
-    filter.location && fetchLocation(status);
-  }, []);
   const applyFilter = () => {
     const data = {
       facility: facilityId,

src/Components/Assets/AssetImportModal.tsx

@@ -5,8 +5,6 @@ import { FacilityModel } from "../Facility/models";
 import { AssetData } from "./AssetTypes";
 import * as Notification from "../../Utils/Notifications.js";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import { listFacilityAssetLocation } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { Link } from "raviger";
 import readXlsxFile from "read-excel-file";
 import {
@@ -16,6 +14,8 @@ import {
 import { parseCsvFile } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import DialogModal from "../Common/Dialog";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 
 interface Props {
@@ -34,7 +34,6 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
     location: "",
   });
   const [locations, setLocations] = useState<any>([]);
-  const dispatchAction: any = useDispatch();
   const { sample_format_asset_import } = useConfig();
   const [locationsLoading, setLocationsLoading] = useState(false);
 
@@ -43,18 +42,14 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
     setSelectedFile(undefined);
     onClose && onClose();
   };
-
-  useEffect(() => {
-    setLocationsLoading(true);
-    dispatchAction(
-      listFacilityAssetLocation({}, { facility_external_id: facility.id })
-    ).then(({ data }: any) => {
-      setLocationsLoading(false);
-      if (data.count > 0) {
+  useQuery(routes.listFacilityAssetLocation, {
+    pathParams: { facility_external_id: `${facility.id}` },
+    onResponse: ({ res, data }) => {
+      if (res?.status === 200 && data) {
         setLocations(data.results);
       }
-    });
-  }, []);
+    },
+  });
 
   useEffect(() => {
     const readFile = async () => {
@@ -362,6 +357,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
             <Submit
               onClick={handleUpload}
               disabled={isImporting || !selectedFile}
+              data-testid="asset-import-btn"
             >
               {isImporting ? (
                 <i className="fa-solid fa-spinner animate-spin" />