From 1f1a5fb8dae3951017fa210d83d80f66bac865d8 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Tue, 4 May 2021 21:02:07 +0200
Subject: [PATCH] feat(playlist): add playlist navigation to sidebar

---
 src/components/Root/Root.test.tsx                      |  1 +
 src/components/Root/Root.tsx                           | 10 ++--------
 src/components/SideBar/SideBar.tsx                     |  7 ++++---
 .../SideBar/__snapshots__/SideBar.test.tsx.snap        |  9 ---------
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/components/Root/Root.test.tsx b/src/components/Root/Root.test.tsx
index fa41d0ba0..9115ac941 100644
--- a/src/components/Root/Root.test.tsx
+++ b/src/components/Root/Root.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { mockWindowLocation, render } from '../../testUtils';
 
+import '../../hooks/matchMedia.mock';
 import Root from './Root';
 
 describe('<Root />', () => {
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
index a1a60e1ef..0e615814b 100644
--- a/src/components/Root/Root.tsx
+++ b/src/components/Root/Root.tsx
@@ -1,17 +1,11 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import Playlist from '../../screens/Playlist/Playlist';
 import Home from '../../screens/Home/Home';
 
 // Mock screens
 
-const PlaylistScreen = () => {
-  return (
-    <>
-      <span>PlaylistScreen</span>
-    </>
-  );
-};
 const Settings = () => {
   return (
     <>
@@ -34,7 +28,7 @@ const Root: FC<Props> = ({ error }: Props) => {
   return (
     <Switch>
       <Route path="/" component={Home} exact />
-      <Route path="/p/:id" component={PlaylistScreen} exact />
+      <Route path="/p/:id" component={Playlist} exact />
       <Route path="/u" component={Settings} exact />
     </Switch>
   );
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 40c736145..5432e8520 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, FC } from 'react';
 import classNames from 'classnames';
 
 import Close from '../../icons/Close';
@@ -9,9 +9,10 @@ import styles from './SideBar.module.scss';
 type SideBarProps = {
   isOpen: boolean;
   onClose: () => void;
+  playlistMenuItems: JSX.Element[];
 };
 
-const SideBar: React.FC<SideBarProps> = ({ isOpen, onClose }) => {
+const SideBar: FC<SideBarProps> = ({ isOpen, onClose, playlistMenuItems }) => {
   return (
     <Fragment>
       <div
@@ -31,7 +32,7 @@ const SideBar: React.FC<SideBarProps> = ({ isOpen, onClose }) => {
         </div>
         <nav className={styles.group}>
           <ButtonLink label="Home" to="/" />
-          <ButtonLink label="Test" to="/" />
+          {playlistMenuItems}
           <hr className={styles.divider} />
           <ButtonLink label="Settings" to="/" />
         </nav>
diff --git a/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
index 568819bca..c45af290d 100644
--- a/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
+++ b/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -43,15 +43,6 @@ exports[`<SideBar /> renders sideBar 1`] = `
           Home
         </span>
       </a>
-      <a
-        aria-current="page"
-        class="link active"
-        href="/"
-      >
-        <span>
-          Test
-        </span>
-      </a>
       <hr
         class="divider"
       />