rewire some lessons props'

Author: emily-yang

src/DUMMY_DATA.js

@@ -68,6 +68,11 @@ const make_rules = {
   length: 3603,
   title: 'You Make the Rules!',
   description: `The published D&D sourcebooks have their fair share of suggested rules... but as the DM, you have the special privilege to bend those to your will! Learn in this video how to set house rules for your campaign and your world, and begin collecting these guidelines in a Player's Guide for your party.`,
+  yt_chan_name: 'Nerdarchy',
+  yt_chan_src: 'https://www.youtube.com/channel/UCHLzgnQu3OWn31g2PebQV5Q',
+  yt_title: 'How to Use House Rules in Your D&D Campaign| Game Master Tips',
+  yt_desc: 'formatted youtube description',
+
 };
 
 const expectations = {

src/components/lesson/Lesson.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { LessonVideo, LessonInfo } from '..';
 import '../../css/lesson/Lesson.scss';
 
-const Lesson = ({ title, src, description, order, course_size, base_path }) => (
-  <div className="lesson" key={order}>
-    <LessonVideo title={title} src={src} />
-    <LessonInfo title={title} order={order} description={description} course_size={course_size} base_path={base_path} />
+const Lesson = ({ lesson, course_size, base_path }) => (
+  <div className="lesson" key={lesson.order}>
+    <LessonVideo title={lesson.title} src={lesson.src} />
+    <LessonInfo lesson={lesson} course_size={course_size} base_path={base_path} />
   </div>
 );
 

src/components/lesson/LessonInfo.js

@@ -3,32 +3,35 @@ import { LessonNav } from '..';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonInfo.scss';
 
-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 />
-    <p id="lesson-description">{description || 'No description provided'}</p>
-    <hr />
-    <div id="yt-info">
-      {/* link to YT chan, original video name, desc */}
-      <p id="yt-chan">
-        <span className="title">Creator: </span>
-        Youtube channel
-      </p>
-      <p id="yt-title">
-        <span className="title">Original video title: </span>
-        Original Youtube Title
-      </p>
-      <p id="yt-desc">
-        <span className="title">Original description: </span>
-        Youtube description
-      </p>
+const LessonInfo = ({ lesson, base_path, course_size }) => {
+  const {title, description, order, yt_chan_name, yt_chan_src, yt_title, yt_desc} = lesson;
+  return (
+    <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 />
+      <p id="lesson-description">{description || 'No description provided'}</p>
+      <hr />
+      <div id="yt-info">
+        {/* link to YT chan, original video name, desc */}
+        <h3 className="subheader">Youtube credits</h3>
+        <p id="yt-chan">
+          <span className="title">Creator: </span>
+          <a href={yt_chan_src} target="_blank" rel="noopener noreferrer">{yt_chan_name || 'YT Channel'}</a>
+        </p>
+        <p id="yt-title">
+          <span className="title">Video title: </span>
+          {yt_title || 'Original Youtube Title'}
+        </p>
+        <p id="yt-desc">
+          <span className="title">Video Description: </span>
+          {yt_desc || 'Youtube description'}
+        </p>
+      </div>
     </div>
-  </div>
-);
-
+  );
+};
 LessonInfo.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,

src/components/pages/LessonPage.js

@@ -6,12 +6,13 @@ import '../../css/pages/LessonPage.scss';
 function LessonPage(props) {
   const { curr_lesson_num, lessons, base_path } = props;
   // const { title, src, description, id } = lessons.find(elem => elem.id === activeId);
-  const { title, src, description, order } = lessons[curr_lesson_num];
+  // const { title, src, description, order } = lessons[curr_lesson_num];
+  const lesson = lessons[curr_lesson_num];
   const total = lessons.length;
 
   return (
     <div className="lesson-page">
-      <Lesson order={order} title={title} src={src} description={description} course_size={total} base_path={base_path}/>
+      <Lesson lesson={lesson} course_size={total} base_path={base_path}/>
       <LessonsPane lessons={lessons} curr_lesson_num={curr_lesson_num} base_path={base_path} />
     </div>
   );

src/css/lesson/LessonInfo.scss

@@ -25,6 +25,11 @@
   margin: 1rem 0;
 }
 
+.subheader {
+  color: var(--brown);
+}
+
 .title {
-  font-family: var(--fontfamily);
+  font-family: var(--fontfamily-roboto);
+  // font-size: 1.1em;
 }