Replaced dispatch with useQuery and request in Asset module

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";
 
 const initialLocation = {
   id: "",
@@ -27,7 +22,6 @@ const initialLocation = {
 
 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);
@@ -38,12 +32,32 @@ 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 [qParams, _] = useQueryParams();
 
+  const { data: facilityData } = useQuery(routes.getPermittedFacility, {
+    pathParams: { id: facilityId },
+  });
+
+  const { data: locationData } = useQuery(routes.getFacilityAssetLocation, {
+    pathParams: {
+      facilityId: String(facilityId),
+      locationId: String(locationId),
+    },
+  });
+
   useEffect(() => {
-    setFacilityId(facility?.id ? facility?.id : "");
+    if (facilityData) {
+      setFacility(facilityData);
+    }
+    if (locationData) {
+      setLocation(locationData);
+    }
+  }, [facilityData, locationData]);
+
+  useEffect(() => {
+    setFacilityId(facility?.id ? `${facility?.id}` : "");
     setLocationId(
       facility?.id === qParams.facility ? qParams.location ?? "" : ""
     );
@@ -63,48 +77,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 SelectMenuV2 from "../Form/SelectMenuV2";
 import readXlsxFile from "read-excel-file";
@@ -17,6 +15,9 @@ 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 Loading from "../Common/Loading";
 
 interface Props {
   open: boolean;
@@ -31,24 +32,25 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
     useState<(AssetData & { notes?: string; last_serviced_on?: string })[]>();
   const [location, setLocation] = useState("");
   const [locations, setLocations] = useState<any>([]);
-  const dispatchAction: any = useDispatch();
   const { sample_format_asset_import } = useConfig();
 
   const closeModal = () => {
     setPreview(undefined);
     setSelectedFile(undefined);
     onClose && onClose();
   };
+  const { data: facilityAssetLocations, loading } = useQuery(
+    routes.listFacilityAssetLocation,
+    {
+      pathParams: { facility_external_id: `${facility.id}` },
+    }
+  );
 
   useEffect(() => {
-    dispatchAction(
-      listFacilityAssetLocation({}, { facility_external_id: facility.id })
-    ).then(({ data }: any) => {
-      if (data.count > 0) {
-        setLocations(data.results);
-      }
-    });
-  }, []);
+    if (facilityAssetLocations?.count) {
+      setLocations(facilityAssetLocations?.results);
+    }
+  }, [facilityAssetLocations]);
 
   useEffect(() => {
     const readFile = async () => {
@@ -180,6 +182,8 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
     setSelectedFile(dropedFile);
   };
 
+  if (loading) return <Loading />;
+
   return (
     <DialogModal
       title="Import Assets"

src/Components/Assets/AssetManage.tsx

@@ -1,19 +1,11 @@
-import { useState, useCallback, useEffect, ReactElement, lazy } from "react";
+import { useState, useEffect, ReactElement, lazy } from "react";
 import {
   AssetClass,
   assetClassProps,
   AssetData,
   AssetService,
   AssetTransaction,
 } from "./AssetTypes";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { useDispatch } from "react-redux";
-import {
-  deleteAsset,
-  getAsset,
-  listAssetService,
-  listAssetTransaction,
-} from "../../Redux/actions";
 import Pagination from "../Common/Pagination";
 import { navigate } from "raviger";
 import QRCode from "qrcode.react";
@@ -35,6 +27,9 @@ import dayjs from "dayjs";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
 import { AssetServiceEditModal } from "./AssetServiceEditModal";
 import Page from "../Common/components/Page";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
 
 interface AssetManageProps {
   assetId: string;
@@ -63,69 +58,66 @@ const AssetManage = (props: AssetManageProps) => {
   const [servicesDetails, setServiceDetails] = useState<
     ReactElement | ReactElement[]
   >();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const dispatch = useDispatch<any>();
   const limit = 14;
   const authUser = useAuthUser();
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [serviceEditData, setServiceEditData] = useState<
     AssetService & { open: boolean; viewOnly?: boolean }
   >();
+  const [transactionFilter, setTransactionFilter] = useState<any>({});
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const assetData = await dispatch(getAsset(assetId));
-      if (!status.aborted) {
-        setIsLoading(false);
-        if (assetData?.data) {
-          setAsset(assetData.data);
-
-          const transactionFilter = assetData.qr_code_id
-            ? { qr_code_id: assetData.qr_code_id }
-            : { external_id: assetId };
-
-          const [transactionsData, servicesData] = await Promise.all([
-            dispatch(
-              listAssetTransaction({
-                ...transactionFilter,
-                limit,
-                offset,
-              })
-            ),
-            dispatch(listAssetService({}, assetId)),
-          ]);
-
-          if (transactionsData?.data) {
-            setTransactions(transactionsData.data.results);
-            setTotalCount(transactionsData.data.count);
-          } else {
-            Notification.Error({
-              msg: "Error fetching transactions",
-            });
-          }
-          if (servicesData?.data) {
-            setServices(servicesData.data.results);
-          } else {
-            Notification.Error({
-              msg: "Error fetching service logs",
-            });
-          }
-        } else {
-          navigate("/not-found");
-        }
-      }
+  const { data: assetData, loading } = useQuery(routes.getAsset, {
+    pathParams: {
+      external_id: assetId,
     },
-    [dispatch, assetId, offset]
+  });
+
+  const { data: transactionsData, refetch } = useQuery(
+    routes.listAssetTransaction,
+    {
+      prefetch: false,
+      ...transactionFilter,
+      query: {
+        limit,
+        offset,
+      },
+    }
   );
 
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData]
+  const { data: servicesData, refetch: serviceRefetch } = useQuery(
+    routes.listAssetService,
+    {
+      pathParams: {
+        asset_external_id: assetId,
+      },
+    }
   );
 
+  useEffect(() => {
+    if (assetData) setAsset(assetData);
+  }, [assetData]);
+
+  useEffect(() => {
+    if (transactionsData) {
+      setTransactions(transactionsData.results);
+      setTotalCount(transactionsData.count);
+    }
+  }, [transactionsData]);
+
+  useEffect(() => {
+    if (servicesData) setServices(servicesData.results);
+  }, [servicesData]);
+
+  useEffect(() => {
+    if (assetData) {
+      const transactionFilter = assetData.qr_code_id
+        ? { qr_code_id: assetData.qr_code_id }
+        : { external_id: assetId };
+      setTransactionFilter(transactionFilter);
+      refetch();
+    }
+  }, [assetData, assetId, refetch]);
+
   const handlePagination = (page: number, limit: number) => {
     const offset = (page - 1) * limit;
     setCurrentPage(page);
@@ -282,7 +274,7 @@ const AssetManage = (props: AssetManageProps) => {
     populateServiceTableRows(services);
   }, [services]);
 
-  if (isLoading) return <Loading />;
+  if (loading) return <Loading />;
   if (isPrintMode) return <PrintPreview />;
 
   const assetClassProp =
@@ -323,8 +315,12 @@ const AssetManage = (props: AssetManageProps) => {
 
   const handleDelete = async () => {
     if (asset) {
-      const response = await dispatch(deleteAsset(asset.id));
-      if (response && response.status === 204) {
+      const { res } = await request(routes.deleteAsset, {
+        pathParams: {
+          external_id: asset.id,
+        },
+      });
+      if (res && res.status === 204) {
         Notification.Success({
           msg: "Asset deleted successfully",
         });
@@ -591,7 +587,7 @@ const AssetManage = (props: AssetManageProps) => {
           handleClose={() =>
             setServiceEditData({ ...serviceEditData, open: false })
           }
-          handleUpdate={() => fetchData({ aborted: false })}
+          handleUpdate={() => serviceRefetch()}
           show={serviceEditData.open}
           viewOnly={serviceEditData.viewOnly}
         />