feat(project): add valueprefix to filtering

jwplayer · Jun 17, 2021 · 6150be9 · 6150be9
1 parent 21ab173
commit 6150be9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -11,12 +11,13 @@ import styles from './Filter.module.scss';
 type Props = {
   name: string;
   value: string;
+  valuePrefix?: string;
   defaultLabel: string;
   options: string[];
   setValue: (value: string) => void;
 };
 
-const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue }) => {
+const Filter: FC<Props> = ({ name, value, valuePrefix = '', defaultLabel, options, setValue }) => {
   const [isFilterModalOpen, openFilterModal] = useState(false);
   const breakpoint: Breakpoint = useBreakpoint();
 
@@ -45,7 +46,12 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue }) =>
       {showFilterRow ? (
         <div className={styles.filterRow}>
           {options.map((option) => (
-            <Button label={option} onClick={() => setValue(option)} key={option} active={value === option} />
+            <Button
+              label={`${valuePrefix}${option}`}
+              onClick={() => setValue(option)}
+              key={option}
+              active={value === option}
+            />
           ))}
           <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} />
         </div>

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -137,6 +137,7 @@ const Series = ({
             <Filter
               name="categories"
               value={seasonFilter}
+              valuePrefix="Season "
               defaultLabel="All"
               options={filters}
               setValue={setSeasonFilter}

diff --git a/src/utils/collection.ts b/src/utils/collection.ts
@@ -14,17 +14,12 @@ const filterPlaylist = (playlist: PlaylistItem[], filter: string) => {
   return playlist.filter(({ genre }) => genre === filter);
 };
 
-const getFiltersFromSeries = (series: PlaylistItem[]): string[] => {
-  const seasonString = (seasonNumber: string = '') => `Season ${seasonNumber}`;
-
-  return series.reduce(
+const getFiltersFromSeries = (series: PlaylistItem[]): string[] =>
+  series.reduce(
     (filters: string[], item) =>
-      item.seasonNumber && filters.includes(seasonString(item.seasonNumber))
-        ? filters
-        : filters.concat(seasonString(item.seasonNumber)),
+      item.seasonNumber && filters.includes(item.seasonNumber) ? filters : filters.concat(item.seasonNumber || ''),
     [],
   );
-};
 
 const filterSeries = (playlist: PlaylistItem[], filter: string) => {
   if (!filter) return playlist;