CE-2066: replace useCreateIoc with common api

src/api/SwaggerApi.js

@@ -218,15 +218,6 @@ export function unpackIOCList(iocs) {
   return unpackedIOCList;
 }
 
-export function useCreateIOC(onError) {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    (body) => api.apis.IOCs.createIoc({}, { requestBody: body }),
-    unpackIOC
-  );
-  return useAsync({ fcn: method, call: false, onError: onError });
-}
-
 export function unpackDeployment(deployment) {
   const d = { ...deployment };
   return d;

src/components/IOC/CreateIOC/CreateIOC.js

-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import {
-  useAllowedGitProjects,
-  useCreateIOC,
-  useNamingNames
-} from "../../../api/SwaggerApi";
+import { useAllowedGitProjects, useNamingNames } from "../../../api/SwaggerApi";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
 import {
@@ -17,6 +13,20 @@ import {
   TextField,
   Typography
 } from "@mui/material";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { apiContext } from "../../../api/DeployApi";
+
+const renderErrorMessage = (error) => {
+  const { response, status: requestStatus, message: requestMessage } = error;
+  const {
+    body: { description },
+    status: httpStatus
+  } = response;
+
+  return `${httpStatus ?? requestStatus ?? "unknown"}: ${
+    description ?? requestMessage ?? "An unknown error has occurred"
+  }`;
+};
 
 export function CreateIOC() {
   const navigate = useNavigate();
@@ -30,11 +40,17 @@ export function CreateIOC() {
     ,
     loadingAllowedGitProjects
   ] = useAllowedGitProjects([]);
-  const [error, setError] = useState();
-  const onError = (error) => {
-    setError(error);
-  };
-  const [ioc, createIoc, , loading] = useCreateIOC(onError);
+
+  const client = useContext(apiContext);
+  const {
+    value: ioc,
+    wrapper: createIoc,
+    loading,
+    error
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.createIoc,
+    call: false
+  });
 
   // Return home on cancel
   const handleCancel = () => {
@@ -53,10 +69,15 @@ export function CreateIOC() {
   // create the ioc on form submit
   const onSubmit = (event) => {
     event.preventDefault();
-    createIoc({
-      gitProjectId: gitId,
-      namingUuid: name ? name.uuid : undefined
-    });
+    createIoc(
+      {},
+      {
+        requestBody: {
+          gitProjectId: gitId,
+          namingUuid: name ? name.uuid : undefined
+        }
+      }
+    );
   };
 
   // navigate home once ioc created
@@ -113,7 +134,6 @@ export function CreateIOC() {
           )}
           onChange={(event, value, reason) => {
             setName(value);
-            setError(null);
           }}
           onInputChange={(event, value, reason) => {
             event && onNameKeyUp(event.nativeEvent);
@@ -136,7 +156,6 @@ export function CreateIOC() {
           }}
           onChange={(event, value, reason) => {
             setGitId(value?.id);
-            setError(null);
           }}
           renderInput={(params) => (
             <TextField
@@ -164,8 +183,11 @@ export function CreateIOC() {
           )}
           autoSelect
         />
-
-        {error ? <Alert severity="error">{error}</Alert> : <></>}
+        {error ? (
+          <Alert severity="error">{renderErrorMessage(error)}</Alert>
+        ) : (
+          <></>
+        )}
         <Stack
           direction="row"
           justifyContent="flex-end"