feat(project): add playlist grid

src/containers/Playlist/Playlist.module.scss

@@ -1,4 +1,26 @@
 .playlist {
     color: var(--primary-color);
     font-family: var(--body-alt-font-family);
+    margin-left: 56px;
+    margin-right: 56px;
+    text-align: center;
+
+    @media screen and (max-width: 992px) {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+  }
+
+  .playlistHeader {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+      margin-left: 24px;
+    }
+  }
+
+  .playlistGrid {
+    display: grid;
+    grid-gap: 8px;
   }

src/containers/Playlist/Playlist.tsx

@@ -1,19 +1,53 @@
 import React from 'react';
 
+import usePlaylist from '../../hooks/usePlaylist';
+import useBreakpoint from '../../hooks/useBreakpoint';
+import Card from '../../components/Card/Card'
+
 import styles from './Playlist.module.scss';
 
 type PlaylistContainerProps = {
     playlistId: string;
 };
 
+type PlaylistMapArguments = {
+    mediaid: string;
+    title: string;
+    duration: number;
+    image: string;
+};
+
+const cols = { "xs": 2, "sm": 3, "md": 4, "lg": 5, "xl": 6 } // temp data, till config arrives
+
 function Playlist({ playlistId }: PlaylistContainerProps): JSX.Element {
+
+    const { isLoading, error, data } = usePlaylist(playlistId)
+    const breakpoint = useBreakpoint();
+
+    if (isLoading) return <p>Loading...</p>
+
+    if (error) return <p>No playlist found...</p>
+
+    const { title, playlist } = data;
+
     return (
         <div className={styles.playlist}>
             <header className={styles.playlistHeader}>
-                <h2 className={styles.playlistTitle}>All films</h2>
-                <div className={styles.playlistCategory} />
+                <h2 className={styles.playlistTitle}>{title}</h2>
+                <div className={styles.playlistCategory}>
+                    <select name="categories">
+                        <option value="">All</option>
+                        <option value="some">Some</option>
+                    </select>
+                </div>
             </header>
-            <main className={styles.playlistGrid} />
+            <main
+                className={styles.playlistGrid}
+                style={{ gridTemplateColumns: `repeat(${cols[breakpoint]}, minmax(0,1fr))` }}
+            >
+                {playlist.map(({ mediaid: mediaId, title, duration, image }: PlaylistMapArguments) =>
+                    <Card key={mediaId} title={title} duration={duration} posterSource={image} onClick={(() => '')} />)}
+            </main>
         </div>
     );
 }

src/hooks/useBreakpoint.ts

@@ -1,15 +1,21 @@
 import { useState, useEffect } from 'react';
 import throttle from 'lodash.throttle';
 
-const getDeviceConfig = (width: number) => {
+type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+const THROTTLE_WAIT = 500;
+
+const getDeviceConfig = (width: number): Breakpoints => {
     if (width < 320) {
         return 'xs';
     } else if (width >= 320 && width < 720) {
         return 'sm';
     } else if (width >= 720 && width < 1024) {
         return 'md';
-    } else if (width >= 1024) {
+    } else if (width >= 1024 && width < 1440) {
         return 'lg';
+    } else {
+        return 'xl';
     }
 };
 
@@ -19,7 +25,7 @@ const useBreakpoint = () => {
     useEffect(() => {
         const calcInnerWidth = throttle(function () {
             setBreakpoint(getDeviceConfig(window.innerWidth))
-        }, 200);
+        }, THROTTLE_WAIT);
         window.addEventListener('resize', calcInnerWidth);
         return () => window.removeEventListener('resize', calcInnerWidth);
     }, []);