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

fix: rollback react-hotkeys and remove buttons

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2019-09-19 15:17:44 +02:00
committed by mrugesh
parent 465f206a9d
commit cd3ef998a6
10 changed files with 100 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/package-lock.json generated
View File

@ -16613,9 +16613,9 @@
}
},
"react-hotkeys": {
"version": "2.0.0-pre9",
"resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre9.tgz",
"integrity": "sha512-YujzB+kGB5F6rq6/NkNN2t3uSwYfBsC9qWligGKyDe7roMSmzFYO2N88mwSc+9zmHhy/ZrDyB+aqbzVIaK8haw==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
"integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
"requires": {
"prop-types": "^15.6.1"
},

2
client/package.json
View File

@ -53,7 +53,7 @@
"react-final-form": "^6.3.0",
"react-ga": "^2.6.0",
"react-helmet": "^5.2.1",
"react-hotkeys": "^2.0.0-pre9",
"react-hotkeys": "^2.0.0",
"react-identicons": "^1.1.7",
"react-instantsearch-dom": "^5.7.0",
"react-monaco-editor": "^0.30.1",

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

@ -199,12 +199,6 @@ class ShowClassic extends Component {
instructions
} = this.getChallenge();
const {
introPath,
nextChallengePath,
prevChallengePath
} = this.props.pageContext.challengeMeta;
const { forumTopicId, title } = this.getChallenge();
return (
<SidePanel
@ -212,11 +206,7 @@ class ShowClassic extends Component {
description={description}
guideUrl={getGuideUrl({ forumTopicId, title })}
instructions={instructions}
introPath={introPath}
nextChallengePath={nextChallengePath}
prevChallengePath={prevChallengePath}
section={dasherize(blockName)}
showPrevNextBtns={true}
showToolPanel={showToolPanel}
title={this.getBlockNameTitle()}
videoUrl={this.getVideoUrl()}

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

@ -1,38 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from '../../../components/helpers/Link';
import './challenge-title.css';
import GreenPass from '../../../assets/icons/GreenPass';
const propTypes = {
children: PropTypes.string,
introPath: PropTypes.string,
isCompleted: PropTypes.bool,
nextChallengePath: PropTypes.string,
prevChallengePath: PropTypes.string,
showPrevNextBtns: PropTypes.bool
isCompleted: PropTypes.bool
};
function ChallengeTitle({
children,
introPath,
isCompleted,
nextChallengePath,
prevChallengePath,
showPrevNextBtns
}) {
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!'}
{isCompleted ? (
@ -41,16 +19,6 @@ function ChallengeTitle({
/>
) : null}
</h2>
{showPrevNextBtns ? (
<Link
aria-label='Next lesson'
className='btn-invert btn btn-primary'
to={introPath ? introPath : nextChallengePath}
>
&gt;
</Link>
) : null}
</div>
);
}

57
client/src/templates/Challenges/components/ChallengeTitle.test.js
View File

@ -1,71 +1,16 @@
/* 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
isCompleted: 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();

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

@ -26,12 +26,8 @@ const propTypes = {
description: PropTypes.string,
guideUrl: PropTypes.string,
instructions: PropTypes.string,
introPath: PropTypes.string,
isChallengeCompleted: PropTypes.bool,
nextChallengePath: PropTypes.string,
prevChallengePath: PropTypes.string,
section: PropTypes.string,
showPrevNextBtns: PropTypes.bool,
showToolPanel: PropTypes.bool,
tests: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string,
@ -61,27 +57,17 @@ export class SidePanel extends Component {
title,
description,
instructions,
introPath,
isChallengeCompleted,
guideUrl,
nextChallengePath,
prevChallengePath,
tests,
section,
showPrevNextBtns,
showToolPanel,
videoUrl
} = this.props;
return (
<div className='instructions-panel' role='complementary'>
<div>
<ChallengeTitle
introPath={introPath}
isCompleted={isChallengeCompleted}
nextChallengePath={nextChallengePath}
prevChallengePath={prevChallengePath}
showPrevNextBtns={showPrevNextBtns}
>
<ChallengeTitle isCompleted={isChallengeCompleted}>
{title}
</ChallengeTitle>
<ChallengeDescription

24
client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
View File

@ -1,19 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ChallengeTitle/> renders correctly 1`] = `
<div
className="challenge-title-wrap"
>
<a
aria-label="Previous lesson"
className="btn-invert btn btn-primary"
href="/prev"
>
&lt;
</a>
<h2
<h2
className="text-center challenge-title"
>
>
title text
<span
className="sr-only"
@ -73,13 +63,5 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
/>
</g>
</svg>
</h2>
<a
aria-label="Next lesson"
className="btn-invert btn btn-primary"
href="/intro/path"
>
&gt;
</a>
</div>
</h2>
`;

12
client/src/templates/Challenges/components/challenge-title.css
View File

@ -1,15 +1,3 @@
.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 {
margin-top: 10px;
align-self: flex-start;
}

25
client/src/templates/Challenges/project/Side-Panel.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import ChallengeTitle from '../components/Challenge-Title';
import Spacer from '../../../components/helpers/Spacer';
const propTypes = {
description: PropTypes.string,
introPath: PropTypes.string,
isCompleted: PropTypes.bool,
isSignedIn: PropTypes.bool,
title: PropTypes.string
};
export default function SidePanel({ title, description, isCompleted }) {
return (
<div>
<Spacer />
<ChallengeTitle isCompleted={isCompleted}>{title}</ChallengeTitle>
<div dangerouslySetInnerHTML={{ __html: description }} />
</div>
);
}
SidePanel.displayName = 'ProjectSidePanel';
SidePanel.propTypes = propTypes;

9
client/src/templates/Challenges/projects/backend/Show.js
View File

@ -198,14 +198,7 @@ export class BackEnd extends Component {
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer />
<ChallengeTitle
introPath={introPath}
nextChallengePath={nextChallengePath}
prevChallengePath={prevChallengePath}
showPrevNextBtns={true}
>
{blockNameTitle}
</ChallengeTitle>
<ChallengeTitle>{blockNameTitle}</ChallengeTitle>
<ChallengeDescription
description={description}
instructions={instructions}