feat: add basic list for v2

codetapacademy · Sep 22, 2019 · afaa45f · afaa45f
1 parent 40a5afd
commit afaa45f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/src/component/course-play-list/course-play-list.component.jsx b/src/component/course-play-list/course-play-list.component.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { db } from '../data/firebase';
 import { StyledVideo, StyledVideoOverlay } from '../play-video/play-video.style';
+import { StyledListRow, StyledListDescription, StyledListImageWrapper } from './course-play-list.style';
 
 const CoursePlayList = ({ courseId }) => {
   const lectureCollection = db.collection('lecture')
@@ -23,7 +24,7 @@ const CoursePlayList = ({ courseId }) => {
       const lectureListSnap = await lectureCollection
         .where('course.id', '==', courseId)
         .get()
-      const lectureList = [...lectureListSnap.docs].map(doc => doc.data()).sort((a, b) => a.order - b.order)
+      const lectureList = [...lectureListSnap.docs].map(doc => ({ ...doc.data(), id: doc.id })).sort((a, b) => a.order - b.order)
       updateData({lectureList, sectionList, course})
     })()
   }, [])
@@ -46,20 +47,23 @@ const CoursePlayList = ({ courseId }) => {
 
       {course.version && course.version === 2 && <div>
         {sectionList.map(section => {
-          return console.log(section) || (
+          return (
             <div key={section.id}>
               <h2>{section.title}</h2>
-              <h2>{course.youtubePlaylistId}</h2>
               <div>
                 {lectureList
                   .filter(lecture => lecture.section.id === section.id)
                   .map(lecture => {
+                    const { youtubeVideoId = ''} = lecture
                     return (
-                      <div>
-                        <img src={`http://img.youtube.com/vi/${lecture.youtubeVideoId}/0.jpg`} alt=""/>
-                        <div>{lecture.title}</div>
-                        <div>{lecture.description}</div>
-                      </div>
+                      <StyledListRow key={lecture.id}>
+                        <StyledListImageWrapper>
+                          {youtubeVideoId && <img src={`http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`} alt=""/>}
+                        </StyledListImageWrapper>
+                        <h3>{lecture.title}</h3>
+                        <StyledListDescription>{lecture.description}</StyledListDescription>
+                        <div>{lecture.duration}</div>
+                      </StyledListRow>
                     )
                   })
                 }

diff --git a/src/component/course-play-list/course-play-list.style.js b/src/component/course-play-list/course-play-list.style.js
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const StyledListImageWrapper = styled.div`
+  grid-row: 1/3;
+  grid-column: 1/2;
+`
+
+export const StyledListDescription = styled.div`
+  grid-row: 2/3;
+  grid-column: 2/3;
+`
+
+export const StyledListRow = styled.div`
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-columns: 208px 1fr 208px;
+  grid-template-rows: 60px auto;
+
+  img {
+    max-width: 100%;
+  }
+`