From 62987b7d20ed5f19a860dba380195baf65070ef2 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicus@gmail.com>
Date: Thu, 19 Aug 2021 23:00:47 -0600
Subject: [PATCH] Switch useEntityKinds to useAsync

Signed-off-by: Tim Hansen <timbonicus@gmail.com>
---
 .../src/hooks/useEntityKinds.test.tsx         |  5 ++--
 .../catalog-react/src/hooks/useEntityKinds.ts | 24 +++++++++----------
 .../CatalogPage/CatalogKindHeader.tsx         |  4 ++--
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/plugins/catalog-react/src/hooks/useEntityKinds.test.tsx b/plugins/catalog-react/src/hooks/useEntityKinds.test.tsx
index a1e1463174..96281f4a5a 100644
--- a/plugins/catalog-react/src/hooks/useEntityKinds.test.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityKinds.test.tsx
@@ -74,7 +74,8 @@ describe('useEntityKinds', () => {
       },
     );
     await waitForValueToChange(() => result.current);
-    expect(result.current.length).toBe(3);
+    expect(result.current.kinds).toBeDefined();
+    expect(result.current.kinds!.length).toBe(3);
   });
 
   it('sorts entity kinds', async () => {
@@ -85,6 +86,6 @@ describe('useEntityKinds', () => {
       },
     );
     await waitForValueToChange(() => result.current);
-    expect(result.current).toEqual(['Component', 'System', 'Template']);
+    expect(result.current.kinds).toEqual(['Component', 'System', 'Template']);
   });
 });
diff --git a/plugins/catalog-react/src/hooks/useEntityKinds.ts b/plugins/catalog-react/src/hooks/useEntityKinds.ts
index 21bdad2900..082e4a207d 100644
--- a/plugins/catalog-react/src/hooks/useEntityKinds.ts
+++ b/plugins/catalog-react/src/hooks/useEntityKinds.ts
@@ -14,24 +14,24 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useAsync } from 'react-use';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '../api';
 
 // Retrieve a list of unique entity kinds present in the catalog
 export function useEntityKinds() {
-  const [kinds, setKinds] = useState(['Component']);
   const catalogApi = useApi(catalogApiRef);
 
-  useEffect(() => {
-    async function loadKinds() {
-      const entities = await catalogApi
-        .getEntities({ fields: ['kind'] })
-        .then(response => response.items);
-      setKinds([...new Set(entities.map(e => e.kind))].sort());
-    }
-    loadKinds();
-  }, [catalogApi]);
+  const {
+    error,
+    loading,
+    value: kinds,
+  } = useAsync(async () => {
+    const entities = await catalogApi
+      .getEntities({ fields: ['kind'] })
+      .then(response => response.items);
 
-  return kinds;
+    return [...new Set(entities.map(e => e.kind))].sort();
+  });
+  return { error, loading, kinds };
 }
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogPage/CatalogKindHeader.tsx
index 16051a0951..89b132de53 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogKindHeader.tsx
@@ -46,7 +46,7 @@ export const CatalogKindHeader = ({
   initialFilter = 'Component',
 }: CatalogKindHeaderProps) => {
   const classes = useStyles();
-  const allKinds = useEntityKinds();
+  const { kinds: allKinds } = useEntityKinds();
   const { updateFilters, queryParameters } = useEntityListProvider();
 
   const [selectedKind, setSelectedKind] = useState(
@@ -66,7 +66,7 @@ export const CatalogKindHeader = ({
       onChange={e => setSelectedKind(e.target.value as string)}
       classes={classes}
     >
-      {allKinds.map(kind => (
+      {(allKinds ?? ['Component']).map(kind => (
         <MenuItem value={kind} key={kind}>
           {`${capitalize(kind)}s`}
         </MenuItem>