diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 5df4bcc595..b9a57d1442 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -40,7 +40,11 @@ import React, { FC, useCallback, useState } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { useAsync } from 'react-use'; import { catalogApiRef } from '../..'; -import { defaultFilter, filterGroups, dataResolvers } from '../../data/filters'; +import { + defaultFilter, + filterGroups, + asyncEntityFilters, +} from '../../data/filters'; import { entityToComponent, findLocationForEntityMeta } from '../../data/utils'; import { useStarredEntities } from '../../hooks/useStarredEntites'; import { @@ -74,7 +78,11 @@ export const CatalogPage: FC<{}> = () => { ); const { value, error, loading } = useAsync( - () => dataResolvers[selectedFilter.id]({ catalogApi, isStarredEntity }), + () => + asyncEntityFilters[selectedFilter.id]({ + entitiesResolver: () => catalogApi.getEntities(), + isStarredEntity, + }), [selectedFilter.id, starredEntities.size], ); diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts index a344a1cfb2..13354ffc78 100644 --- a/plugins/catalog/src/data/filters.ts +++ b/plugins/catalog/src/data/filters.ts @@ -22,7 +22,6 @@ import StarIcon from '@material-ui/icons/Star'; import { StarredCount } from '../components/CatalogFilter/StarredCount'; import { AllServicesCount } from '../components/CatalogFilter/AllServicesCount'; import { FilterGroupItem } from '../types'; -import { CatalogApi } from '../..'; import { Entity } from '@backstage/catalog-model'; export const filterGroups: CatalogFilterGroup[] = [ @@ -57,20 +56,20 @@ export const filterGroups: CatalogFilterGroup[] = [ ]; type ResolverFunction = ({ - catalogApi, + entitiesResolver, isStarredEntity, }: { - catalogApi: CatalogApi; + entitiesResolver: () => Promise; isStarredEntity: (entity: Entity) => boolean; }) => Promise; -export const dataResolvers: Record = { +export const asyncEntityFilters: Record = { [FilterGroupItem.OWNED]: async () => [], - [FilterGroupItem.ALL]: async ({ catalogApi }) => { - return catalogApi.getEntities(); + [FilterGroupItem.ALL]: async ({ entitiesResolver: asyncFn }) => { + return asyncFn(); }, - [FilterGroupItem.STARRED]: async ({ catalogApi, isStarredEntity }) => { - const allEntities = await catalogApi.getEntities(); + [FilterGroupItem.STARRED]: async ({ entitiesResolver, isStarredEntity }) => { + const allEntities = await entitiesResolver(); return allEntities.filter(entity => isStarredEntity(entity)); },