Update lookups to use useRequest hook

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 {
-  const [count, setCount] = useState(0);
+    result: { count, inventories },
-  const [error, setError] = useState(null);
+    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 () => {
+    fetchInventories();
-      const params = parseQueryString(QS_CONFIG, history.location.search);
+  }, [fetchInventories]);
-      try {
-        const { data } = await InventoriesAPI.read(params);
-        setInventories(data.results);
-        setCount(data.count);
-      } catch (err) {
-        setError(err);
-      }
-    })();
-  }, [history.location]);
 
   return (
     <>

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 {
-  const [count, setCount] = useState(0);
+    result: { count, projects },
-  const [error, setError] = useState(null);
+    error,
-  const isMounted = useRef(null);
+    request: fetchProjects,
-
+  } = useRequest(
-  useEffect(() => {
+    useCallback(async () => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    (async () => {
       const params = parseQueryString(QS_CONFIG, history.location.search);
-      try {
+      const { data } = await ProjectsAPI.read(params);
-        const { data } = await ProjectsAPI.read(params);
+      if (data.count === 1) {
-        if (isMounted.current) {
+        onChange(data.results[0]);
-          setProjects(data.results);
-          setCount(data.count);
-          if (data.count === 1) {
-            onChange(data.results[0]);
-          }
-        }
-      } catch (err) {
-        if (isMounted.current) {
-          setError(err);
-        }
       }
-    })();
+      return {
-  }, [onChange, history.location]);
+        count: data.count,
+        projects: data.results,
+      };
+    }, [onChange, history.location.search]),
+    {
+      count: 0,
+      projects: [],
+    }
+  );
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
 
   return (
     <FormGroup