diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index c2c40ee575..570648f26b 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -37,7 +37,7 @@ 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, entityFilters } from '../../data/filters'; +import { defaultFilter, entityFilters, filterGroups } from '../../data/filters'; import { findLocationForEntityMeta } from '../../data/utils'; import { useStarredEntities } from '../../hooks/useStarredEntites'; import { @@ -70,17 +70,11 @@ export const CatalogPage: FC<{}> = () => { defaultFilter, ); - const { value, error, loading } = useAsync( - () => - catalogApi - .getEntities() - .then(entities => - entities.filter( - entityFilters[selectedFilter.id]({ isStarredEntity }), - ), - ), - [selectedFilter.id, starredEntities.size], - ); + const { value, error, loading } = useAsync(async () => { + const filter = entityFilters[selectedFilter.id]; + const all = await catalogApi.getEntities(); + return all.filter(e => filter(e, { isStarred: isStarredEntity(e) })); + }, [selectedFilter.id, starredEntities.size]); const onFilterSelected = useCallback( selected => setSelectedFilter(selected), diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts index 6468694952..71efa923c6 100644 --- a/plugins/catalog/src/data/filters.ts +++ b/plugins/catalog/src/data/filters.ts @@ -14,15 +14,15 @@ * limitations under the License. */ +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 SettingsIcon from '@material-ui/icons/Settings'; -import StarIcon from '@material-ui/icons/Star'; import { StarredCount } from '../components/CatalogFilter/StarredCount'; -import { AllServicesCount } from '../components/CatalogFilter/AllServicesCount'; -import { Entity } from '@backstage/catalog-model'; export enum EntityFilterType { ALL = 'ALL', @@ -61,16 +61,16 @@ export const filterGroups: CatalogFilterGroup[] = [ }, ]; -type EntityFilter = (entity: Entity) => boolean; +type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean; + type EntityFilterOptions = { - isStarredEntity: EntityFilter; + isStarred: boolean; }; -export const entityFilters = { - [EntityFilterType.OWNED]: (): EntityFilter => () => false, - [EntityFilterType.ALL]: (): EntityFilter => () => true, - [EntityFilterType.STARRED]: ({ isStarredEntity }: EntityFilterOptions) => - isStarredEntity, +export const entityFilters: Record = { + [EntityFilterType.OWNED]: () => false, + [EntityFilterType.ALL]: () => true, + [EntityFilterType.STARRED]: (_, { isStarred }) => isStarred, }; export const defaultFilter: CatalogFilterItem = filterGroups[0].items[0];