feat(client): add prev next btns to lessons (#35485)

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

redirect to learn instead of home

* fix/button-css-properties

* fix/change-buttons-to-suggested

* fix/add-tests+change-button-to-link

Co-authored-by: ojeytonwilliams ojeytonwilliams@gmail.com

* Revert "fix/add-tests+change-button-to-link"

This reverts commit ae26504d1d.

* fix/add-tests+change-button-to-link

Co-authored-by: ojeytonwilliams <ojeytonwilliams@gmail.com>

client/src/templates/Challenges/backend/Show.js

@@ -164,6 +164,9 @@ export class BackEnd extends Component {
         }
       },
       output,
+      pageContext: {
+        challengeMeta: { introPath, nextChallengePath, prevChallengePath }
+      },
       tests,
       isSignedIn,
       executeChallenge,
@@ -181,7 +184,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({
+    challengeMeta: PropTypes.object
-      nextChallengePath: PropTypes.string
-    })
   }),
   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,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Link from '../../../components/helpers/Link';
+
+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 +29,30 @@ function ChallengeTitle({ children, isCompleted }) {
     );
   }
   return (
-    <h2 className='text-center challenge-title'>
+    <div className='challenge-title-wrap'>
-      {children || 'Happy Coding!'}
+      {showPrevNextBtns ? (
-      {icon}
+        <Link
-    </h2>
+          aria-label='Previous lesson'
+          className='btn-invert btn btn-primary'
+          to={prevChallengePath}
+        >
+          &lt;
+        </Link>
+      ) : null}
+      <h2 className='text-center challenge-title'>
+        {children || 'Happy Coding!'}
+        {icon}
+      </h2>
+      {showPrevNextBtns ? (
+        <Link
+          aria-label='Next lesson'
+          className='btn-invert btn btn-primary'
+          to={introPath ? introPath : nextChallengePath}
+        >
+          &gt;
+        </Link>
+      ) : null}
+    </div>
   );
 }
 

client/src/templates/Challenges/components/ChallengeTitle.test.js

@@ -0,0 +1,73 @@
+/* global expect */
+
+import React from 'react';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Link from '../../../components/helpers/Link';
+import renderer from 'react-test-renderer';
+
+import ChallengeTitle from './Challenge-Title';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const baseProps = {
+  children: 'title text',
+  introPath: '/intro/path',
+  isCompleted: true,
+  nextChallengePath: '/next',
+  prevChallengePath: '/prev',
+  showPrevNextBtns: true
+};
+
+describe('<ChallengeTitle/>', () => {
+  it('renders 0 <Link/>s by default', () => {
+    const titleToRender = <ChallengeTitle />;
+    const title = shallow(titleToRender);
+    expect(title.find(Link).length).toBe(0);
+  });
+
+  it('renders a previous and a next <Link/>', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(title.find(Link).length).toBe(2);
+  });
+
+  it('has a link to the previous challenge', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .first()
+        .prop('to')
+    ).toBe('/prev');
+  });
+
+  it('has a link to the next introduction if there is one', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .last()
+        .prop('to')
+    ).toBe('/intro/path');
+  });
+
+  it('has a link to the next challenge otherwise', () => {
+    const props = { ...baseProps, introPath: null };
+    const titleToRender = <ChallengeTitle {...props} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .last()
+        .prop('to')
+    ).toBe('/next');
+  });
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<ChallengeTitle {...baseProps} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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/__snapshots__/ChallengeTitle.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ChallengeTitle/> renders correctly 1`] = `
+<div
+  className="challenge-title-wrap"
+>
+  <MockedLink
+    aria-label="Previous lesson"
+    className="btn-invert btn btn-primary"
+    to="/prev"
+  >
+    &lt;
+  </MockedLink>
+  <h2
+    className="text-center challenge-title"
+  >
+    title text
+    <i
+      className="ion-checkmark-circled text-primary"
+      title="Completed"
+    />
+  </h2>
+  <MockedLink
+    aria-label="Next lesson"
+    className="btn-invert btn btn-primary"
+    to="/intro/path"
+  >
+    &gt;
+  </MockedLink>
+</div>
+`;

client/src/templates/Challenges/components/challenge-title.css

@@ -0,0 +1,14 @@
+.challenge-title-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.45rem;
+}
+
+.challenge-title {
+  padding: 0 15px;
+}
+
+.challenge-title-wrap > a {
+  align-self: flex-start;
+}

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