check for first and last elements of array

Author: emily-yang

src/App.js

@@ -64,8 +64,8 @@ function App() {
                 lessons={courseObj.lessons}
                 curr_lesson_num={order}
                 base_path={courseObj.slug}
-                prev_slug={prevCourse ? prevCourse.slug : null}
-                next_slug={nextCourse ? nextCourse.slug : null}
+                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 LessonNavBar } from './lesson/LessonNavBar';
+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/CourseNav.js

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

src/components/lesson/LessonInfo.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { LessonNavBar } from '..';
+import { LessonNav } 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">
-      <LessonNavBar order={order} base_path={base_path} course_size={course_size} />
+      <LessonNav 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,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import '../../css/lesson/LessonNav.scss';
+
+const LessonNav = ({prev_path, next_path}) => (
+  <div className="lesson-nav">
+    { 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>
+);
+
+LessonNav.propTypes = {
+  prev_path: PropTypes.string.isRequired,
+  next_path: PropTypes.string.isRequired,
+};
+
+export default LessonNav;

src/components/lesson/LessonNavBar.js

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