From 48b29352d72aca9bbfce1eb9168c4cd7da938cc7 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 29 Jul 2020 10:08:45 -0400
Subject: [PATCH] Converts InventorySourcesList to use useRequest in
 preparation for advanced search

---
 .../NodeTypeStep/InventorySourcesList.jsx     | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
index bc4d13db48..c8aec98db2 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { func, shape } from 'prop-types';
 import { InventorySourcesAPI } from '../../../../../../api';
 import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
+import useRequest from '../../../../../../util/useRequest';
 import PaginatedDataList from '../../../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../../../components/DataListToolbar';
 import CheckboxListItem from '../../../../../../components/CheckboxListItem';
@@ -16,29 +17,31 @@ const QS_CONFIG = getQSConfig('inventory_sources', {
 });
 
 function InventorySourcesList({ i18n, nodeResource, onUpdateNodeResource }) {
-  const [count, setCount] = useState(0);
-  const [error, setError] = useState(null);
-  const [inventorySources, setInventorySources] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
   const location = useLocation();
 
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-      setInventorySources([]);
-      setCount(0);
+  const {
+    result: { inventorySources, count },
+    error,
+    isLoading,
+    request: fetchInventorySources,
+  } = useRequest(
+    useCallback(async () => {
       const params = parseQueryString(QS_CONFIG, location.search);
-      try {
-        const { data } = await InventorySourcesAPI.read(params);
-        setInventorySources(data.results);
-        setCount(data.count);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setIsLoading(false);
-      }
-    })();
-  }, [location]);
+      const results = await InventorySourcesAPI.read(params);
+      return {
+        inventorySources: results.data.results,
+        count: results.data.count,
+      };
+    }, [location]),
+    {
+      inventorySources: [],
+      count: 0,
+    }
+  );
+
+  useEffect(() => {
+    fetchInventorySources();
+  }, [fetchInventorySources]);
 
   return (
     <PaginatedDataList