From c8797d6d7a8a7a0d4059e61a8f6da0672389c0b1 Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Mon, 15 Jun 2020 17:45:05 +0200 Subject: [PATCH] fix(catalog): starred entities count --- .../CatalogFilter/AllServicesCount.tsx | 4 +- .../CatalogFilter/CatalogFilter.tsx | 32 ++++---- .../components/CatalogPage/CatalogPage.tsx | 34 ++++---- plugins/catalog/src/data/filters.ts | 11 +++ plugins/catalog/src/hooks/useEntitiesStore.ts | 82 ------------------- 5 files changed, 46 insertions(+), 117 deletions(-) delete mode 100644 plugins/catalog/src/hooks/useEntitiesStore.ts diff --git a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx index 5ccac8f772..c528b40882 100644 --- a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx +++ b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ -import React from 'react'; +import React, { FC } from 'react'; import { useApi } from '@backstage/core'; import { catalogApiRef } from '../../api/types'; import { useAsync } from 'react-use'; import { CircularProgress, useTheme } from '@material-ui/core'; -export const AllServicesCount: React.FC<{}> = () => { +export const AllServicesCount: FC<{}> = () => { const theme = useTheme(); const catalogApi = useApi(catalogApiRef); const { value, loading } = useAsync(() => catalogApi.getEntities()); diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index 0abb5f817a..e815d470e1 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -26,7 +26,8 @@ import { makeStyles, } from '@material-ui/core'; import type { IconComponent } from '@backstage/core'; -import { EntityFilterType } from '../../data/filters'; +import { EntityFilterType, filterGroups } from '../../data/filters'; +import { EntitiesByFilter } from '../../hooks/useEntities'; export type CatalogFilterItem = { id: EntityFilterType; @@ -40,12 +41,6 @@ export type CatalogFilterGroup = { items: CatalogFilterItem[]; }; -export type CatalogFilterProps = { - groups: CatalogFilterGroup[]; - selectedId?: string; - onSelectedChange?: (item: CatalogFilterItem) => void; -}; - const useStyles = makeStyles(theme => ({ root: { backgroundColor: 'rgba(0, 0, 0, .11)', @@ -72,11 +67,16 @@ const useStyles = makeStyles(theme => ({ }, })); -export const CatalogFilter: FC = ({ - groups, - selectedId, - onSelectedChange, +export const CatalogFilter: FC<{ + selectedFilter: EntityFilterType; + onFilterChange: (type: EntityFilterType) => void; + entitiesByFilter: EntitiesByFilter; +}> = ({ + selectedFilter: selectedId, + onFilterChange: setSelectedFilter, + entitiesByFilter, }) => { + const groups = filterGroups; const classes = useStyles(); return ( @@ -92,7 +92,9 @@ export const CatalogFilter: FC = ({ key={item.id} button divider - onClick={() => onSelectedChange?.(item)} + onClick={() => { + setSelectedFilter(item.id); + }} selected={item.id === selectedId} className={classes.menuItem} > @@ -106,11 +108,7 @@ export const CatalogFilter: FC = ({ {item.label} - {typeof item.count === 'function' ? ( - - ) : ( - item.count - )} + {entitiesByFilter[item.id]?.length ?? 0} ))} diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 87e25f8f82..0ab4e9c7d4 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -29,13 +29,16 @@ import Edit from '@material-ui/icons/Edit'; import GitHub from '@material-ui/icons/GitHub'; import Star from '@material-ui/icons/Star'; import StarOutline from '@material-ui/icons/StarBorder'; -import React, { FC, useCallback } from 'react'; +import React, { FC } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { CatalogFilter } from '../CatalogFilter/CatalogFilter'; import { CatalogTable } from '../CatalogTable/CatalogTable'; -import { useEntitiesStore } from '../../hooks/useEntitiesStore'; +import { useEntities } from '../../hooks/useEntities'; import { findLocationForEntityMeta } from '../../data/utils'; -import { filterGroups } from '../../data/filters'; +import { + getCatalogFilterItemByType, + EntityFilterType, +} from '../../data/filters'; const useStyles = makeStyles(theme => ({ contentWrapper: { @@ -52,19 +55,15 @@ const useStyles = makeStyles(theme => ({ export const CatalogPage: FC<{}> = () => { const { - filteredEntities: data, - selectedFilter, - setSelectedFilter, + entitiesByFilter, + selectedFilter: selectedId, error, toggleStarredEntity, isStarredEntity, - } = useEntitiesStore(); - - const onFilterSelected = useCallback( - selected => setSelectedFilter(selected), - [setSelectedFilter], - ); + setSelectedFilter, + } = useEntities(); + const data = entitiesByFilter[selectedId ?? EntityFilterType.ALL]; const styles = useStyles(); const actions = [ @@ -172,13 +171,16 @@ export const CatalogPage: FC<{}> = () => {
{ + for (const group of filterGroups) { + for (const filter of group.items) { + if (filter.id === filterType) { + return filter; + } + } + } + return null; +}; + type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean; type EntityFilterOptions = Partial<{ diff --git a/plugins/catalog/src/hooks/useEntitiesStore.ts b/plugins/catalog/src/hooks/useEntitiesStore.ts deleted file mode 100644 index 21ba283dfe..0000000000 --- a/plugins/catalog/src/hooks/useEntitiesStore.ts +++ /dev/null @@ -1,82 +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 { useState, useEffect } from 'react'; -import { CatalogFilterItem } from '../components/CatalogFilter/CatalogFilter'; -import { - defaultFilter, - 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 const useEntitiesStore = () => { - const [selectedFilter, setSelectedFilter] = useState( - defaultFilter, - ); - const catalogApi = useApi(catalogApiRef); - const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); - const { data: entities, error } = useStaleWhileRevalidate( - ['catalog/all', entityFilters[selectedFilter.id]], - async () => catalogApi.getEntities(), - ); - const useUser = () => { - const [user] = useState('tools@example.com'); - return user; - }; - const userId = useUser(); - - const [filteredEntities, setFilteredEntities] = useState([]); - const [entitiesByFilter] = useState>( - // Create an empty result for every filter by default - Object.keys(EntityFilterType).reduce( - (res, key) => ({ ...res, [key]: [] }), - {}, - ), - ); - useEffect(() => { - // const dataByFilter = Object.keys(EntityFilterType).reduce( - - // ,{}); - - const data = - entities?.filter((e: Entity) => - entityFilters[selectedFilter.id](e, { - isStarred: isStarredEntity(e), - userId, - }), - ) ?? []; - setFilteredEntities(data); - }, [ - entities, - selectedFilter.id, - isStarredEntity, - userId, - setFilteredEntities, - ]); - return { - filteredEntities, - selectedFilter, - setSelectedFilter, - error, - toggleStarredEntity, - isStarredEntity, - entitiesByFilter, - }; -};