diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx index 01e25af6e7..52bb7bba21 100644 --- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { func, bool } from 'prop-types'; import { withRouter } from 'react-router-dom'; import { withI18n } from '@lingui/react'; @@ -7,6 +7,7 @@ import { InventoriesAPI } from '../../api'; import { Inventory } from '../../types'; import Lookup from './Lookup'; import OptionsList from '../OptionsList'; +import useRequest from '../../util/useRequest'; import { getQSConfig, parseQueryString } from '../../util/qs'; import LookupErrorMessage from './shared/LookupErrorMessage'; @@ -17,22 +18,28 @@ const QS_CONFIG = getQSConfig('inventory', { }); function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) { - const [inventories, setInventories] = useState([]); - const [count, setCount] = useState(0); - const [error, setError] = useState(null); + const { + result: { count, inventories }, + error, + request: fetchInventories, + } = useRequest( + useCallback(async () => { + const params = parseQueryString(QS_CONFIG, history.location.search); + const { data } = await InventoriesAPI.read(params); + return { + count: data.count, + inventories: data.results, + }; + }, [history.location.search]), + { + count: 0, + inventories: [], + } + ); useEffect(() => { - (async () => { - const params = parseQueryString(QS_CONFIG, history.location.search); - try { - const { data } = await InventoriesAPI.read(params); - setInventories(data.results); - setCount(data.count); - } catch (err) { - setError(err); - } - })(); - }, [history.location]); + fetchInventories(); + }, [fetchInventories]); return ( <> diff --git a/awx/ui_next/src/components/Lookup/ProjectLookup.jsx b/awx/ui_next/src/components/Lookup/ProjectLookup.jsx index 4f97117da2..b0dfb8e969 100644 --- a/awx/ui_next/src/components/Lookup/ProjectLookup.jsx +++ b/awx/ui_next/src/components/Lookup/ProjectLookup.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { node, string, func, bool } from 'prop-types'; import { withRouter } from 'react-router-dom'; import { withI18n } from '@lingui/react'; @@ -8,6 +8,7 @@ import { ProjectsAPI } from '../../api'; import { Project } from '../../types'; import { FieldTooltip } from '../FormField'; import OptionsList from '../OptionsList'; +import useRequest from '../../util/useRequest'; import { getQSConfig, parseQueryString } from '../../util/qs'; import Lookup from './Lookup'; import LookupErrorMessage from './shared/LookupErrorMessage'; @@ -29,37 +30,31 @@ function ProjectLookup({ onBlur, history, }) { - const [projects, setProjects] = useState([]); - const [count, setCount] = useState(0); - const [error, setError] = useState(null); - const isMounted = useRef(null); - - useEffect(() => { - isMounted.current = true; - return () => { - isMounted.current = false; - }; - }, []); - - useEffect(() => { - (async () => { + const { + result: { count, projects }, + error, + request: fetchProjects, + } = useRequest( + useCallback(async () => { const params = parseQueryString(QS_CONFIG, history.location.search); - try { - const { data } = await ProjectsAPI.read(params); - if (isMounted.current) { - setProjects(data.results); - setCount(data.count); - if (data.count === 1) { - onChange(data.results[0]); - } - } - } catch (err) { - if (isMounted.current) { - setError(err); - } + const { data } = await ProjectsAPI.read(params); + if (data.count === 1) { + onChange(data.results[0]); } - })(); - }, [onChange, history.location]); + return { + count: data.count, + projects: data.results, + }; + }, [onChange, history.location.search]), + { + count: 0, + projects: [], + } + ); + + useEffect(() => { + fetchProjects(); + }, [fetchProjects]); return (