From f2462cedb696fe5327febdb460e8d2487de41a7c Mon Sep 17 00:00:00 2001
From: moT01 <tmondloch01@gmail.com>
Date: Fri, 1 Mar 2019 17:57:02 -0600
Subject: [PATCH] feat/add-prev-next-btns-to-lessons

redirect to learn instead of home
---
 .../src/templates/Challenges/backend/Show.js  | 15 ++++++-
 .../src/templates/Challenges/classic/Show.js  | 13 ++++--
 .../Challenges/components/Challenge-Title.js  | 42 ++++++++++++++++---
 .../Challenges/components/Side-Panel.js       | 17 +++++++-
 .../Challenges/components/challenge-title.css | 17 ++++++++
 .../src/templates/Challenges/project/Show.js  |  7 ++++
 .../Challenges/project/Side-Panel.js          | 24 ++++++++++-
 .../src/templates/Challenges/redux/index.js   |  1 +
 client/utils/gatsby/challengePageCreator.js   |  9 +++-
 9 files changed, 131 insertions(+), 14 deletions(-)
 create mode 100644 client/src/templates/Challenges/components/challenge-title.css

diff --git a/client/src/templates/Challenges/backend/Show.js b/client/src/templates/Challenges/backend/Show.js
index 743fae029e..2c1c4328aa 100644
--- a/client/src/templates/Challenges/backend/Show.js
+++ b/client/src/templates/Challenges/backend/Show.js
@@ -49,6 +49,9 @@ const propTypes = {
   id: PropTypes.string,
   initTests: PropTypes.func.isRequired,
   output: PropTypes.string,
+  pageContext: PropTypes.shape({
+    challengeMeta: PropTypes.object
+  }),
   tests: PropTypes.array,
   title: PropTypes.string,
   updateChallengeMeta: PropTypes.func.isRequired,
@@ -156,6 +159,9 @@ export class BackEnd extends Component {
         }
       },
       output,
+      pageContext: {
+        challengeMeta: { introPath, nextChallengePath, prevChallengePath }
+      },
       tests,
       submitting,
       executeChallenge
@@ -172,7 +178,14 @@ export class BackEnd extends Component {
           <Row>
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
               <Spacer />
-              <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
+              <ChallengeTitle
+                introPath={introPath}
+                nextChallengePath={nextChallengePath}
+                prevChallengePath={prevChallengePath}
+                showPrevNextBtns={true}
+              >
+                {blockNameTitle}
+              </ChallengeTitle>
               <ChallengeDescription
                 description={description}
                 instructions={instructions}
diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js
index a86dc283a0..44a0067aea 100644
--- a/client/src/templates/Challenges/classic/Show.js
+++ b/client/src/templates/Challenges/classic/Show.js
@@ -66,9 +66,7 @@ const propTypes = {
   initTests: PropTypes.func.isRequired,
   output: PropTypes.string,
   pageContext: PropTypes.shape({
-    challengeMeta: PropTypes.shape({
-      nextChallengePath: PropTypes.string
-    })
+    challengeMeta: PropTypes.object
   }),
   tests: PropTypes.arrayOf(
     PropTypes.shape({
@@ -201,13 +199,22 @@ class ShowClassic extends Component {
       instructions
     } = this.getChallenge();
 
+    const {
+      introPath,
+      nextChallengePath,
+      prevChallengePath
+    } = this.props.pageContext.challengeMeta;
     return (
       <SidePanel
         className='full-height'
         description={description}
         guideUrl={this.getGuideUrl()}
         instructions={instructions}
+        introPath={introPath}
+        nextChallengePath={nextChallengePath}
+        prevChallengePath={prevChallengePath}
         section={dasherize(blockName)}
+        showPrevNextBtns={true}
         showToolPanel={showToolPanel}
         title={this.getBlockNameTitle()}
         videoUrl={this.getVideoUrl()}
diff --git a/client/src/templates/Challenges/components/Challenge-Title.js b/client/src/templates/Challenges/components/Challenge-Title.js
index 19c7b6c10b..1c6d640745 100644
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/client/src/templates/Challenges/components/Challenge-Title.js
@@ -1,12 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { navigate } from 'gatsby';
+import { Button } from '@freecodecamp/react-bootstrap';
+
+import './challenge-title.css';
 
 const propTypes = {
   children: PropTypes.string,
-  isCompleted: PropTypes.bool
+  introPath: PropTypes.string,
+  isCompleted: PropTypes.bool,
+  nextChallengePath: PropTypes.string,
+  prevChallengePath: PropTypes.string,
+  showPrevNextBtns: PropTypes.bool
 };
 
-function ChallengeTitle({ children, isCompleted }) {
+function ChallengeTitle({
+  children,
+  introPath,
+  isCompleted,
+  nextChallengePath,
+  prevChallengePath,
+  showPrevNextBtns
+}) {
   let icon = null;
   if (isCompleted) {
     icon = (
@@ -15,10 +30,25 @@ function ChallengeTitle({ children, isCompleted }) {
     );
   }
   return (
-    <h2 className='text-center challenge-title'>
-      {children || 'Happy Coding!'}
-      {icon}
-    </h2>
+    <div className='challenge-title-wrap'>
+      {showPrevNextBtns ? (
+        <Button bsStyle='primary' onClick={() => navigate(prevChallengePath)}>
+          &lt;
+        </Button>
+      ) : null}
+      <h2 className='text-center challenge-title'>
+        {children || 'Happy Coding!'}
+        {icon}
+      </h2>
+      {showPrevNextBtns ? (
+        <Button
+          bsStyle='primary'
+          onClick={() => navigate(introPath ? introPath : nextChallengePath)}
+        >
+          &gt;
+        </Button>
+      ) : null}
+    </div>
   );
 }
 
diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js
index 1e7684ca1e..1adfca2ee6 100644
--- a/client/src/templates/Challenges/components/Side-Panel.js
+++ b/client/src/templates/Challenges/components/Side-Panel.js
@@ -35,7 +35,11 @@ const propTypes = {
   guideUrl: PropTypes.string,
   initConsole: PropTypes.func.isRequired,
   instructions: PropTypes.string,
+  introPath: PropTypes.string,
+  nextChallengePath: PropTypes.string,
+  prevChallengePath: PropTypes.string,
   section: PropTypes.string,
+  showPrevNextBtns: PropTypes.bool,
   showToolPanel: PropTypes.bool,
   tests: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string,
@@ -64,9 +68,13 @@ export class SidePanel extends Component {
       title,
       description,
       instructions,
+      introPath,
       guideUrl,
+      nextChallengePath,
+      prevChallengePath,
       tests,
       section,
+      showPrevNextBtns,
       showToolPanel,
       videoUrl
     } = this.props;
@@ -74,7 +82,14 @@ export class SidePanel extends Component {
       <div className='instructions-panel' role='complementary'>
         <Spacer />
         <div>
-          <ChallengeTitle>{title}</ChallengeTitle>
+          <ChallengeTitle
+            introPath={introPath}
+            nextChallengePath={nextChallengePath}
+            prevChallengePath={prevChallengePath}
+            showPrevNextBtns={showPrevNextBtns}
+          >
+            {title}
+          </ChallengeTitle>
           <ChallengeDescription
             description={description}
             instructions={instructions}
diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css
new file mode 100644
index 0000000000..310ad4412d
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-title.css
@@ -0,0 +1,17 @@
+.challenge-title-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 1.45rem;
+}
+
+.challenge-title {
+  display: inline;
+  padding: 0 15px;
+  margin: 0;
+  flex-grow: 2;
+}
+
+.challenge-title-wrap > Button {
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/client/src/templates/Challenges/project/Show.js b/client/src/templates/Challenges/project/Show.js
index 54596c4ef1..5eb01080b7 100644
--- a/client/src/templates/Challenges/project/Show.js
+++ b/client/src/templates/Challenges/project/Show.js
@@ -100,6 +100,9 @@ export class Project extends Component {
         }
       },
       openCompletionModal,
+      pageContext: {
+        challengeMeta: { introPath, nextChallengePath, prevChallengePath }
+      },
       updateProjectFormValues
     } = this.props;
     const isFrontEnd = challengeType === frontEndProject;
@@ -113,6 +116,10 @@ export class Project extends Component {
             className='full-height'
             description={description}
             guideUrl={guideUrl}
+            introPath={introPath}
+            nextChallengePath={nextChallengePath}
+            prevChallengePath={prevChallengePath}
+            showPrevNextBtns={true}
             title={blockNameTitle}
           />
           <ProjectForm
diff --git a/client/src/templates/Challenges/project/Side-Panel.js b/client/src/templates/Challenges/project/Side-Panel.js
index 38ef38caf5..fe5e9f6909 100644
--- a/client/src/templates/Challenges/project/Side-Panel.js
+++ b/client/src/templates/Challenges/project/Side-Panel.js
@@ -5,16 +5,36 @@ import Spacer from '../../../components/helpers/Spacer';
 
 const propTypes = {
   description: PropTypes.string,
+  introPath: PropTypes.string,
   isCompleted: PropTypes.bool,
   isSignedIn: PropTypes.bool,
+  nextChallengePath: PropTypes.string,
+  prevChallengePath: PropTypes.string,
+  showPrevNextBtns: PropTypes.bool,
   title: PropTypes.string
 };
 
-export default function SidePanel({ title, description, isCompleted }) {
+export default function SidePanel({
+  title,
+  description,
+  introPath,
+  isCompleted,
+  nextChallengePath,
+  prevChallengePath,
+  showPrevNextBtns
+}) {
   return (
     <div>
       <Spacer />
-      <ChallengeTitle isCompleted={isCompleted}>{title}</ChallengeTitle>
+      <ChallengeTitle
+        introPath={introPath}
+        isCompleted={isCompleted}
+        nextChallengePath={nextChallengePath}
+        prevChallengePath={prevChallengePath}
+        showPrevNextBtns={showPrevNextBtns}
+      >
+        {title}
+      </ChallengeTitle>
       <div dangerouslySetInnerHTML={{ __html: description }} />
     </div>
   );
diff --git a/client/src/templates/Challenges/redux/index.js b/client/src/templates/Challenges/redux/index.js
index 59308775a0..8f9b618c08 100644
--- a/client/src/templates/Challenges/redux/index.js
+++ b/client/src/templates/Challenges/redux/index.js
@@ -25,6 +25,7 @@ const initialState = {
   challengeMeta: {
     id: '',
     nextChallengePath: '/',
+    prevChallengePath: '/',
     introPath: '',
     challengeType: -1
   },
diff --git a/client/utils/gatsby/challengePageCreator.js b/client/utils/gatsby/challengePageCreator.js
index 203e68feb2..91a981ec95 100644
--- a/client/utils/gatsby/challengePageCreator.js
+++ b/client/utils/gatsby/challengePageCreator.js
@@ -34,8 +34,14 @@ const views = {
 
 const getNextChallengePath = (node, index, nodeArray) => {
   const next = nodeArray[index + 1];
-  return next ? next.node.fields.slug : '/';
+  return next ? next.node.fields.slug : '/learn';
 };
+
+const getPrevChallengePath = (node, index, nodeArray) => {
+  const prev = nodeArray[index - 1];
+  return prev ? prev.node.fields.slug : '/learn';
+};
+
 const getTemplateComponent = challengeType => views[viewTypes[challengeType]];
 
 const getIntroIfRequired = (node, index, nodeArray) => {
@@ -74,6 +80,7 @@ exports.createChallengePages = createPage => ({ node }, index, thisArray) => {
         template,
         required,
         nextChallengePath: getNextChallengePath(node, index, thisArray),
+        prevChallengePath: getPrevChallengePath(node, index, thisArray),
         id
       },
       slug