added in routes

package.json

@@ -16,7 +16,7 @@
     "react-highlight": "briancappello/react-highlight#react-v16-compiled",
     "react-redux": "^5.0.7",
     "react-remarkable": "^1.1.3",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.1",
     "react-transition-group": "^2.2.1",
     "redux": "^3.7.2",

src/App.component.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import './App.css';
+
+import { Quiz, Completed } from 'src/components';
+
+class App extends Component {
+    render() {
+        return (
+            <Router basename={'/quiz'}>
+                <div>
+                    <Switch>
+                        <Route exact path={'/'} component={Quiz} />
+                        <Route path={'/completed'} component={Completed} />
+                    </Switch>
+                </div>
+            </Router>
+        );
+    }
+}
+
+export default App;

src/components/Completed/Completed/Completed.container.js

@@ -1,9 +1,13 @@
 import { connect } from 'react-redux';
 
+import { withRouter } from 'react-router-dom';
+
 import { quizNameSelector } from 'src/selectors';
 
 import CompletedResults from './Completed.component';
 
-export default connect((st) => ({
-    name: quizNameSelector(st),
-}))(CompletedResults);
+export default withRouter(
+    connect((st) => ({
+        name: quizNameSelector(st),
+    }))(CompletedResults)
+);

src/components/Completed/CompletedResultsList/CompletedResultsList.component.js

@@ -49,7 +49,7 @@ export default class CompletedResultsList extends PureComponent {
                     const answersWrapperClasses = classNames(
                         'CompletedResultsList__answers-wrapper',
                         {
-                            ['--no-grid']: !!codeFigure,
+                            '--no-grid': !!codeFigure,
                         }
                     );
 

src/components/NameCapture/NameCapture/NameCapture.component.js

@@ -3,7 +3,6 @@ import React, { PureComponent } from 'react';
 import {
     NameCaptureNameInput,
     NameCaptureContinueButton,
-    SubscribeToMailingListCheckbox,
 } from 'src/components';
 
 import './NameCapture.css';

src/components/Quiz/Quiz.component.js

@@ -21,14 +21,14 @@ export default class Quiz extends PureComponent {
     };
 
     handleOnSubmit = (e) => {
-        const { onSubmit, quizComplete } = this.props;
+        const { onSubmit, quizComplete, history } = this.props;
 
         e.preventDefault();
 
         if (!quizComplete) {
             return false;
         } else {
-            onSubmit();
+            onSubmit(history);
         }
     };
 

src/components/Quiz/Quiz.container.js

@@ -1,22 +1,26 @@
 import { connect } from 'react-redux';
 
+import { withRouter } from 'react-router-dom';
+
 import { quizStateSelector, quizIsCompleteSelector } from 'src/selectors';
 
 import { submitQuizAction as onSubmit } from 'src/store/quiz/quiz.actions';
 
 import Quiz from './Quiz.component';
 
-export default connect(
-    (st) => {
-        const state = quizStateSelector(st);
-        const quizComplete = quizIsCompleteSelector(st);
+export default withRouter(
+    connect(
+        (st) => {
+            const state = quizStateSelector(st);
+            const quizComplete = quizIsCompleteSelector(st);
 
-        return {
-            state,
-            quizComplete,
-        };
-    },
-    {
-        onSubmit,
-    }
-)(Quiz);
+            return {
+                state,
+                quizComplete,
+            };
+        },
+        {
+            onSubmit,
+        }
+    )(Quiz)
+);

src/components/QuizQuestion/QuizQuestion.component.js

@@ -50,11 +50,11 @@ export default class QuizQuestion extends PureComponent {
         const active = userAnswers.length + 1 === questionNumber;
 
         const questionClasses = classNames('QuizQuestion', {
-            ['visuallyhidden']: !active,
+            'visuallyhidden': !active,
         });
 
         const answerListClasses = classNames('QuizQuestion__answers-list', {
-            ['--grid']: answerType === 'code',
+            '--grid': answerType === 'code',
         });
 
         return (

src/components/index.js

@@ -1,7 +1,6 @@
 export * from './ActionButton';
 export * from './ActivityIndicator';
 export * from './Answer';
-export * from './App';
 export * from './Checkbox';
 export * from './CodeFigure';
 export * from './Completed';

src/index.js

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 
 import store from 'src/store';
 
-import { App } from 'src/components';
+import App from './App.component';
 
 import registerServiceWorker from './registerServiceWorker';
 

src/store/quiz/quiz.actions.js

@@ -1,4 +1,4 @@
-import { call, put, select, take } from 'redux-saga/effects';
+import { call, put, select, take, fork } from 'redux-saga/effects';
 
 import { version, questions } from 'src/questions';
 
@@ -63,8 +63,11 @@ export const submitNameAction = () => ({
     type: 'SUBMIT_NAME',
 });
 
-export const submitQuizAction = () => ({
+export const submitQuizAction = (history) => ({
     type: 'SUBMIT_QUIZ_ACTION',
+    payload: {
+        history,
+    },
 });
 
 function* addAnswer() {
@@ -113,14 +116,18 @@ export default function*() {
     yield put(setStateAction('question'));
 
     for (let i = 0; i < questions.length; i++) {
+        yield take(setSelectedAnswerAction().type);
+
         yield take(submitAnswerAction().type);
 
         yield* addAnswer();
     }
 
     yield put(setStateAction('emailCapture'));
 
-    yield take(submitQuizAction().type);
+    const { payload: { history } } = yield take(submitQuizAction().type);
+
+    yield fork(submitQuiz);
 
-    yield* submitQuiz();
+    yield call(history.push, '/completed');
 }

yarn.lock

@@ -3818,7 +3818,7 @@ [email protected]:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
-hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
 
@@ -4079,7 +4079,7 @@ invariant@^2.0.0, invariant@^2.2.2:
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.1:
+invariant@^2.2.1, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -6259,7 +6259,7 @@ prop-types@^15.5.10, prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1:
+prop-types@^15.5.8, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -6497,28 +6497,28 @@ react-remarkable@^1.1.3:
   dependencies:
     remarkable "^1.x"
 
-react-router-dom@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
+react-router-dom@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
   dependencies:
     history "^4.7.2"
-    invariant "^2.2.2"
+    invariant "^2.2.4"
     loose-envify "^1.3.1"
-    prop-types "^15.5.4"
-    react-router "^4.2.0"
-    warning "^3.0.0"
+    prop-types "^15.6.1"
+    react-router "^4.3.1"
+    warning "^4.0.1"
 
-react-router@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"
+react-router@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
   dependencies:
     history "^4.7.2"
-    hoist-non-react-statics "^2.3.0"
-    invariant "^2.2.2"
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.2.4"
     loose-envify "^1.3.1"
     path-to-regexp "^1.7.0"
-    prop-types "^15.5.4"
-    warning "^3.0.0"
+    prop-types "^15.6.1"
+    warning "^4.0.1"
 
 [email protected]:
   version "1.1.1"
@@ -7905,6 +7905,12 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"