Merge branch 'CE-2094-convert-useNamingNames' into 'develop'

CE-2094: Convert useNamingNames

See merge request !375

src/api/SwaggerApi.js

@@ -301,24 +301,6 @@ export function useRenewToken() {
   return [renewToken, loading];
 }
 
-export function unpackNaming(naming) {
-  return { ...naming };
-}
-
-export function unpackNamingList(naming) {
-  return naming.map((h) => unpackNaming(h));
-}
-
-export function useNamingNames() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    (iocName) => api.apis.Naming.fetchIOCByName({ ioc_name: iocName }),
-    unpackNamingList
-  );
-
-  return useAsync({ fcn: method, call: false, init: [] });
-}
-
 export function unpackGitReference(reference) {
   return { ...reference };
 }

src/components/IOC/CreateIOC/CreateIOC.js

 import React, { useEffect, useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAllowedGitProjects, useNamingNames } from "../../../api/SwaggerApi";
+import { useAllowedGitProjects } from "../../../api/SwaggerApi";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
 import {
@@ -30,7 +30,6 @@ const renderErrorMessage = (error) => {
 
 export function CreateIOC() {
   const navigate = useNavigate();
-  const [names, getNames, , loadingNames] = useNamingNames();
   const [name, setName] = useState();
   const [gitId, setGitId] = useState(null);
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
@@ -52,13 +51,25 @@ export function CreateIOC() {
     call: false
   });
 
+  const {
+    value: names,
+    wrapper: getNames,
+    loading: loadingNames,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Naming.fetchIOCByName,
+    call: false
+  });
+
   // Return home on cancel
   const handleCancel = () => {
     navigate("/");
   };
 
   // fetch new names when name query changes
-  useEffect(() => getNames(nameQuery), [nameQuery, getNames]);
+  useEffect(() => {
+    getNames(nameQuery);
+  }, [nameQuery, getNames]);
 
   // get the allowed git projects on initial load
   // TODO unnecessary! Update the hook...
@@ -102,8 +113,8 @@ export function CreateIOC() {
         <Autocomplete
           autoHighlight
           id="nameAutocomplete"
-          options={names}
-          loading={loadingNames}
+          options={names ?? []}
+          loading={loadingNames || !dataReady}
           clearOnBlur={false}
           getOptionLabel={(option) => {
             return option?.name;
@@ -118,7 +129,7 @@ export function CreateIOC() {
                 ...params.InputProps,
                 endAdornment: (
                   <React.Fragment>
-                    {loadingNames ? (
+                    {loadingNames || !dataReady ? (
                       <CircularProgress
                         color="inherit"
                         size={20}

src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js

-import React, { useState, useEffect, useCallback } from "react";
-import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common";
+import React, { useState, useEffect, useCallback, useContext } from "react";
+import {
+  SimpleAccordion,
+  ConfirmationDialog,
+  useAPIMethod
+} from "@ess-ics/ce-ui-common";
 import {
   Button,
   CircularProgress,
@@ -9,13 +13,10 @@ import {
   Autocomplete,
   Alert
 } from "@mui/material";
-import {
-  useAllowedGitProjects,
-  useNamingNames,
-  useUpdateIoc
-} from "../../../api/SwaggerApi";
+import { useAllowedGitProjects, useUpdateIoc } from "../../../api/SwaggerApi";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import AccessControl from "../../auth/AccessControl";
+import { apiContext } from "../../../api/DeployApi";
 
 export default function IOCDetailAdmin({
   ioc,
@@ -31,7 +32,6 @@ export default function IOCDetailAdmin({
     loadingAllowedGitProjects
   ] = useAllowedGitProjects([]);
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
-  const [names, getNames, , loadingNames] = useNamingNames();
   const [name, setName] = useState({
     uuid: ioc.namingUuid,
     description: ioc.description,
@@ -46,6 +46,17 @@ export default function IOCDetailAdmin({
     setError(message);
   }
 
+  const client = useContext(apiContext);
+  const {
+    value: names,
+    wrapper: getNames,
+    loading: loadingNames,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Naming.fetchIOCByName,
+    call: false
+  });
+
   const requiredDataMissing = useCallback(() => !gitId || !name, [gitId, name]);
 
   const noModification = useCallback(
@@ -63,7 +74,9 @@ export default function IOCDetailAdmin({
     getAllowedGitProjects();
   }, [getAllowedGitProjects]);
 
-  useEffect(() => getNames(nameQuery), [nameQuery, getNames]);
+  useEffect(() => {
+    getNames(nameQuery);
+  }, [nameQuery, getNames]);
 
   // when user clicks Submit button a dialog should open
   const onSubmit = (event) => {
@@ -99,13 +112,13 @@ export default function IOCDetailAdmin({
 
   function nameAutocomplete(disabled) {
     const isDisabled = disabled || iocIsDeployed;
-    const loading = loadingNames && !isDisabled;
+    const loading = (loadingNames || !dataReady) && !isDisabled;
     return (
       <Tooltip title={nameDisabledTitle}>
         <Autocomplete
           autoHighlight
           id="namingName"
-          options={names}
+          options={names ?? []}
           loading={loading}
           clearOnBlur={false}
           defaultValue={name}