From 8658ea3f27fd90663933176f2a252c11620bcbbe Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Wed, 17 Jun 2020 12:03:23 +0200 Subject: [PATCH] Working catalog type filter (#1267) * WIP Working type filter * Fixed type error * Some interactivity between type filters and subfilters * Revert "Some interactivity between type filters and subfilters" This reverts commit 91a99f6c5759c33f1d35100f365af397d4ee9810. * Rename services to entities in catalog filter menu --- packages/core/src/layout/HeaderTabs/index.tsx | 16 +++- .../components/CatalogPage/CatalogPage.tsx | 83 +++++++++++-------- .../utils/locales/goodEvening.locales.json | 2 +- plugins/catalog/src/data/filters.ts | 9 +- 4 files changed, 68 insertions(+), 42 deletions(-) diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx index 340b39f862..2617a27aa9 100644 --- a/packages/core/src/layout/HeaderTabs/index.tsx +++ b/packages/core/src/layout/HeaderTabs/index.tsx @@ -17,7 +17,7 @@ // TODO(blam): Remove this implementation when the Tabs are ready // This is just a temporary solution to implementing tabs for now -import React from 'react'; +import React, { useState } from 'react'; import { makeStyles, Tabs, Tab } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ @@ -42,9 +42,18 @@ export type Tab = { id: string; label: string; }; -export const HeaderTabs: React.FC<{ tabs: Tab[] }> = ({ tabs }) => { +export const HeaderTabs: React.FC<{ + tabs: Tab[]; + onChange?: (index: Number) => void; +}> = ({ tabs, onChange }) => { + const [selectedTab, setSelectedTab] = useState(0); const styles = useStyles(); + const handleChange = (_: React.ChangeEvent<{}>, index: Number) => { + setSelectedTab(index); + if (onChange) onChange(index); + }; + return (
= ({ tabs }) => { variant="scrollable" scrollButtons="auto" aria-label="scrollable auto tabs example" - value={0} + onChange={handleChange} + value={selectedTab} > {tabs.map((tab, index) => ( ({ contentWrapper: { display: 'grid', @@ -58,8 +87,8 @@ const useStyles = makeStyles(theme => ({ export const CatalogPage: FC<{}> = () => { const catalogApi = useApi(catalogApiRef); + const [selectedTab, setSelectedTab] = useState(tabs[0].id); const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); - const [selectedFilter, setSelectedFilter] = useState( defaultFilter, ); @@ -69,16 +98,19 @@ export const CatalogPage: FC<{}> = () => { async () => catalogApi.getEntities(), ); - const data = - entities?.filter(e => - entityFilters[selectedFilter.id](e, { isStarred: isStarredEntity(e) }), - ) ?? []; - const onFilterSelected = useCallback( selected => setSelectedFilter(selected), [], ); + const filteredEntities = useMemo(() => { + const typeFilter = entityFilters[EntityFilterType.TYPE]; + const leftMenuFilter = entityFilters[selectedFilter.id]; + return entities + ?.filter(e => leftMenuFilter(e, { isStarred: isStarredEntity(e) })) + .filter(e => typeFilter(e, { type: selectedTab })); + }, [selectedFilter.id, selectedTab, isStarredEntity, entities?.filter]); + const styles = useStyles(); const actions = [ @@ -127,33 +159,14 @@ export const CatalogPage: FC<{}> = () => { }, ]; - // TODO: replace me with the proper tabs implemntation - const tabs = [ - { - id: 'services', - label: 'Services', - }, - { - id: 'websites', - label: 'Websites', - }, - { - id: 'libs', - label: 'Libraries', - }, - { - id: 'documentation', - label: 'Documentation', - }, - { - id: 'other', - label: 'Other', - }, - ]; - return ( - + { + setSelectedTab(tabs[index as number].id); + }} + /> = () => {
diff --git a/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json b/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json index a70aa122b6..a5506f123d 100644 --- a/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json +++ b/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json @@ -88,7 +88,7 @@ "Swedish": "God afton", "Tagalog": "Magandang gabi", "Tatar": "Xäyerle kiç", - "Telugu" : "శుభ సాయంత్రం", + "Telugu": "శుభ సాయంత్రం", "Thai": "Sawat-dii torn khum", "Turkish": "İyi akşamlar", "Ukrainian": "Dobry vechir", diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts index 71efa923c6..bbe959caa3 100644 --- a/plugins/catalog/src/data/filters.ts +++ b/plugins/catalog/src/data/filters.ts @@ -28,6 +28,7 @@ export enum EntityFilterType { ALL = 'ALL', STARRED = 'STARRED', OWNED = 'OWNED', + TYPE = 'TYPE', } export const filterGroups: CatalogFilterGroup[] = [ @@ -54,7 +55,7 @@ export const filterGroups: CatalogFilterGroup[] = [ items: [ { id: EntityFilterType.ALL, - label: 'All Services', + label: 'All Entities', count: AllServicesCount, }, ], @@ -64,13 +65,15 @@ export const filterGroups: CatalogFilterGroup[] = [ type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean; type EntityFilterOptions = { - isStarred: boolean; + isStarred?: boolean; + type?: string; }; export const entityFilters: Record = { [EntityFilterType.OWNED]: () => false, [EntityFilterType.ALL]: () => true, - [EntityFilterType.STARRED]: (_, { isStarred }) => isStarred, + [EntityFilterType.STARRED]: (_, { isStarred }) => !!isStarred, + [EntityFilterType.TYPE]: (e, { type }) => (e.spec as any)?.type === type, }; export const defaultFilter: CatalogFilterItem = filterGroups[0].items[0];