Merge pull request #80 from talent-path-pipeline/66-course-nav

66 course nav

Author: afterafx

src/App.js

@@ -53,6 +53,8 @@ function App() {
             const courseObj = courses.find(
               course => course.slug === props.match.params.course,
             );
+            const prevCourse = courses.find(course => course.order === courseObj.order - 1);
+            const nextCourse = courses.find(course => course.order === courseObj.order + 1);
             const order = parseInt(props.match.params.order, 10);
             if (!courseObj || order >= courseObj.lessons.length) return <ErrorPage />;
             return (
@@ -62,6 +64,9 @@ function App() {
                 lessons={courseObj.lessons}
                 curr_lesson_num={order}
                 base_path={courseObj.slug}
+                prev_slug={prevCourse ? prevCourse.slug : undefined}
+                next_slug={nextCourse ? nextCourse.slug : undefined}
+
               />
             );
           }}

src/components/index.js

@@ -10,7 +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 LessonNavBar } from './lesson/LessonNavBar';
 export { default as LessonVideo } from './lesson/LessonVideo';
 export { default as LessonLink } from './lesson/LessonLink';
 export { default as LessonsPane } from './lesson/LessonsPane';

src/components/lesson/LessonInfo.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { LessonNav } from '..';
+import { LessonNavBar } from '..';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonInfo.scss';
 
 const getVideoURL = embedLink => embedLink.replace('embed/', 'watch?v=');
 
 const LessonInfo = ({ lesson, base_path, course_size }) => {
   const {title, description, order, src, yt_chan_name, yt_chan_src, yt_title, yt_desc} = lesson;
-
+  const prevPath = order ? `/courses/${base_path}/${order - 1}` : undefined;
+  const nextPath = order < course_size - 1 ? `/courses/${base_path}/${order + 1}` : undefined;
   return (
     <div className="lesson-info">
-      <LessonNav order={order} base_path={base_path} course_size={course_size} />
+      <LessonNavBar className="lesson-nav" order={order} base_path={base_path} course_size={course_size} prev_path={prevPath} next_path={nextPath} />
       <h4 id="lesson-playing">Now playing:</h4>
       <h2>{title || 'Lesson'}</h2>
       <hr />

src/components/lesson/LessonNav.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import '../../css/lesson/LessonNavBar.scss';
+
+const LessonNavBar = ({prev_path, next_path, className}) => (
+  <div className={`lesson-nav-bar ${className}`}>
+    { prev_path
+      ? <button type="button" className='btn prev-btn'>
+        <Link to={prev_path} >← Prev</Link>
+      </button>
+      : ''}
+    { next_path
+      ? <button type="button" className="btn next-btn">
+        <Link to={next_path}>Next →</Link>
+      </button>
+      : ''}
+  </div>
+);
+
+LessonNavBar.propTypes = {
+  prev_path: PropTypes.string,
+  next_path: PropTypes.string,
+  className: PropTypes.string.isRequired,
+};
+
+LessonNavBar.defaultProps = {
+  prev_path: '',
+  next_path: '',
+};
+
+export default LessonNavBar;

src/components/lesson/LessonNavBar.js

@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LessonLink } from '..';
 import '../../css/lesson/LessonsPane.scss';
+import LessonNavBar from './LessonNavBar';
 
-// TODO: add next and previous course buttons
-const LessonsPane = ({ course_title, lessons, curr_lesson_num, base_path }) => (
+const LessonsPane = ({ course_title, lessons, curr_lesson_num, base_path, prev_slug, next_slug }) => (
   <div className="lessons-pane">
-    <h2>{course_title}</h2>
+    <h2>
+      <LessonNavBar className="course-nav" prev_path={prev_slug ? `/courses/${prev_slug}/0`: ''} next_path={next_slug ? `/courses/${next_slug}/0` : ''} />
+      {course_title}
+    </h2>
     {lessons.map(({ order, title, length }) => (
       <LessonLink
         key={order}
@@ -31,6 +34,12 @@ LessonsPane.propTypes = {
     }),
   ).isRequired,
   base_path: PropTypes.string.isRequired,
+  prev_slug: PropTypes.string,
+  next_slug: PropTypes.string,
 };
 
+LessonsPane.defaultProps = {
+  prev_slug: '',
+  next_slug: '',
+};
 export default LessonsPane;

src/components/lesson/LessonsPane.js

@@ -4,7 +4,7 @@ import { Lesson, LessonsPane } from '..';
 import '../../css/pages/LessonPage.scss';
 
 function LessonPage(props) {
-  const { curr_lesson_num, lessons, base_path, course_title } = props;
+  const { curr_lesson_num, lessons, base_path } = props;
   // const { title, src, description, id } = lessons.find(elem => elem.id === activeId);
   const lesson = lessons[curr_lesson_num];
   const total = lessons.length;
@@ -13,10 +13,7 @@ function LessonPage(props) {
     <div className="lesson-page">
       <Lesson lesson={lesson} course_size={total} base_path={base_path}/>
       <LessonsPane
-        course_title={course_title}
-        lessons={lessons}
-        curr_lesson_num={curr_lesson_num}
-        base_path={base_path}
+        {...props}
       />
     </div>
   );
@@ -35,6 +32,13 @@ LessonPage.propTypes = {
     }),
   ).isRequired,
   base_path: PropTypes.string.isRequired,
+  prev_slug: PropTypes.string,
+  next_slug: PropTypes.string,
+};
+
+LessonPage.defaultProps = {
+  prev_slug: '',
+  next_slug: '',
 };
 
 export default LessonPage;

src/components/pages/LessonPage.js

@@ -1,23 +1,16 @@
-.lesson-nav {
-  margin-top: -1rem;
-  margin-bottom: 2rem;
-
+.lesson-nav-bar {
   .btn {
     border: none;
 
     a {
         font-family: var(--fontfamily);
-        background-color: var(--navy);
         font-size: 1rem;
         height: 100%;
         width: 100%;
+        background-color: var(--navy);
         color:var(--cream);
         text-decoration: none;
-        padding: 0.75rem 1.5rem;
-    }
 
-    a:hover {
-      background-color: var(--brown);
     }
   }
 
@@ -30,7 +23,36 @@
   }
 }
 
-.lesson-nav:after {
+.lesson-nav {
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+
+  a {
+    background-color: var(--navy);
+    color:var(--cream);
+    padding: 0.75rem 1.5rem;
+  }
+  & a:hover {
+      background-color: var(--brown);
+  }
+}
+
+.course-nav {
+  margin-bottom: 1rem;
+  a {
+    display: inline-block;
+    padding: 0.75rem 0;
+  }
+  a:hover {
+      text-decoration: underline;
+  }
+}
+
+
+
+
+// clear floats
+.lesson-nav-bar:after {
   content: '';
   display: block;
   clear: both;