feat(playlist): add playlist navigation to header

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

Hide file tree

Showing 5 changed files with 40 additions and 46 deletions.
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 
 import { render } from '../../testUtils';
+import ButtonLink from '../ButtonLink/ButtonLink';
 
 import Header from './Header';
 
 describe('<Header />', () => {
   test('renders header', () => {
-    const { container } = render(<Header onMenuButtonClick={jest.fn()} />);
+    const playlistMenuItems = [<ButtonLink key="key" label="Home" to="/" />];
+    const { container } = render(
+      <Header
+        onMenuButtonClick={jest.fn()}
+        playlistMenuItems={playlistMenuItems}
+      />,
+    );
 
     expect(container).toMatchSnapshot();
   });

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -12,11 +12,15 @@ type TypeHeader = 'static' | 'fixed';
 type Props = {
   headerType?: TypeHeader;
   onMenuButtonClick: () => void;
+  playlistMenuItems: JSX.Element[];
+  logoSrc?: string;
 };
 
 const Header: React.FC<Props> = ({
   headerType = 'static',
   onMenuButtonClick,
+  playlistMenuItems,
+  logoSrc,
 }) => {
   return (
     <header className={classNames(styles.header, styles[headerType])}>
@@ -29,13 +33,11 @@ const Header: React.FC<Props> = ({
         >
           <Menu />
         </div>
-        <Logo src="https://cdn.jwplayer.com/images/HXyBCU5N.png" />
+        {logoSrc && <Logo src={logoSrc} />}
         <nav className={styles.nav} aria-label="menu">
           <ButtonLink label="Home" to="/" />
-          {/* mock */}
-          <ButtonLink label="Playlist" to="/p/:id" />
+          {playlistMenuItems}
           <ButtonLink label="Settings" to="/u" />
-          {/* mock */}
         </nav>
         <div className={styles.search}></div>
       </div>

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -31,15 +31,6 @@ exports[`<Header /> renders header 1`] = `
           </g>
         </svg>
       </div>
-      <div
-        class="brand"
-      >
-        <img
-          alt="logo"
-          class="logo"
-          src="https://cdn.jwplayer.com/images/HXyBCU5N.png"
-        />
-      </div>
       <nav
         aria-label="menu"
         class="nav"
@@ -54,11 +45,12 @@ exports[`<Header /> renders header 1`] = `
           </span>
         </a>
         <a
-          class="link"
-          href="/p/:id"
+          aria-current="page"
+          class="link active"
+          href="/"
         >
           <span>
-            Playlist
+            Home
           </span>
         </a>
         <a

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,5 +1,7 @@
-import React, { ReactNode, FC, useState } from 'react';
+import React, { ReactNode, FC, useState, useContext } from 'react';
 
+import ButtonLink from '../ButtonLink/ButtonLink';
+import { ConfigContext } from '../../providers/configProvider';
 import Header from '../Header/Header';
 import SideBar from '../SideBar/SideBar';
 
@@ -10,12 +12,29 @@ type LayoutProps = {
 };
 
 const Layout: FC<LayoutProps> = ({ children }) => {
+  const { menu, assets } = useContext(ConfigContext);
   const [sideBarOpen, setSideBarOpen] = useState(false);
 
+  const playlistMenuItems = menu.map((item) => (
+    <ButtonLink
+      key={item.playlistId}
+      label={item.label}
+      to={`/p/${item.playlistId}`}
+    />
+  ));
+
   return (
     <div className={styles.layout}>
-      <Header onMenuButtonClick={() => setSideBarOpen(true)} />
-      <SideBar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)} />
+      <Header
+        onMenuButtonClick={() => setSideBarOpen(true)}
+        playlistMenuItems={playlistMenuItems}
+        logoSrc={assets.banner}
+      />
+      <SideBar
+        isOpen={sideBarOpen}
+        onClose={() => setSideBarOpen(false)}
+        playlistMenuItems={playlistMenuItems}
+      />
       {children}
     </div>
   );

diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -32,15 +32,6 @@ exports[`<Layout /> renders layout 1`] = `
             </g>
           </svg>
         </div>
-        <div
-          class="brand"
-        >
-          <img
-            alt="logo"
-            class="logo"
-            src="https://cdn.jwplayer.com/images/HXyBCU5N.png"
-          />
-        </div>
         <nav
           aria-label="menu"
           class="nav"
@@ -54,14 +45,6 @@ exports[`<Layout /> renders layout 1`] = `
               Home
             </span>
           </a>
-          <a
-            class="link"
-            href="/p/:id"
-          >
-            <span>
-              Playlist
-            </span>
-          </a>
           <a
             class="link"
             href="/u"
@@ -117,15 +100,6 @@ exports[`<Layout /> renders layout 1`] = `
             Home
           </span>
         </a>
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Test
-          </span>
-        </a>
         <hr
           class="divider"
         />