CE-2065: replace useIoc hook with common

src/__tests__/backend-mock-setup.test.js

-import React from "react";
-import { act, render, screen } from "@testing-library/react";
-import { SnackbarProvider } from "notistack";
-import { APIProvider, useIOCList } from "../api/SwaggerApi";
-
-function APIHarness({ children }) {
-  // We need a snackbar provider at the moment
-  return (
-    <SnackbarProvider>
-      <APIProvider>{children}</APIProvider>
-    </SnackbarProvider>
-  );
-}
-
-// This component will just try to use a hook from our API
-// We want to check that we can get a response from the mock backend
-function DisplayIOCs() {
-  const [iocs] = useIOCList();
-  return JSON.stringify(iocs);
-}
-
-test("that using OpenAPIBackend and MSW works with Swagger-Client and our API hooks", async () => {
-  // render and wait for the state changes
-  await act(async () => {
-    render(
-      <APIHarness>
-        <DisplayIOCs />
-      </APIHarness>
-    );
-  });
-
-  // check that we got the example IOCList from the OpenAPI spec back
-  expect(await screen.findByText(/activeDeployment/i)).toBeInTheDocument();
-});

src/api/SwaggerApi.js

@@ -240,13 +240,6 @@ export function useIOCSearch() {
   return useAsync({ fcn: method, call: false, init: emptyIocListResponse });
 }
 
-export function useIOC(id, onError) {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(api.apis.IOCs.getIoc, unpackIOC);
-  const boundMethod = useCallback(method.bind(null, { ioc_id: id }), [id]);
-  return useAsync({ fcn: boundMethod, onError: onError });
-}
-
 export function useCreateIOC(onError) {
   const api = useContext(apiContext);
   const method = useCallAndUnpack(

src/components/IOC/AlertMessages/AlertMessages.js

@@ -35,7 +35,7 @@ export default function AlertMessages({ alerts }) {
       spacing={1}
       direction="column"
     >
-      {alerts.map((alert) => (
+      {alerts?.map((alert) => (
         <Grid
           item
           key={alert?.message || alert}

src/components/IOC/IOCLiveStatus/IOCLiveStatus.spec.js

-import React from "react";
-import { useIOC } from "../../../api/SwaggerApi";
+import React, { useContext, useMemo } from "react";
 import { AppHarness } from "../../../mocks/AppHarness";
 import { IOCLiveStatus } from ".";
+import { apiContext } from "../../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common/dist/hooks/API";
 
 function mountIntoHarness(children) {
   cy.mount(<AppHarness>{children}</AppHarness>);
 }
 
 function IOCLiveStatusContainer() {
-  const [ioc] = useIOC(2);
+  const client = useContext(apiContext);
+
+  const params = useMemo(
+    () => ({
+      ioc_id: 2
+    }),
+    []
+  );
+
+  const { value: ioc } = useAPIMethod({
+    fcn: client.apis.IOCs.getIoc,
+    params
+  });
 
   return ioc ? <IOCLiveStatus ioc={ioc} /> : null;
 }

src/components/IOC/IOCTable/IOCDescription.js

-import React from "react";
-import { useIOC } from "../../../api/SwaggerApi";
+import React, { useContext, useMemo } from "react";
+import { apiContext } from "../../../api/SwaggerApi";
 import { Skeleton, Tooltip, Typography } from "@mui/material";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
 function createIocDescription(description) {
   return (
@@ -29,10 +30,27 @@ function createIocDescription(description) {
 }
 
 export const IOCDescription = ({ id }) => {
-  const [ioc, , , loading] = useIOC(id);
+  const client = useContext(apiContext);
 
-  if (loading) {
+  const params = useMemo(
+    () => ({
+      ioc_id: id
+    }),
+    [id]
+  );
+
+  const {
+    value: ioc,
+    loading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.getIoc,
+    params
+  });
+
+  if (loading || !dataReady) {
     return <Skeleton width="100%" />;
   }
+
   return createIocDescription(ioc?.description);
 };

src/stories/views/IOC/IocDetailsView.stories.js

+import React from "react";
+import { AppHarness } from "../../../mocks/AppHarness";
+import { IOCDetailsContainer } from "../../../views/IOC/IOCDetailsContainer";
+
+export default {
+  title: "Views/IOC/IOCDetailsView"
+};
+
+const Template = () => (
+  <AppHarness>
+    <IOCDetailsContainer id={346} />
+  </AppHarness>
+);
+
+export const Default = () => <Template />;

src/views/IOC/IOCDetailsContainer.js

-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState, useMemo } from "react";
 import { IOCDetailsView } from "./IOCDetailsView";
 import { LinearProgress } from "@mui/material";
 import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
 import { onFetchEntityError } from "../../components/common/Helper";
-import { useIOC } from "../../api/SwaggerApi";
 import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
 import useUrlState from "@ahooksjs/use-url-state";
+import { apiContext } from "../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
 export function IOCDetailsContainer({ id }) {
   const { user } = useContext(userContext);
   const [urlState] = useUrlState();
   const [error, setError] = useState(null);
 
-  const [ioc, getIOC /* reset*/, , loading] = useIOC(id, (m, s) => {
-    // handle error code 404, and define custom message on the UI because BE sends back generic error message
-    onFetchEntityError(m, s, setError);
+  const client = useContext(apiContext);
+
+  const params = useMemo(
+    () => ({
+      ioc_id: id
+    }),
+    [id]
+  );
+
+  const {
+    value: ioc,
+    wrapper: getIOC,
+    loading,
+    error: fetchError
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.getIoc,
+    params
   });
 
+  useEffect(() => {
+    if (fetchError) {
+      onFetchEntityError(fetchError?.message, fetchError?.status, setError);
+    }
+  }, [fetchError]);
+
   useEffect(() => {
     // user logs in => clear error message, and try to re-request userInfo
     if (user) {