Asset Configure: Migrate useDispatch to use useQuery (inherently …

…fixes camera not reloading on configure saved) (#6327) * Fix camera view not reloading on configuration save * minor code cleanup * minor code cleanup
ohcnetwork · Sep 22, 2023 · fee0648 · fee0648
1 parent c0f0e4b
commit fee0648
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 56 deletions.
diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
@@ -1,60 +1,32 @@
-import { useCallback, useState } from "react";
 import Loading from "../Common/Loading";
-import { AssetData } from "./AssetTypes";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { useDispatch } from "react-redux";
-import { getAsset } from "../../Redux/actions";
-import * as Notification from "../../Utils/Notifications.js";
 import HL7Monitor from "./AssetType/HL7Monitor";
 import ONVIFCamera from "./AssetType/ONVIFCamera";
 import Page from "../Common/components/Page";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 interface AssetConfigureProps {
   assetId: string;
   facilityId: string;
 }
 
-const AssetConfigure = (props: AssetConfigureProps) => {
-  const { assetId, facilityId } = props;
-  const [asset, setAsset] = useState<AssetData>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [assetType, setAssetType] = useState("");
-  const dispatch = useDispatch<any>();
+const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
+  const {
+    data: asset,
+    loading,
+    refetch,
+  } = useQuery(routes.getAsset, { pathParams: { external_id: assetId } });
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const [assetData]: any = await Promise.all([dispatch(getAsset(assetId))]);
-      if (!status.aborted) {
-        setIsLoading(false);
-        if (!assetData.data)
-          Notification.Error({
-            msg: "Something went wrong..!",
-          });
-        else {
-          setAsset(assetData.data);
-          setAssetType(assetData.data.asset_class);
-        }
-      }
-    },
-    [dispatch, assetId]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData]
-  );
-
-  if (isLoading) return <Loading />;
+  if (loading || !asset) {
+    return <Loading />;
+  }
 
-  if (assetType === "HL7MONITOR") {
+  if (asset.asset_class === "HL7MONITOR") {
     return (
       <Page
-        title={`Configure HL7 Monitor: ${asset?.name}`}
+        title={`Configure HL7 Monitor: ${asset.name}`}
         crumbsReplacements={{
-          [facilityId]: { name: asset?.location_object.facility.name },
+          [facilityId]: { name: asset.location_object.facility.name },
           assets: { uri: `/assets?facility=${facilityId}` },
           [assetId]: { name: asset?.name },
         }}
@@ -65,7 +37,7 @@ const AssetConfigure = (props: AssetConfigureProps) => {
     );
   }
 
-  if (assetType === "VENTILATOR") {
+  if (asset.asset_class === "VENTILATOR") {
     return (
       <Page
         title={`Configure Ventilator: ${asset?.name}`}
@@ -91,7 +63,12 @@ const AssetConfigure = (props: AssetConfigureProps) => {
       }}
       backUrl={`/facility/${facilityId}/assets/${assetId}`}
     >
-      <ONVIFCamera asset={asset} assetId={assetId} facilityId={facilityId} />
+      <ONVIFCamera
+        asset={asset}
+        assetId={assetId}
+        facilityId={facilityId}
+        onUpdated={() => refetch()}
+      />
     </Page>
   );
 };

diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -18,14 +18,14 @@ import { Submit } from "../../Common/components/ButtonV2";
 import { SyntheticEvent } from "react";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
 
-interface ONVIFCameraProps {
+interface Props {
   assetId: string;
   facilityId: string;
   asset: any;
+  onUpdated?: () => void;
 }
 
-const ONVIFCamera = (props: ONVIFCameraProps) => {
-  const { assetId, facilityId, asset } = props;
+const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   const [isLoading, setIsLoading] = useState(true);
   const [assetType, setAssetType] = useState("");
   const [middlewareHostname, setMiddlewareHostname] = useState("");
@@ -43,7 +43,6 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
   const [refreshPresetsHash, setRefreshPresetsHash] = useState(
     Number(new Date())
   );
-  const [refreshHash, setRefreshHash] = useState(Number(new Date()));
   const dispatch = useDispatch<any>();
   const authUser = useAuthUser();
   useEffect(() => {
@@ -88,14 +87,10 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
         dispatch(partialUpdateAsset(assetId, data))
       );
       if (res?.status === 200) {
-        Notification.Success({
-          msg: "Asset Configured Successfully",
-        });
-        setRefreshHash(Number(new Date()));
+        Notification.Success({ msg: "Asset Configured Successfully" });
+        onUpdated?.();
       } else {
-        Notification.Error({
-          msg: "Something went wrong..!",
-        });
+        Notification.Error({ msg: "Something went wrong..!" });
       }
       setLoadingSetConfiguration(false);
     } else {
@@ -204,7 +199,6 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
 
       {assetType === "ONVIF" ? (
         <CameraConfigure
-          key={refreshHash}
           asset={asset as AssetData}
           bed={bed}
           setBed={setBed}

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -1,4 +1,5 @@
 import { IConfig } from "../Common/hooks/useConfig";
+import { AssetData } from "../Components/Assets/AssetTypes";
 import { LocationModel } from "../Components/Facility/models";
 import { UserModel } from "../Components/Users/models";
 import { PaginatedResponse } from "../Utils/request/types";
@@ -804,6 +805,7 @@ const routes = {
   getAsset: {
     path: "/api/v1/asset/{external_id}/",
     method: "GET",
+    TRes: Res<AssetData>(),
   },
   deleteAsset: {
     path: "/api/v1/asset/{external_id}/",