Merge branch 'ce-2093-convert-useiocstatus-hook-to-common' into 'develop'

CE-2093: Convert IOCStatus hook to common

See merge request !342

src/api/SwaggerApi.js

@@ -689,20 +689,6 @@ export function useLokiProcServLog(onError) {
   return useAsync({ fcn: method, call: false, onError: onError });
 }
 
-export function unpackIocStatus(status) {
-  return { ...status };
-}
-
-export function useIocStatus(id) {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    api.apis.Monitoring.fetchIocStatus,
-    unpackIocStatus
-  );
-  const boundMethod = useCallback(method.bind(null, { ioc_id: id }), [id]);
-  return useAsync({ fcn: boundMethod });
-}
-
 export function unpackNaming(naming) {
   return { ...naming };
 }

src/components/IOC/IOCTable/IOCStatus.js

-import React from "react";
-import { useIocStatus } from "../../../api/SwaggerApi";
+import React, { useContext, useMemo } from "react";
 import { Grid, Skeleton } from "@mui/material";
 import { IOCStatusIcon } from "../IOCIcons";
+import { apiContext } from "../../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
+
+function createRequest(id) {
+  return {
+    ioc_id: id
+  };
+}
 
 export const IOCStatus = ({ id, activeDeployment }) => {
-  const [status, , , loading] = useIocStatus(id);
+  const client = useContext(apiContext);
+
+  const params = useMemo(() => createRequest(id), [id]);
+
+  const {
+    value: ioc,
+    loading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Monitoring.fetchIocStatus,
+    params,
+    call: true
+  });
 
   return (
     <Grid
@@ -13,14 +32,14 @@ export const IOCStatus = ({ id, activeDeployment }) => {
       justifyContent="center"
       alignItems="center"
     >
-      {loading ? (
+      {loading || !dataReady ? (
         <Skeleton
           variant="circular"
           height={20}
           width={20}
         />
       ) : (
-        <IOCStatusIcon ioc={{ id, activeDeployment, ...status }} />
+        <IOCStatusIcon ioc={{ id, activeDeployment, ...ioc }} />
       )}
     </Grid>
   );