feat(playlist): add playlist navigation to sidebar

jwplayer · May 4, 2021 · 1f1a5fb · 1f1a5fb
1 parent 0b0b1a6
commit 1f1a5fb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
       />