feat: create a list of course descriptions that point to a playlist

this closes #241

src/component/course-play-list/course-play-list.component.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CoursePlayList = ({ courseId }) => {
+  return (
+    <div>course play list with id: {courseId}</div>
+  )
+}
+
+export default CoursePlayList

src/component/course-play-list/index.js

@@ -0,0 +1 @@
+export { default } from './course-play-list.component'

src/component/home/home.component.jsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import HeaderTitle from '../_dumb/header-title';
 import { db } from '../data/firebase';
 import { debounce } from 'lodash'
+import { navigate } from '@reach/router'
 import { StyledCourse, StyledCourseList, StyledWatchNow } from './home.style';
 
 const Home = () => {
@@ -36,13 +37,20 @@ const Home = () => {
     }
   }, []);
 
+  const goToCoursePlayList = id => {
+    console.log(id)
+    navigate(`/course/${id}`)
+  }
+
   const renderCourseList = () => {
     return data.courseList.map(({ title, id, description, totalDuration, externalThumbnail }) => (
       <StyledCourse key={id} externalThumbnail={externalThumbnail}>
         <HeaderTitle text={title} tag="h2" fontSize="1.2rem" />
         <p>{description}</p>
         <div>Watch time: {totalDuration}</div>
-        <StyledWatchNow>Watch now</StyledWatchNow>
+        <StyledWatchNow
+          onClick={() => goToCoursePlayList(id)}
+        >Watch now</StyledWatchNow>
       </StyledCourse>
     ));
   };

src/component/web-info/web-info.component.jsx

@@ -8,6 +8,7 @@ import PlayVideo from '../play-video';
 import ManageUser from '../manage-user';
 import Subscribe from '../subscribe';
 import HomeOld from '../home-old';
+import CoursePlayList from '../course-play-list';
 
 const WebInfo = () => {
   return (
@@ -20,6 +21,7 @@ const WebInfo = () => {
           <Course path="/manage/course/:courseId" />
           <Lecture path="/manage/lecture/:lectureId" />
           <PlayVideo path="/video/:youtubeVideoId" />
+          <CoursePlayList path="/course/:courseId" />
           <ManageUser path="/manage/user" />
           <Subscribe path="/subscribe" />
         </StyledRouter>