From cd3ef998a64e66b05de13de757b6c183821bbd00 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Thu, 19 Sep 2019 15:17:44 +0200 Subject: [PATCH] fix: rollback react-hotkeys and remove buttons --- client/package-lock.json | 6 +- client/package.json | 2 +- .../src/templates/Challenges/classic/Show.js | 10 -- .../Challenges/components/Challenge-Title.js | 50 ++----- .../components/ChallengeTitle.test.js | 57 +------- .../Challenges/components/Side-Panel.js | 16 +-- .../__snapshots__/ChallengeTitle.test.js.snap | 136 ++++++++---------- .../Challenges/components/challenge-title.css | 12 -- .../Challenges/project/Side-Panel.js | 25 ++++ .../Challenges/projects/backend/Show.js | 9 +- 10 files changed, 100 insertions(+), 223 deletions(-) create mode 100644 client/src/templates/Challenges/project/Side-Panel.js diff --git a/client/package-lock.json b/client/package-lock.json index 7b42127fcf..775d03bb41 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -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" }, diff --git a/client/package.json b/client/package.json index 34d2587b18..8eb26b0134 100644 --- a/client/package.json +++ b/client/package.json @@ -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", diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js index 409dcaae2d..b377695e38 100644 --- a/client/src/templates/Challenges/classic/Show.js +++ b/client/src/templates/Challenges/classic/Show.js @@ -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 ( - {showPrevNextBtns ? ( - - < - +

+ {children || 'Happy Coding!'} + {isCompleted ? ( + ) : null} -

- {children || 'Happy Coding!'} - {isCompleted ? ( - - ) : null} -

- {showPrevNextBtns ? ( - - > - - ) : null} - +

); } diff --git a/client/src/templates/Challenges/components/ChallengeTitle.test.js b/client/src/templates/Challenges/components/ChallengeTitle.test.js index 1a6b295cf9..01ed2103b1 100644 --- a/client/src/templates/Challenges/components/ChallengeTitle.test.js +++ b/client/src/templates/Challenges/components/ChallengeTitle.test.js @@ -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('', () => { - it('renders 0 s by default', () => { - const titleToRender = ; - const title = shallow(titleToRender); - expect(title.find(Link).length).toBe(0); - }); - - it('renders a previous and a next ', () => { - const titleToRender = ; - const title = shallow(titleToRender); - expect(title.find(Link).length).toBe(2); - }); - - it('has a link to the previous challenge', () => { - const titleToRender = ; - 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 = ; - 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 = ; - const title = shallow(titleToRender); - expect( - title - .find(Link) - .last() - .prop('to') - ).toBe('/next'); - }); - it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js index fd6072afd2..bbbf037ecf 100644 --- a/client/src/templates/Challenges/components/Side-Panel.js +++ b/client/src/templates/Challenges/components/Side-Panel.js @@ -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 (
- + {title} renders correctly 1`] = ` -
- - < - -

- title text - - Passed - - + - - - Passed - - - - - - -

- - > - -
+ + + Passed + + + + + + + `; diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css index 637d034a37..27360e5cf7 100644 --- a/client/src/templates/Challenges/components/challenge-title.css +++ b/client/src/templates/Challenges/components/challenge-title.css @@ -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; -} diff --git a/client/src/templates/Challenges/project/Side-Panel.js b/client/src/templates/Challenges/project/Side-Panel.js new file mode 100644 index 0000000000..f5648d8a0d --- /dev/null +++ b/client/src/templates/Challenges/project/Side-Panel.js @@ -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 ( +
+ + {title} +
+
+ ); +} + +SidePanel.displayName = 'ProjectSidePanel'; +SidePanel.propTypes = propTypes; diff --git a/client/src/templates/Challenges/projects/backend/Show.js b/client/src/templates/Challenges/projects/backend/Show.js index f856516bd9..8ca5625b80 100644 --- a/client/src/templates/Challenges/projects/backend/Show.js +++ b/client/src/templates/Challenges/projects/backend/Show.js @@ -198,14 +198,7 @@ export class BackEnd extends Component { - - {blockNameTitle} - + {blockNameTitle}