Merge branch 'staging' into c58-youtube-api-integration

Author: samsaksfithian

src/components/index.js

@@ -10,6 +10,7 @@ export { default as CourseInfo } from './course/CourseInfo';
 // ========================================
 // lesson
 export { default as LessonInfo } from './lesson/LessonInfo';
+export { default as LessonNav } from './lesson/LessonNav';
 export { default as LessonVideo } from './lesson/LessonVideo';
 export { default as LessonLink } from './lesson/LessonLink';
 export { default as LessonsPane } from './lesson/LessonsPane';

src/components/lesson/Lesson.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import { LessonVideo, LessonInfo } from '..';
 import '../../css/lesson/Lesson.scss';
 
-const Lesson = ({ title, src, description, order }) => (
+const Lesson = ({ title, src, description, order, course_size, base_path }) => (
   <div className="lesson" key={order}>
     {/* <YouTube videoId={} opts={} onEnd={} /> */}
     <LessonVideo title={title} src={src} />
-    <LessonInfo title={title} description={description} />
+    <LessonInfo title={title} order={order} description={description} course_size={course_size} base_path={base_path} />
   </div>
 );
 
@@ -18,6 +18,8 @@ Lesson.propTypes = {
   src: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   order: PropTypes.number.isRequired,
+  course_size: PropTypes.number.isRequired,
+  base_path: PropTypes.string.isRequired,
 };
 
 export default Lesson;

src/components/lesson/LessonInfo.js

@@ -1,12 +1,14 @@
 import React from 'react';
+import { LessonNav } from '..';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonInfo.scss';
 
 // TODO: add content channel link
 // TODO: add description about channel and text from actual video
 // TODO: add next and previous lesson buttons
-const LessonInfo = ({ title, description }) => (
+const LessonInfo = ({ title, description, order, base_path, course_size }) => (
   <div className="lesson-info">
+    <LessonNav order={order} base_path={base_path} course_size={course_size} />
     <h4 id="lesson-playing">Now playing:</h4>
     <h2>{title || 'Lesson'}</h2>
     <hr />
@@ -17,6 +19,9 @@ const LessonInfo = ({ title, description }) => (
 LessonInfo.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  order: PropTypes.number.isRequired,
+  base_path: PropTypes.string.isRequired,
+  course_size: PropTypes.number.isRequired,
 };
 
 export default LessonInfo;

src/components/lesson/LessonNav.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import '../../css/lesson/LessonNav.scss';
+
+const LessonNav = ({order, base_path, course_size}) => (
+  <div className="lesson-nav">
+    { order !== 0
+      ? <button type="button" className='btn prev-btn'>
+        <Link to={`/courses/${base_path}/${order - 1}`} >← Prev</Link>
+      </button>
+      : ''}
+    { order !== course_size - 1
+      ? <button type="button" className="btn next-btn">
+        <Link to={`/courses/${base_path}/${order + 1}`}>Next →</Link>
+      </button>
+      : ''}
+  </div>
+);
+
+LessonNav.propTypes = {
+  order: PropTypes.number.isRequired,
+  base_path: PropTypes.string.isRequired,
+  course_size: PropTypes.number.isRequired,
+};
+
+export default LessonNav;

src/components/pages/LessonPage.js

@@ -7,10 +7,18 @@ function LessonPage(props) {
   const { curr_lesson_num, lessons, base_path, course_title } = props;
   // const { title, src, description, id } = lessons.find(elem => elem.id === activeId);
   const { title, src, description, order } = lessons[curr_lesson_num];
+  const total = lessons.length;
 
   return (
     <div className="lesson-page">
-      <Lesson order={order} title={title} src={src} description={description} />
+      <Lesson
+        order={order}
+        title={title}
+        src={src}
+        description={description}
+        course_size={total}
+        base_path={base_path}
+      />
       <LessonsPane
         course_title={course_title}
         lessons={lessons}

src/css/lesson/Lesson.scss

@@ -1,7 +1,7 @@
 @import '../VARIABLES.scss';
 
 .lesson {
-  margin: 1rem 3rem;
+  margin-right: 2rem;
 }
 
 

src/css/lesson/LessonNav.scss

@@ -0,0 +1,37 @@
+.lesson-nav {
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+
+  .btn {
+    border: none;
+
+    a {
+        font-family: var(--fontfamily);
+        background-color: var(--navy);
+        font-size: 1rem;
+        height: 100%;
+        width: 100%;
+        color:var(--cream);
+        text-decoration: none;
+        padding: 0.75rem 1.5rem;
+    }
+
+    a:hover {
+      background-color: var(--brown);
+    }
+  }
+
+  .prev-btn {
+    float: left;
+  }
+
+  .next-btn {
+    float: right;
+  }
+}
+
+.lesson-nav:after {
+  content: '';
+  display: block;
+  clear: both;
+}

src/css/lesson/LessonsPane.scss

@@ -3,7 +3,6 @@
 .lessons-pane {
   background-color: var(--white);
   min-width: 30%;
-  margin: 1rem;
   border: solid var(--blue) 2px;
   flex: 1 0 30%;
 }
@@ -13,4 +12,5 @@
   padding: 1rem;
   font-weight: bold;
   color: var(--white);
-}
+  font-size: calc(16px + 1vw);
+}

src/css/pages/LessonPage.scss

@@ -7,6 +7,7 @@
 
 .lesson-page {
   display: flex;
+  padding: 3rem;
 }
 
 .lesson-page > * {