chore(catalog): clean up code

plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx

@@ -29,5 +29,5 @@ export const AllServicesCount: FC<{}> = () => {
     return <CircularProgress size={theme.spacing(2)} />;
   }
 
-  return <span>{value?.length ?? '-'}</span>;
+  return <span>{value ?? length ?? '-'}</span>;
 };

plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx

@@ -108,7 +108,7 @@ export const CatalogFilter: FC<{
                       {item.label}
                     </Typography>
                   </ListItemText>
-                  {entitiesByFilter[item.id]?.length ?? 0}
+                  {entitiesByFilter[item.id]?.length ?? '-'}
                 </MenuItem>
               ))}
             </List>

plugins/catalog/src/components/CatalogFilter/OwnedCount.tsx

@@ -1,23 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { FC } from 'react';
-import { useStarredEntities } from '../../hooks/useStarredEntites';
-
-export const StarredCount: FC<{}> = () => {
-  const { starredEntities } = useStarredEntities();
-  return <span>{starredEntities.size}</span>;
-};

plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx

@@ -1,35 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
-import { StarredCount } from './StarredCount';
-import * as Hooks from '../../hooks/useStarredEntites';
-
-describe('Starred Count', () => {
-  it('should render the count returned from the hook', async () => {
-    jest.spyOn(Hooks, 'useStarredEntities').mockReturnValue({
-      starredEntities: new Set(['id1', 'id2', 'id3', 'id4']),
-      isStarredEntity: () => false,
-      toggleStarredEntity: () => undefined,
-    });
-
-    const { findByText } = render(wrapInTestApp(<StarredCount />));
-
-    expect(await findByText('4')).toBeInTheDocument();
-  });
-});

plugins/catalog/src/components/CatalogFilter/StarredCount.tsx

@@ -1,23 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { FC } from 'react';
-import { useStarredEntities } from '../../hooks/useStarredEntites';
-
-export const StarredCount: FC<{}> = () => {
-  const { starredEntities } = useStarredEntities();
-  return <span>{starredEntities.size}</span>;
-};

plugins/catalog/src/data/filters.ts

@@ -17,12 +17,10 @@
 import { Entity } from '@backstage/catalog-model';
 import SettingsIcon from '@material-ui/icons/Settings';
 import StarIcon from '@material-ui/icons/Star';
-import { AllServicesCount } from '../components/CatalogFilter/AllServicesCount';
 import {
   CatalogFilterGroup,
   CatalogFilterItem,
 } from '../components/CatalogFilter/CatalogFilter';
-import { StarredCount } from '../components/CatalogFilter/StarredCount';
 
 export enum EntityFilterType {
   ALL = 'ALL',
@@ -37,13 +35,11 @@ export const filterGroups: CatalogFilterGroup[] = [
       {
         id: EntityFilterType.OWNED,
         label: 'Owned',
-        count: 0,
         icon: SettingsIcon,
       },
       {
         id: EntityFilterType.STARRED,
         label: 'Starred',
-        count: StarredCount,
         icon: StarIcon,
       },
     ],
@@ -55,7 +51,6 @@ export const filterGroups: CatalogFilterGroup[] = [
       {
         id: EntityFilterType.ALL,
         label: 'All Services',
-        count: AllServicesCount,
       },
     ],
   },

plugins/catalog/src/hooks/useEntities.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState, useMemo } from 'react';
+import { EntityFilterType, entityFilters } from '../data/filters';
+import { useApi } from '@backstage/core';
+import { catalogApiRef } from '..';
+import { useStarredEntities } from './useStarredEntites';
+import { Entity } from '@backstage/catalog-model';
+import useStaleWhileRevalidate from 'swr';
+
+export type EntitiesByFilter = Record<EntityFilterType, Entity[] | undefined>;
+
+type UseEntities = {
+  selectedFilter: EntityFilterType | undefined;
+  setSelectedFilter: (f: EntityFilterType) => void;
+  error: Error | null;
+  toggleStarredEntity: any;
+  isStarredEntity: (e: Entity) => boolean;
+  entitiesByFilter: EntitiesByFilter;
+};
+
+export const useEntities = (): UseEntities => {
+  const [selectedFilter, setSelectedFilter] = useState<
+    EntityFilterType | undefined
+  >();
+  const catalogApi = useApi(catalogApiRef);
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
+  const { data: entities, error } = useStaleWhileRevalidate(
+    ['catalog/all', entityFilters[selectedFilter ?? EntityFilterType.ALL]],
+    async () => catalogApi.getEntities(),
+  );
+  const useUser = () => {
+    const [user] = useState('tools@example.com');
+    return user;
+  };
+  const userId = useUser();
+
+  const entitiesByFilter = useMemo(() => {
+    const filterEntities = (
+      ents: Entity[] | undefined,
+      filterId: EntityFilterType,
+      isStarred: (e: Entity) => boolean,
+      user: string,
+    ) => {
+      return ents?.filter((e: Entity) =>
+        entityFilters[filterId](e, {
+          isStarred: isStarred(e),
+          userId: user,
+        }),
+      );
+    };
+    const data = Object.keys(EntityFilterType).reduce(
+      (res, key) => ({
+        ...res,
+        [key]: filterEntities(
+          entities,
+          key as EntityFilterType,
+          isStarredEntity,
+          userId,
+        ),
+      }),
+      {} as EntitiesByFilter,
+    );
+    return data;
+  }, [entities, isStarredEntity, userId]);
+
+  return {
+    selectedFilter,
+    setSelectedFilter,
+    error,
+    toggleStarredEntity,
+    isStarredEntity,
+    entitiesByFilter,
+  };
+};