From 222c0d14708d32ff8cc6aee0a2473757df2e90d6 Mon Sep 17 00:00:00 2001 From: Dan Wilt Date: Thu, 15 Feb 2018 12:59:27 -0500 Subject: [PATCH] more component setup --- src/components/App/App.js | 4 +-- .../AssessmentQuiz.component.js | 23 ------------- .../AssessmentQuiz.container.js | 5 --- .../AssessmentQuiz/AssessmentQuiz/index.js | 1 - .../VariableDeclarationQuestion.container.js | 5 --- .../VariableDeclarationQuestion/index.js | 1 - src/components/AssessmentQuiz/index.js | 2 -- .../QuestionAnswer.component.js | 33 +++++++++++++++++++ .../QuestionAnswer/QuestionAnswer.css | 3 ++ src/components/QuestionAnswer/index.js | 1 + .../VariableDeclaration.component.js} | 7 ++-- .../VariableDeclaration.container.js | 5 +++ .../Questions/VariableDeclaration/index.js | 1 + src/components/Questions/index.js | 1 + src/components/Quiz/Quiz.component.js | 10 ++---- .../QuizQuestion/QuizQuestion.component.js | 15 +++++---- src/components/index.js | 3 +- 17 files changed, 62 insertions(+), 58 deletions(-) delete mode 100644 src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.component.js delete mode 100644 src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.container.js delete mode 100644 src/components/AssessmentQuiz/AssessmentQuiz/index.js delete mode 100644 src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.container.js delete mode 100644 src/components/AssessmentQuiz/VariableDeclarationQuestion/index.js delete mode 100644 src/components/AssessmentQuiz/index.js create mode 100644 src/components/QuestionAnswer/QuestionAnswer.component.js create mode 100644 src/components/QuestionAnswer/QuestionAnswer.css create mode 100644 src/components/QuestionAnswer/index.js rename src/components/{AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js => Questions/VariableDeclaration/VariableDeclaration.component.js} (78%) create mode 100644 src/components/Questions/VariableDeclaration/VariableDeclaration.container.js create mode 100644 src/components/Questions/VariableDeclaration/index.js create mode 100644 src/components/Questions/index.js diff --git a/src/components/App/App.js b/src/components/App/App.js index 5a94e0e..13198d4 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -2,14 +2,14 @@ import React, { Component } from 'react'; import './App.css'; import { - AssessmentQuiz + Quiz } from 'components'; class App extends Component { render() { return (
- +
); } diff --git a/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.component.js b/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.component.js deleted file mode 100644 index 1324e21..0000000 --- a/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.component.js +++ /dev/null @@ -1,23 +0,0 @@ -import React, { PureComponent } from 'react'; - -import PropTypes from 'prop-types'; - -import { - Quiz, - VariableDeclarationQuestion, -} from 'components'; - - -export default class AssessmentQuiz extends PureComponent { - static propTypes = {}; - - render() { - const {} = this.props; - - return ( - - - - ); - } -} diff --git a/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.container.js b/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.container.js deleted file mode 100644 index f60cad2..0000000 --- a/src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.container.js +++ /dev/null @@ -1,5 +0,0 @@ -import { connect } from 'react-redux'; - -import AssessmentQuiz from './AssessmentQuiz.component'; - -export default AssessmentQuiz; diff --git a/src/components/AssessmentQuiz/AssessmentQuiz/index.js b/src/components/AssessmentQuiz/AssessmentQuiz/index.js deleted file mode 100644 index 478fa71..0000000 --- a/src/components/AssessmentQuiz/AssessmentQuiz/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as AssessmentQuiz } from './AssessmentQuiz.container'; diff --git a/src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.container.js b/src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.container.js deleted file mode 100644 index 5017c0f..0000000 --- a/src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.container.js +++ /dev/null @@ -1,5 +0,0 @@ -import { connect } from 'react-redux'; - -import VariableDeclarationQuestion from './VariableDeclarationQuestion.component'; - -export default VariableDeclarationQuestion; diff --git a/src/components/AssessmentQuiz/VariableDeclarationQuestion/index.js b/src/components/AssessmentQuiz/VariableDeclarationQuestion/index.js deleted file mode 100644 index 462f431..0000000 --- a/src/components/AssessmentQuiz/VariableDeclarationQuestion/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as VariableDeclarationQuestion } from './VariableDeclarationQuestion.container'; diff --git a/src/components/AssessmentQuiz/index.js b/src/components/AssessmentQuiz/index.js deleted file mode 100644 index 9777c0c..0000000 --- a/src/components/AssessmentQuiz/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './AssessmentQuiz'; -export * from './VariableDeclarationQuestion'; diff --git a/src/components/QuestionAnswer/QuestionAnswer.component.js b/src/components/QuestionAnswer/QuestionAnswer.component.js new file mode 100644 index 0000000..48ecb51 --- /dev/null +++ b/src/components/QuestionAnswer/QuestionAnswer.component.js @@ -0,0 +1,33 @@ +import React, { PureComponent } from 'react'; + +import Highlight from 'react-highlight'; + +import Markdown from 'react-remarkable'; + +import PropTypes from 'prop-types'; + +import './QuestionAnswer.css'; + +export default class QuestionAnswer extends PureComponent { + static propTypes = { + text: PropTypes.string.isRequired, + type: PropTypes.oneOf([ + `code`, + `markdown`, + ]), + }; + + static defaultProps = { + type: `markdown`, + }; + + render() { + const { type, text } = this.props; + + return type === `code` ? ( + {text} + ) : ( + {text} + ); + } +} diff --git a/src/components/QuestionAnswer/QuestionAnswer.css b/src/components/QuestionAnswer/QuestionAnswer.css new file mode 100644 index 0000000..a947534 --- /dev/null +++ b/src/components/QuestionAnswer/QuestionAnswer.css @@ -0,0 +1,3 @@ +.QuestionAnswer { + +} \ No newline at end of file diff --git a/src/components/QuestionAnswer/index.js b/src/components/QuestionAnswer/index.js new file mode 100644 index 0000000..f2f55ba --- /dev/null +++ b/src/components/QuestionAnswer/index.js @@ -0,0 +1 @@ +export { default as QuestionAnswer } from './QuestionAnswer.component'; diff --git a/src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js b/src/components/Questions/VariableDeclaration/VariableDeclaration.component.js similarity index 78% rename from src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js rename to src/components/Questions/VariableDeclaration/VariableDeclaration.component.js index e0d8469..2305536 100644 --- a/src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js +++ b/src/components/Questions/VariableDeclaration/VariableDeclaration.component.js @@ -45,18 +45,17 @@ const answers = [ }, ]; +const incorrectFeedback = `This is a basic question. If this wasn't a mistake input, you need to learn the fundamentals of Javascript.`; -export default class VariableDeclarationQuestion extends PureComponent { - static propTypes = {}; +export default class VariableDeclaration extends PureComponent { render() { - const {} = this.props; - return ( ); } diff --git a/src/components/Questions/VariableDeclaration/VariableDeclaration.container.js b/src/components/Questions/VariableDeclaration/VariableDeclaration.container.js new file mode 100644 index 0000000..7e0fae0 --- /dev/null +++ b/src/components/Questions/VariableDeclaration/VariableDeclaration.container.js @@ -0,0 +1,5 @@ +import { connect } from 'react-redux'; + +import VariableDeclaration from './VariableDeclaration.component'; + +export default VariableDeclaration; diff --git a/src/components/Questions/VariableDeclaration/index.js b/src/components/Questions/VariableDeclaration/index.js new file mode 100644 index 0000000..c406f35 --- /dev/null +++ b/src/components/Questions/VariableDeclaration/index.js @@ -0,0 +1 @@ +export { default as VariableDeclaration } from './VariableDeclaration.container'; diff --git a/src/components/Questions/index.js b/src/components/Questions/index.js new file mode 100644 index 0000000..e828eef --- /dev/null +++ b/src/components/Questions/index.js @@ -0,0 +1 @@ +export * from './VariableDeclaration'; diff --git a/src/components/Quiz/Quiz.component.js b/src/components/Quiz/Quiz.component.js index 0ac8c96..442bb6f 100644 --- a/src/components/Quiz/Quiz.component.js +++ b/src/components/Quiz/Quiz.component.js @@ -3,22 +3,16 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { - QuizQuestion + VariableDeclaration, } from 'components'; import './Quiz.css'; export default class Quiz extends PureComponent { - static propTypes = { - children: PropTypes.array, - }; - render() { - const {children} = this.props; - return (
- {children} +
); } diff --git a/src/components/QuizQuestion/QuizQuestion.component.js b/src/components/QuizQuestion/QuizQuestion.component.js index 7726cf2..ab070de 100644 --- a/src/components/QuizQuestion/QuizQuestion.component.js +++ b/src/components/QuizQuestion/QuizQuestion.component.js @@ -4,6 +4,10 @@ import Highlight from 'react-highlight'; import Markdown from 'react-remarkable'; +import { + QuestionAnswer, +} from 'components'; + import 'highlight.js/styles/github-gist.css'; import PropTypes from 'prop-types'; @@ -14,13 +18,12 @@ export default class QuizQuestion extends PureComponent { static propTypes = { codeFigure: PropTypes.string, question: PropTypes.string.isRequired, - answers: PropTypes.arrayOf(PropTypes.shape({ - text: PropTypes.string.isRequired, - })) + answers: PropTypes.array, + incorrectFeedback: PropTypes.node, }; render() { - const { codeFigure, question, answers } = this.props; + const { codeFigure, question, answers, incorrectFeedback } = this.props; return (
@@ -33,10 +36,10 @@ export default class QuizQuestion extends PureComponent { {question}
    - {answers.map(({ text }, i) => { + {answers.map((answer = {}, i) => { return (
  1. - {text} +
    2. ); })} diff --git a/src/components/index.js b/src/components/index.js index 993f8f0..920b355 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,5 @@ export * from './App'; -export * from './AssessmentQuiz'; +export * from './QuestionAnswer'; +export * from './Questions'; export * from './Quiz'; export * from './QuizQuestion';