feat/add-prev-next-btns-to-lessons

redirect to learn instead of home

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}

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()}

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>
   );
 }
 

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}

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;
+}

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

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>
   );

client/src/templates/Challenges/redux/index.js

@@ -25,6 +25,7 @@ const initialState = {
   challengeMeta: {
     id: '',
     nextChallengePath: '/',
+    prevChallengePath: '/',
     introPath: '',
     challengeType: -1
   },

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