diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js index 79acb9fb2a2a89d681bd7bd976acfe2ff153af5e..0b0dbccb1102517a99763287756ef9bf687b6b36 100644 --- a/src/api/SwaggerApi.js +++ b/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 }; } diff --git a/src/components/IOC/CreateIOC/CreateIOC.js b/src/components/IOC/CreateIOC/CreateIOC.js index ffa14ac95a4edd446fe251586546f558372c6b67..8ff9e72dac92671558093189d8559d609729e1ed 100644 --- a/src/components/IOC/CreateIOC/CreateIOC.js +++ b/src/components/IOC/CreateIOC/CreateIOC.js @@ -1,6 +1,6 @@ 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} diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js index 5f6c516836404cab16e5cd3131d9385eda737b7b..f8da494b91ef30f39c4a28f590c55ae92c839b37 100644 --- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js +++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js @@ -1,5 +1,9 @@ -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}