From abc9b89a3489950e0d3f6a2f9aeccc38eb6addfc Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Fri, 7 May 2021 14:14:39 +0200
Subject: [PATCH 1/5] chore(project): fix dropdown filter and header

---
 src/components/Dropdown/Dropdown.test.tsx     | 11 +++++---
 src/components/Dropdown/Dropdown.tsx          | 25 +++++++++++--------
 .../DynamicBlur/DynamicBlur.test.tsx          |  2 +-
 src/components/Header/Header.tsx              |  4 +--
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
index 7f724f0e1..8a8a0a09f 100644
--- a/src/components/Dropdown/Dropdown.test.tsx
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import Dropdown from './Dropdown';
-
 const options = ['x', 'y', 'z'];
-
 describe('<Dropdown>', () => {
   it('renders dropdown', () => {
     const { getByText } = render(
-      <Dropdown name="categories" value="aa" defaultLabel="bb" options={options} setValue={(event) => event} />,
+      <Dropdown
+        name="categories"
+        value="aa"
+        defaultLabel="bb"
+        options={options}
+        onClick={(event: React.SyntheticEvent) => event}
+        onChange={(event: React.SyntheticEvent) => event}
+      />,
     );
     const dropdown = getByText(/bb/i);
     expect(document.body.contains(dropdown));
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 32ea960f5..45c3e6e3f 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,31 +1,34 @@
-import React from 'react';
+import React, { SyntheticEvent } from 'react';
+import classNames from 'classnames';
 
 import styles from './Dropdown.module.scss';
 
-type DropdownProps = {
+type Props = {
   name: string;
   value: string;
   defaultLabel: string;
   options: string[];
-  setValue: (value: string) => void;
+  optionsStyle?: string;
+  onClick: (event: SyntheticEvent) => void;
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 };
 
-function Dropdown({ name, value, defaultLabel, options, setValue }: DropdownProps) {
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => setValue(event.target.value);
-
+const Dropdown: React.FC<Props> = ({ name, value, defaultLabel, options, onClick, onChange, optionsStyle }: Props) => {
   return (
     <div className={styles.dropdown}>
-      <select className={styles.select} name={name} value={value} onChange={handleChange}>
-        <option value="">{defaultLabel}</option>
+      <select className={styles.select} name={name} value={value} onClick={onClick} onChange={onChange}>
+        <option className={classNames(styles.option, optionsStyle)} value="">
+          {defaultLabel}
+        </option>
         {options.map((option) => (
-          <option className={styles.option} key={option} value={option}>
+          <option className={classNames(styles.option, optionsStyle)} key={option} value={option}>
             {option}
           </option>
         ))}
       </select>
-      <span className="focus"></span>
+      <span className="focus" />
     </div>
   );
-}
+};
 
 export default Dropdown;
diff --git a/src/components/DynamicBlur/DynamicBlur.test.tsx b/src/components/DynamicBlur/DynamicBlur.test.tsx
index 2f2b6791a..d3eb94514 100644
--- a/src/components/DynamicBlur/DynamicBlur.test.tsx
+++ b/src/components/DynamicBlur/DynamicBlur.test.tsx
@@ -5,7 +5,7 @@ import DynamicBlur from './DynamicBlur';
 
 describe('<DynamicBlur>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<DynamicBlur />);
+    const { container } = render(<DynamicBlur url="/" />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index dc4669fbb..1cf264413 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -25,9 +25,9 @@ const Header: React.FC<Props> = ({ headerType = 'static', onMenuButtonClick, pla
         </div>
         {logoSrc && <Logo src={logoSrc} />}
         <nav className={styles.nav} aria-label="menu">
-          <ButtonLink className={styles.buttonLink} label="Home" to="/" />
+          <ButtonLink label="Home" to="/" />
           {playlistMenuItems}
-          <ButtonLink className={styles.buttonLink} label="Settings" to="/u" />
+          <ButtonLink label="Settings" to="/u" />
         </nav>
         <div className={styles.search}></div>
       </div>

From 3a403b8e33f4aa261df9208e90da3227d361020a Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Fri, 7 May 2021 14:23:11 +0200
Subject: [PATCH 2/5] chore(project): fix playlist screen

---
 src/screens/Playlist/Playlist.tsx | 55 +++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index 940293c5b..cf0c6dc07 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -1,26 +1,30 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import type { GridCellProps } from 'react-virtualized';
 
+import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
+import Layout from '../../components/Layout/Layout';
 import usePlaylist from '../../hooks/usePlaylist';
-import { getCategoriesFromPlaylist, filterPlaylistCategory } from '../../utils/collection';
+import { getCategoriesFromPlaylist, filterPlaylistCategory, chunk } from '../../utils/collection';
 import Card from '../../components/Card/Card';
-import Dropdown from '../../components/Dropdown/Dropdown';
-import CardGrid from '../../components/CardGrid/CardGrid';
+import Dropdown from '../../components/Filter/Filter';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './Playlist.module.scss';
 
-// TEMP DATA
-const playlistId = 'sR5VypYk';
-
-type PlaylistDestructuredArguments = {
-  mediaid: string;
-  title: string;
-  duration: number;
-  image: string;
+const cols = {
+  [Breakpoint.xs]: 2,
+  [Breakpoint.sm]: 2,
+  [Breakpoint.md]: 2,
+  [Breakpoint.lg]: 4,
+  [Breakpoint.xl]: 5,
 };
 
 function Playlist() {
-  const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(playlistId);
+  const breakpoint: Breakpoint = useBreakpoint();
+  const { id: playlistId } = useParams<Record<string, string>>();
   const [filter, setFilter] = useState<string>('');
+  const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(playlistId);
 
   if (isLoading) return <p>Loading...</p>;
 
@@ -29,6 +33,27 @@ function Playlist() {
   const categories = getCategoriesFromPlaylist(playlist);
   const filteredPlaylist = filterPlaylistCategory(playlist, filter);
 
+  const playlistRows = chunk(filteredPlaylist, cols[breakpoint]);
+
+  const cellRenderer = ({ columnIndex, key, rowIndex, style }: GridCellProps) => {
+    if (!playlistRows[rowIndex][columnIndex]) return;
+
+    const { mediaid: mediaId, title, duration, image, seriesId } = playlistRows[rowIndex][columnIndex];
+
+    return (
+      <div className={styles.wrapper} style={style} key={key}>
+        <Card
+          key={mediaId}
+          title={title}
+          duration={duration}
+          posterSource={image}
+          seriesId={seriesId}
+          onClick={() => ''}
+        />
+      </div>
+    );
+  };
+
   return (
     <div className={styles.playlist}>
       <header className={styles.header}>
@@ -38,11 +63,7 @@ function Playlist() {
         )}
       </header>
       <main>
-        <CardGrid>
-          {filteredPlaylist.map(({ mediaid: mediaId, title, duration, image }: PlaylistDestructuredArguments) => (
-            <Card key={mediaId} title={title} duration={duration} posterSource={image} onClick={() => ''} />
-          ))}
-        </CardGrid>
+        <VirtualizedGrid rowCount={playlistRows.length} cellRenderer={cellRenderer} spacing={30} />
       </main>
     </div>
   );

From 272f3a1ef48a3c0dbc810834c186fb0d8359fec2 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Fri, 7 May 2021 14:24:18 +0200
Subject: [PATCH 3/5] chore(project): removed unused import

---
 src/screens/Playlist/Playlist.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index cf0c6dc07..530fe71ac 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -3,7 +3,6 @@ import { useParams } from 'react-router-dom';
 import type { GridCellProps } from 'react-virtualized';
 
 import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
-import Layout from '../../components/Layout/Layout';
 import usePlaylist from '../../hooks/usePlaylist';
 import { getCategoriesFromPlaylist, filterPlaylistCategory, chunk } from '../../utils/collection';
 import Card from '../../components/Card/Card';

From 0d5a8117a65f3eeda880c102efdec650f36e9873 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Fri, 7 May 2021 14:31:28 +0200
Subject: [PATCH 4/5] chore(project): removed unnecessary useparams hook

---
 src/screens/Playlist/Playlist.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index 530fe71ac..c007c6077 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import type { RouteComponentProps } from 'react-router-dom';
 import type { GridCellProps } from 'react-virtualized';
 
 import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
@@ -19,11 +19,18 @@ const cols = {
   [Breakpoint.xl]: 5,
 };
 
-function Playlist() {
-  const breakpoint: Breakpoint = useBreakpoint();
-  const { id: playlistId } = useParams<Record<string, string>>();
+type PlaylistRouteParams = {
+  id: string;
+};
+
+function Playlist({
+  match: {
+    params: { id },
+  },
+}: RouteComponentProps<PlaylistRouteParams>) {
+  const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(id);
   const [filter, setFilter] = useState<string>('');
-  const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(playlistId);
+  const breakpoint: Breakpoint = useBreakpoint();
 
   if (isLoading) return <p>Loading...</p>;
 

From c9eaa29ffef3772102e17d90a67e54f75e1607ad Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Fri, 7 May 2021 14:35:26 +0200
Subject: [PATCH 5/5] chore(project): fix playlist type error

---
 src/screens/Playlist/Playlist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index c007c6077..a73205ae4 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -34,7 +34,7 @@ function Playlist({
 
   if (isLoading) return <p>Loading...</p>;
 
-  if (error) return <p>No playlist found...</p>;
+  if (error || !playlist) return <p>No playlist found...</p>;
 
   const categories = getCategoriesFromPlaylist(playlist);
   const filteredPlaylist = filterPlaylistCategory(playlist, filter);