created checkbox component and wired up subscribed to mailing list

.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)

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 (
+            <label htmlFor={id} className={'Checkbox__container'}>
+                <div className={'Checkbox__input-container'}>
+                    <input
+                        type={'checkbox'}
+                        className={'visuallyhidden'}
+                        id={id}
+                        onChange={this.handleOnChange}
+                        checked={checked}
+                    />
+                    {checked && (
+                        <img
+                            className={'Checkbox__check'}
+                            src={greenCheckmark}
+                            alt={'checked'}
+                        />
+                    )}
+                </div>
+                <div className={'Checkbox_label'}>{label}</div>
+            </label>
+        );
+    }
+}

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;
+}

src/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.component";

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';

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';

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 {
                     </p>
                     <div className={`NameCapture__form-wrapper`}>
                         <NameCaptureNameInput />
+                        <SubscribeToMailingListCheckbox/>
                         <div className={`NameCapture__continue-button`}>
                             <NameCaptureContinueButton />
                         </div>

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';

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 (
+            <Checkbox
+                {...this.props}
+                id='mailing-list-checkbox'
+                label={`Yes, I would like to receive periodic updates from Dan Wilt Coaching.`}
+            />
+        );
+    }
+}

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);

src/components/SubscribeToMailingListCheckbox/index.js

@@ -0,0 +1 @@
+export { default as SubscribeToMailingListCheckbox } from './SubscribeToMailingListCheckbox.container';

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';

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(

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 = () => ({

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,
         }),
     }
 );