feat(playlist): get filters from config

src/screens/Playlist/Playlist.tsx

@@ -2,16 +2,13 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router-dom';
 import type { GridCellProps } from 'react-virtualized';
 import type { PlaylistItem } from 'types/playlist';
+import type { Config } from 'types/Config';
 
+import { ConfigContext } from '../../providers/ConfigProvider';
 import { cardUrl } from '../../utils/formatting';
 import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
 import usePlaylist from '../../hooks/usePlaylist';
-import {
-  getCategoriesFromPlaylist,
-  filterPlaylistCategory,
-  chunk,
-  findPlaylistImageForWidth,
-} from '../../utils/collection';
+import { filterPlaylist, chunk, findPlaylistImageForWidth, getFiltersFromConfig } from '../../utils/collection';
 import Card from '../../components/Card/Card';
 import Filter from '../../components/Filter/Filter';
 import useBreakpoint, { Breakpoint, Breakpoints } from '../../hooks/useBreakpoint';
@@ -38,14 +35,15 @@ function Playlist({
 }: RouteComponentProps<PlaylistRouteParams>) {
   const history = useHistory();
   const { updateBlurImage } = useContext(UIStateContext);
+  const config: Config = useContext(ConfigContext);
   const { isLoading, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
   const [filter, setFilter] = useState<string>('');
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const imageSourceWidth = 320 * (window.devicePixelRatio > 1 || isLargeScreen ? 2 : 1);
 
-  const categories = getCategoriesFromPlaylist(playlist);
-  const filteredPlaylist = useMemo(() => filterPlaylistCategory(playlist, filter), [playlist, filter]);
+  const categories = getFiltersFromConfig(config, id);
+  const filteredPlaylist = useMemo(() => filterPlaylist(playlist, filter), [playlist, filter]);
   const playlistRows = chunk<PlaylistItem>(filteredPlaylist, cols[breakpoint]);
 
   const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, id));

src/services/config.service.ts

@@ -13,6 +13,7 @@ const contentSchema: SchemaOf<Content> = object({
 const menuSchema: SchemaOf<Menu> = object().shape({
   label: string().defined(),
   playlistId: string().defined(),
+  filterTags: string().notRequired(),
 });
 
 const optionsSchema: SchemaOf<Options> = object({

src/utils/collection.ts

@@ -1,13 +1,14 @@
+import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 
-const getCategoriesFromPlaylist = (playlist: PlaylistItem[]) =>
-  playlist.reduce(
-    (categories: string[], item) =>
-      categories.includes(item.genre) || !item.genre ? categories : categories.concat(item.genre),
-    [],
-  );
+const getFiltersFromConfig = (config: Config, playlistId: string): string[] => {
+  const menuItem = config.menu.find((item) => item.playlistId === playlistId);
+  const filters = menuItem?.filterTags?.split(',');
 
-const filterPlaylistCategory = (playlist: PlaylistItem[], filter: string) => {
+  return filters || [];
+};
+
+const filterPlaylist = (playlist: PlaylistItem[], filter: string) => {
   if (!filter) return playlist;
 
   return playlist.filter(({ genre }) => genre === filter);
@@ -22,4 +23,4 @@ const chunk = <T>(input: T[], size: number) => {
 const findPlaylistImageForWidth = (playlistItem: PlaylistItem, width: number): string =>
   playlistItem.images.find((img) => img.width === width)?.src || playlistItem.image;
 
-export { getCategoriesFromPlaylist, filterPlaylistCategory, chunk, findPlaylistImageForWidth };
+export { getFiltersFromConfig, filterPlaylist, chunk, findPlaylistImageForWidth };

types/Config.d.ts

@@ -32,6 +32,7 @@ export type Content = {
 export type Menu = {
   label: string;
   playlistId: string;
+  filterTags?: string;
 };
 
 export type Options = {