From 20ab736806311300eeb28324b1a888115e99c3ef Mon Sep 17 00:00:00 2001 From: Alexey Berezin Date: Thu, 2 May 2019 23:48:49 +0300 Subject: [PATCH 1/9] refactor: remove answerId as uuid is the same --- __tests__/Layout.test.js | 2 -- __tests__/middleware/submit.test.js | 4 ---- __tests__/pages/Game.test.js | 4 ---- __tests__/pages/__snapshots__/Game.test.js.snap | 8 -------- __tests__/reducers/reducers.test.js | 3 --- src/middleware/submit.js | 1 - src/store/index.js | 1 - stories/Percentage.stories.js | 1 - stories/ProgressBar.stories.js | 1 - 9 files changed, 25 deletions(-) diff --git a/__tests__/Layout.test.js b/__tests__/Layout.test.js index 936fb35..c625c1e 100644 --- a/__tests__/Layout.test.js +++ b/__tests__/Layout.test.js @@ -18,7 +18,6 @@ const patterns = [ codeES5: 'Code ES5 - Prototype', codeES6: 'Code ES6 - Prototype', answered: false, - answerId: null, correct: null }, @@ -29,7 +28,6 @@ const patterns = [ codeES5: 'Code ES5 - Singleton', codeES6: 'Code ES6 - Singleton', answered: false, - answerId: null, correct: null } ]; diff --git a/__tests__/middleware/submit.test.js b/__tests__/middleware/submit.test.js index 101c630..1ffef08 100644 --- a/__tests__/middleware/submit.test.js +++ b/__tests__/middleware/submit.test.js @@ -12,7 +12,6 @@ const patterns = [ codeES5: 'Code ES5', codeES6: 'Code ES6', answered: false, - answerId: null, correct: null }, @@ -23,7 +22,6 @@ const patterns = [ codeES5: 'Code ES5', codeES6: 'Code ES6', answered: false, - answerId: null, correct: null } ]; @@ -45,7 +43,6 @@ describe('Submit middleware', () => { payload: { currentIndex: 0, recentlyAnswered: { - answerId: 'abc123', answered: true, correct: true, name: 'Prototype', @@ -54,7 +51,6 @@ describe('Submit middleware', () => { }, remainingPatterns: [ { - answerId: null, answered: false, codeES5: 'Code ES5', codeES6: 'Code ES6', diff --git a/__tests__/pages/Game.test.js b/__tests__/pages/Game.test.js index 9ae91c6..3875291 100644 --- a/__tests__/pages/Game.test.js +++ b/__tests__/pages/Game.test.js @@ -19,7 +19,6 @@ const patterns = [ codeES5: 'Code ES5 - Prototype', codeES6: 'Code ES6 - Prototype', answered: false, - answerId: null, correct: null }, @@ -30,7 +29,6 @@ const patterns = [ codeES5: 'Code ES5 - Singleton', codeES6: 'Code ES6 - Singleton', answered: false, - answerId: null, correct: null } ]; @@ -161,7 +159,6 @@ describe('Game page - RESULTS', () => { codeES5: 'Code ES5 - Prototype', codeES6: 'Code ES6 - Prototype', answered: true, - answerId: 'abc123', correct: true }, @@ -172,7 +169,6 @@ describe('Game page - RESULTS', () => { codeES5: 'Code ES5 - Singleton', codeES6: 'Code ES6 - Singleton', answered: true, - answerId: 'abc123', correct: false } ]; diff --git a/__tests__/pages/__snapshots__/Game.test.js.snap b/__tests__/pages/__snapshots__/Game.test.js.snap index bf29e24..aab1229 100644 --- a/__tests__/pages/__snapshots__/Game.test.js.snap +++ b/__tests__/pages/__snapshots__/Game.test.js.snap @@ -4,7 +4,6 @@ exports[`Game page - GAME - DARK style renders a component 1`] = ` component 1`] = remaining={ Array [ Object { - "answerId": null, "answered": false, "codeES5": "Code ES5 - Singleton", "codeES6": "Code ES6 - Singleton", @@ -461,7 +459,6 @@ exports[`Game page - GAME - LIGHT style renders a component 1`] = ` component 1`] remaining={ Array [ Object { - "answerId": null, "answered": false, "codeES5": "Code ES5 - Singleton", "codeES6": "Code ES6 - Singleton", @@ -987,7 +983,6 @@ exports[`Game page - RESULTS renders a component 1`] = ` answers={ Array [ Object { - "answerId": "abc123", "answered": true, "codeES5": "Code ES5 - Prototype", "codeES6": "Code ES6 - Prototype", @@ -997,7 +992,6 @@ exports[`Game page - RESULTS renders a component 1`] = ` "uuid": "abc123", }, Object { - "answerId": "abc123", "answered": true, "codeES5": "Code ES5 - Singleton", "codeES6": "Code ES6 - Singleton", @@ -1078,7 +1072,6 @@ exports[`Game page - RESULTS renders a component 1`] = ` answers={ Array [ Object { - "answerId": "abc123", "answered": true, "codeES5": "Code ES5 - Prototype", "codeES6": "Code ES6 - Prototype", @@ -1088,7 +1081,6 @@ exports[`Game page - RESULTS renders a component 1`] = ` "uuid": "abc123", }, Object { - "answerId": "abc123", "answered": true, "codeES5": "Code ES5 - Singleton", "codeES6": "Code ES6 - Singleton", diff --git a/__tests__/reducers/reducers.test.js b/__tests__/reducers/reducers.test.js index 7e9a6f1..7a754c3 100644 --- a/__tests__/reducers/reducers.test.js +++ b/__tests__/reducers/reducers.test.js @@ -14,7 +14,6 @@ const answers = [ type: 'behavioral', answered: true, correct: true, - answerId: 'ba2ca6b0-0c86-4573-baf0-60f33ce6e947', uuid: 'ba2ca6b0-0c86-4573-baf0-60f33ce6e947' }, { @@ -22,7 +21,6 @@ const answers = [ type: 'behavioral', answered: false, correct: null, - answerId: null, uuid: 'eb9427c5-0167-4d65-a99b-a5ffadf5fd46' }, { @@ -30,7 +28,6 @@ const answers = [ type: 'creational', answered: false, correct: null, - answerId: null, uuid: 'slearknbqarlnbqasOLdnv' } ]; diff --git a/src/middleware/submit.js b/src/middleware/submit.js index 9a7c5d5..cb12a7f 100644 --- a/src/middleware/submit.js +++ b/src/middleware/submit.js @@ -15,7 +15,6 @@ export const submitMiddleware = ({ getState }) => next => action => { const recentlyAnswered = { ...filtered, answered: true, - answerId: action.payload, correct: action.payload === progress.current.uuid }; diff --git a/src/store/index.js b/src/store/index.js index 1b40e46..e858cdc 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -16,7 +16,6 @@ export const answers = patterns.map(pattern => ({ ...pattern, answered: false, correct: null, - answerId: null, uuid: uuid() })); diff --git a/stories/Percentage.stories.js b/stories/Percentage.stories.js index a8c1be3..d634f21 100644 --- a/stories/Percentage.stories.js +++ b/stories/Percentage.stories.js @@ -8,7 +8,6 @@ const initialArray = (n, isAnswered, isCorrect) => { return arr.map((x, i) => { return { patternId: null, - answerId: null, answered: isAnswered, correct: isCorrect, uuid: i diff --git a/stories/ProgressBar.stories.js b/stories/ProgressBar.stories.js index 7084cbf..9f2d6f8 100644 --- a/stories/ProgressBar.stories.js +++ b/stories/ProgressBar.stories.js @@ -8,7 +8,6 @@ const initialArray = (n, isAnswered, isCorrect) => { return arr.map((x, i) => { return { patternId: null, - answerId: null, answered: isAnswered, correct: isCorrect, uuid: i From 7aaa3ddab33816c1f498f47bd8c79d1607c2a6de Mon Sep 17 00:00:00 2001 From: Alexey Berezin Date: Fri, 3 May 2019 00:26:41 +0300 Subject: [PATCH 2/9] refactor: return component for Code --- src/components/Code.jsx | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/components/Code.jsx b/src/components/Code.jsx index 558698c..89b4a01 100644 --- a/src/components/Code.jsx +++ b/src/components/Code.jsx @@ -7,25 +7,21 @@ import { getJS, getCurrent } from '../selectors'; SyntaxHighlighter.registerLanguage('javascript', js); -const Code = props => { - const { js, current, style } = props; +export const Code = ({ js, current, style }) => ( + + {js === 'es5' && ( + + {current.codeES5} + + )} - return ( - - {js === 'es5' && ( - - {current.codeES5} - - )} - - {js === 'es6' && ( - - {current.codeES6} - - )} - - ); -}; + {js === 'es6' && ( + + {current.codeES6} + + )} + +); Code.propTypes = { js: PropTypes.string.isRequired, From 14a2f343bb35f462c7f8d0e0c20765e74ae8692a Mon Sep 17 00:00:00 2001 From: Alexey Berezin Date: Fri, 3 May 2019 00:37:30 +0300 Subject: [PATCH 3/9] prod: add 2 components: IncorrectAnswers & IncorrectCode --- src/components/IncorrectAnswers.jsx | 23 +++++++++++++++ src/components/IncorrectCode.jsx | 44 +++++++++++++++++++++++++++++ src/pages/Game.jsx | 2 ++ 3 files changed, 69 insertions(+) create mode 100644 src/components/IncorrectAnswers.jsx create mode 100644 src/components/IncorrectCode.jsx diff --git a/src/components/IncorrectAnswers.jsx b/src/components/IncorrectAnswers.jsx new file mode 100644 index 0000000..b278d72 --- /dev/null +++ b/src/components/IncorrectAnswers.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { getAnswers, getPatterns } from '../selectors'; +import IncorrectCode from './IncorrectCode'; + +export const IncorrectAnswers = ({ answers, style }) => { + const incorrectAnswers = answers.filter(answer => !answer.correct); + + return incorrectAnswers.map(({ uuid }) => ( + + )); +}; + +IncorrectAnswers.propTypes = { + answers: PropTypes.array.isRequired, + style: PropTypes.object.isRequired +}; + +export default connect(state => ({ + answers: getAnswers(state), + patterns: getPatterns(state) +}))(IncorrectAnswers); diff --git a/src/components/IncorrectCode.jsx b/src/components/IncorrectCode.jsx new file mode 100644 index 0000000..3add44d --- /dev/null +++ b/src/components/IncorrectCode.jsx @@ -0,0 +1,44 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; +import js from 'react-syntax-highlighter/dist/languages/hljs/javascript'; +import { getJS, getPatterns } from '../selectors'; + +SyntaxHighlighter.registerLanguage('javascript', js); + +const Code = ({ uuid, patterns, js, style }) => { + const current = patterns.find(pattern => pattern.uuid === uuid); + + if (!current) { + return null; + } + + return ( + + {js === 'es5' && ( + + {current.codeES5} + + )} + + {js === 'es6' && ( + + {current.codeES6} + + )} + + ); +}; + +Code.propTypes = { + js: PropTypes.string.isRequired, + patterns: PropTypes.array.isRequired, + style: PropTypes.object.isRequired, + uuid: PropTypes.string.isRequired +}; + +export default connect(state => ({ + js: getJS(state), + patterns: getPatterns(state) +}))(Code); diff --git a/src/pages/Game.jsx b/src/pages/Game.jsx index 062c063..5fe66be 100644 --- a/src/pages/Game.jsx +++ b/src/pages/Game.jsx @@ -10,6 +10,7 @@ import ProgressBar from '../components/ProgressBar'; import Code from '../components/Code'; import Result from '../components/Result'; import Percentage from '../components/Percentage'; +import IncorrectAnswers from '../components/IncorrectAnswers'; import Button from '../components/Button'; const Intro = styled.div` @@ -87,6 +88,7 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {