gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Tom
2019-07-18 04:46:00 -05:00
committed by mrugesh
parent eba8953037
commit 8757deb56c
11 changed files with 233 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/templates/Challenges/backend/Show.js
View File

@ -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}

13
client/src/templates/Challenges/classic/Show.js
View File

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

38
client/src/templates/Challenges/components/Challenge-Title.js
View File

@ -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 (
<div className='challenge-title-wrap'>
{showPrevNextBtns ? (
<Link
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>
);
}

73
client/src/templates/Challenges/components/ChallengeTitle.test.js Normal file
View File

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

17
client/src/templates/Challenges/components/Side-Panel.js
View File

@ -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}

31
client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap Normal file
View File

@ -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>
`;

14
client/src/templates/Challenges/components/challenge-title.css Normal file
View File

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

7
client/src/templates/Challenges/project/Show.js
View File

@ -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

24
client/src/templates/Challenges/project/Side-Panel.js
View File

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

1
client/src/templates/Challenges/redux/index.js
View File

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

9
client/utils/gatsby/challengePageCreator.js
View File

@ -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