From ab12bdd7fe4a39561e99a13097285cb939b6a186 Mon Sep 17 00:00:00 2001 From: Dan Wilt Date: Thu, 14 Jun 2018 17:37:47 -0400 Subject: [PATCH] created checkbox component and wired up subscribed to mailing list --- .eslintrc | 2 +- src/components/Checkbox/Checkbox.component.js | 52 +++++++++++++++++++ src/components/Checkbox/Checkbox.css | 27 ++++++++++ src/components/Checkbox/check.svg | 14 +++++ src/components/Checkbox/index.js | 1 + src/components/Completed/index.js | 8 +-- src/components/EmailCapture/index.js | 6 +-- .../NameCapture/NameCapture.component.js | 2 + src/components/NameCapture/index.js | 6 +-- ...ubscribeToMailingListCheckbox.component.js | 22 ++++++++ ...ubscribeToMailingListCheckbox.container.js | 13 +++++ .../SubscribeToMailingListCheckbox/index.js | 1 + src/components/index.js | 30 ++++++----- src/selectors/quiz.selectors.js | 20 +++---- src/store/quiz/quiz.actions.js | 8 +-- src/store/quiz/quiz.reducer.js | 23 ++++---- 16 files changed, 180 insertions(+), 55 deletions(-) create mode 100644 src/components/Checkbox/Checkbox.component.js create mode 100644 src/components/Checkbox/Checkbox.css create mode 100644 src/components/Checkbox/check.svg create mode 100644 src/components/Checkbox/index.js create mode 100644 src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.component.js create mode 100644 src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.container.js create mode 100644 src/components/SubscribeToMailingListCheckbox/index.js diff --git a/.eslintrc b/.eslintrc index e5dd9e5..726aaf6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -180,7 +180,7 @@ "no-trailing-spaces":["error"], // disallow trailing whitespace at the end of lines "no-underscore-dangle":["off"], // disallow dangling underscores in identifiers "no-mixed-spaces-and-tabs":["error"], // disallow mixed spaces and tabs for indentation - "quotes": ["error", "backtick"], // specify whether double or single quotes should be used + "quotes": ["error", "single"], // specify whether double or single quotes should be used "quote-props":["off"], // require quotes around object literal property names (off by default) "semi":["error"], // require or disallow use of semicolons instead of ASI "sort-vars":["off"], // sort variables within the same declaration block (off by default) diff --git a/src/components/Checkbox/Checkbox.component.js b/src/components/Checkbox/Checkbox.component.js new file mode 100644 index 0000000..a1f6296 --- /dev/null +++ b/src/components/Checkbox/Checkbox.component.js @@ -0,0 +1,52 @@ +import React, { PureComponent } from 'react'; + +import PropTypes from 'prop-types'; + +import './Checkbox.css'; + +const greenCheckmark = require('./check.svg'); + +export default class Checkbox extends PureComponent { + static propTypes = { + onChange: PropTypes.func.isRequired, + label: PropTypes.string.isRequired, + id: PropTypes.string.isRequired, + checked: PropTypes.bool.isRequired, + }; + + static defaultProps = { + checked: false, + }; + + handleOnChange = ({ target: { checked } }) => { + const { onChange } = this.props; + + onChange(checked); + }; + + render() { + const { id, checked, label } = this.props; + + return ( + + ); + } +} diff --git a/src/components/Checkbox/Checkbox.css b/src/components/Checkbox/Checkbox.css new file mode 100644 index 0000000..1ad3927 --- /dev/null +++ b/src/components/Checkbox/Checkbox.css @@ -0,0 +1,27 @@ +.Checkbox__container { + display: flex; +} + +.Checkbox__input-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 34px; + height: 34px; + background-color: #F7F7F7; + border-radius: 5px; + border: 2px solid #F1F1F1; +} + +.Checkbox_label { + color: #333; + font-size: 1.4rem; + margin-left: 10px; +} + +.Checkbox__check { + width: 18px; + height: 14px; +} diff --git a/src/components/Checkbox/check.svg b/src/components/Checkbox/check.svg new file mode 100644 index 0000000..572903e --- /dev/null +++ b/src/components/Checkbox/check.svg @@ -0,0 +1,14 @@ + + + + check + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 0000000..559d94e --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1 @@ +export { default as Checkbox } from "./Checkbox.component"; diff --git a/src/components/Completed/index.js b/src/components/Completed/index.js index 9a3be6e..a9cf574 100644 --- a/src/components/Completed/index.js +++ b/src/components/Completed/index.js @@ -1,4 +1,4 @@ -export * from "./Completed"; -export * from "./CompletedHeader"; -export * from "./CompletedResultsList"; -export * from "./Results"; +export * from './Completed'; +export * from './CompletedHeader'; +export * from './CompletedResultsList'; +export * from './Results'; diff --git a/src/components/EmailCapture/index.js b/src/components/EmailCapture/index.js index 6ee57e5..caa7ae8 100644 --- a/src/components/EmailCapture/index.js +++ b/src/components/EmailCapture/index.js @@ -1,3 +1,3 @@ -export * from "./EmailCapture"; -export * from "./EmailCaptureContinueButton"; -export * from "./EmailCaptureEmailInput"; +export * from './EmailCapture'; +export * from './EmailCaptureContinueButton'; +export * from './EmailCaptureEmailInput'; diff --git a/src/components/NameCapture/NameCapture/NameCapture.component.js b/src/components/NameCapture/NameCapture/NameCapture.component.js index b08bba0..dcfbaea 100644 --- a/src/components/NameCapture/NameCapture/NameCapture.component.js +++ b/src/components/NameCapture/NameCapture/NameCapture.component.js @@ -3,6 +3,7 @@ import React, { PureComponent } from "react"; import { NameCaptureNameInput, NameCaptureContinueButton, + SubscribeToMailingListCheckbox, } from "src/components"; import "./NameCapture.css"; @@ -17,6 +18,7 @@ export default class NameCapture extends PureComponent {

+
diff --git a/src/components/NameCapture/index.js b/src/components/NameCapture/index.js index 9737780..2096548 100644 --- a/src/components/NameCapture/index.js +++ b/src/components/NameCapture/index.js @@ -1,3 +1,3 @@ -export * from "./NameCapture"; -export * from "./NameCaptureContinueButton"; -export * from "./NameCaptureNameInput"; +export * from './NameCapture'; +export * from './NameCaptureContinueButton'; +export * from './NameCaptureNameInput'; diff --git a/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.component.js b/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.component.js new file mode 100644 index 0000000..9b38e05 --- /dev/null +++ b/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.component.js @@ -0,0 +1,22 @@ +import React, { PureComponent } from "react"; + +import PropTypes from "prop-types"; + +import { Checkbox } from "src/components"; + +export default class SubscribeToMailingListCheckbox extends PureComponent { + static propTypes = { + onChange: PropTypes.func.isRequired, + checked: PropTypes.bool.isRequired, + }; + + render() { + return ( + + ); + } +} diff --git a/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.container.js b/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.container.js new file mode 100644 index 0000000..3bf07a8 --- /dev/null +++ b/src/components/SubscribeToMailingListCheckbox/SubscribeToMailingListCheckbox.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux'; + +import { subscribedToMailingListSelector } from 'src/selectors'; + +import { toggleSubscribedToMailingListAction as onChange } from 'src/store/quiz/quiz.actions'; + +import SubscribeToMailingListCheckbox from './SubscribeToMailingListCheckbox.component'; + +export default connect((st) => ({ + checked: subscribedToMailingListSelector(st), +}), { + onChange, +})(SubscribeToMailingListCheckbox); diff --git a/src/components/SubscribeToMailingListCheckbox/index.js b/src/components/SubscribeToMailingListCheckbox/index.js new file mode 100644 index 0000000..bc19949 --- /dev/null +++ b/src/components/SubscribeToMailingListCheckbox/index.js @@ -0,0 +1 @@ +export { default as SubscribeToMailingListCheckbox } from './SubscribeToMailingListCheckbox.container'; diff --git a/src/components/index.js b/src/components/index.js index f8e23ed..f4767df 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,14 +1,16 @@ -export * from "./ActionButton"; -export * from "./ActivityIndicator"; -export * from "./Answer"; -export * from "./App"; -export * from "./CodeFigure"; -export * from "./Completed"; -export * from "./EmailCapture"; -export * from "./NameCapture"; -export * from "./Question"; -export * from "./QuestionAnswer"; -export * from "./Quiz"; -export * from "./QuizProgressIndicator"; -export * from "./QuizQuestion"; -export * from "./TextInput"; +export * from './ActionButton'; +export * from './ActivityIndicator'; +export * from './Answer'; +export * from './App'; +export * from './Checkbox'; +export * from './CodeFigure'; +export * from './Completed'; +export * from './EmailCapture'; +export * from './NameCapture'; +export * from './Question'; +export * from './QuestionAnswer'; +export * from './Quiz'; +export * from './QuizProgressIndicator'; +export * from './QuizQuestion'; +export * from './SubscribeToMailingListCheckbox'; +export * from './TextInput'; diff --git a/src/selectors/quiz.selectors.js b/src/selectors/quiz.selectors.js index a5530ef..4ec3463 100644 --- a/src/selectors/quiz.selectors.js +++ b/src/selectors/quiz.selectors.js @@ -1,31 +1,31 @@ -import { createSelector } from "reselect"; +import { createSelector } from 'reselect'; -import { questions } from "src/questions"; +import { questions } from 'src/questions'; -import { isValidEmail } from "src/helpers"; +import { isValidEmail } from 'src/helpers'; -const quizSelector = (state) => state.quiz; +const quizSelector = ({ quiz }) => quiz; export const quizStateSelector = createSelector( quizSelector, - (quiz) => quiz.state + ({ state }) => state ); export const quizSelectedAnswerSelector = createSelector( quizSelector, - (quiz) => quiz.selectedAnswer + ({ selectedAnswer }) => selectedAnswer ); export const quizAnswersSelector = createSelector( quizSelector, - (quiz) => quiz.answers + ({ answers }) => answers ); -export const quizNameSelector = createSelector(quizSelector, (quiz) => quiz.name); +export const quizNameSelector = createSelector(quizSelector, ({ name }) => name); export const quizEmailSelector = createSelector( quizSelector, - (quiz) => quiz.email + ({ email }) => email ); export const quizEmailIsValidSelector = createSelector( @@ -45,7 +45,7 @@ export const quizQuestionIdSelector = createSelector( export const subscribedToMailingListSelector = createSelector( [quizSelector], - (quiz) => quiz.subscribedToMailingList + ({ subscribedToMailingList }) => subscribedToMailingList ); export const quizScoreSelector = createSelector( diff --git a/src/store/quiz/quiz.actions.js b/src/store/quiz/quiz.actions.js index 4c4c869..bd3538a 100644 --- a/src/store/quiz/quiz.actions.js +++ b/src/store/quiz/quiz.actions.js @@ -51,12 +51,8 @@ export const addAnswerAction = (answer) => ({ }, }); -export const subscribeToMailingListAction = () => ({ - type: `SUBSCRIBE_TO_MAILING_LIST`, -}); - -export const unsubscribeToMailingListAction = () => ({ - type: `UNSUBSCRIBE_TO_MAILING_LIST`, +export const toggleSubscribedToMailingListAction = () => ({ + type: `TOGGLE_SUBSCRIBED_TO_MAILING_LIST`, }); export const submitAnswerAction = () => ({ diff --git a/src/store/quiz/quiz.reducer.js b/src/store/quiz/quiz.reducer.js index 2a087b4..c935025 100644 --- a/src/store/quiz/quiz.reducer.js +++ b/src/store/quiz/quiz.reducer.js @@ -4,20 +4,19 @@ import { addAnswerAction, setNameAction, setEmailAction, - subscribeToMailingListAction, - unsubscribeToMailingListAction, -} from "./quiz.actions"; + toggleSubscribedToMailingListAction, +} from './quiz.actions'; -import { createReducer } from "src/helpers"; +import { createReducer } from 'src/helpers'; export default createReducer( { - state: `nameCapture`, + state: 'nameCapture', selectedAnswer: null, answers: [], - email: ``, - name: ``, - subscribedToMailingList: false, + email: '', + name: '', + subscribedToMailingList: true, }, { [setStateAction().type]: (st, { state }) => ({ @@ -40,13 +39,9 @@ export default createReducer( ...st, email, }), - [subscribeToMailingListAction().type]: (st) => ({ + [toggleSubscribedToMailingListAction().type]: (st) => ({ ...st, - subscribedToMailingList: true, - }), - [unsubscribeToMailingListAction().type]: (st) => ({ - ...st, - subscribedToMailingList: false, + subscribedToMailingList: !st.subscribedToMailingList, }), } );