Add modal on correct answer

common/app/routes/Hikes/components/Question.jsx

@@ -1,14 +1,15 @@
 import React, { PropTypes } from 'react';
-import { Navigation } from 'react-router';
+import { Navigation, TransitionHook } from 'react-router';
 import stampit from 'react-stampit';
 import { contain } from 'thundercats-react';
+import debugFactory from 'debug';
 import {
   Button,
   Col,
-  Row,
+  Modal,
-  Panel
+  Panel,
+  Row
 } from 'react-bootstrap';
-import debugFactory from 'debug';
 
 const debug = debugFactory('freecc:hikes');
 
@@ -41,6 +42,7 @@ export default contain(
     }
   },
   stampit(React, {
+    state: { showInfo: false },
     displayName: 'Question',
 
     propTypes: {
@@ -50,24 +52,78 @@ export default contain(
       tests: PropTypes.array
     },
 
-    onAnswer(answer, userAnswer, e) {
+    onAnswer(answer, userAnswer, info, e) {
       if (e && e.preventDefault) {
         e.preventDefault();
       }
       if (answer === userAnswer) {
         debug('correct answer!');
-        return this.onCorrectAnswer();
+        this.setState({ showInfo: true });
       }
       return debug('incorrect');
     },
 
     onCorrectAnswer() {
+      const { hikes, currentHike } = this.props;
       const { dashedName, number } = this.props.params;
-      const nextQ = +number + 1;
+      const { difficulty, tests } = currentHike;
-      this.transitionTo(`/hikes/${ dashedName }/questions/${ nextQ }`);
+      const nextQuestionIndex = +number;
+      this.setState({ showInfo: false }, () => {
+        if (tests[nextQuestionIndex]) {
+          return this.transitionTo(
+            `/hikes/${ dashedName }/questions/${ nextQuestionIndex + 1 }`
+          );
+        }
+        // next questions does not exit
+        // find next hike
+        //
+        const nextHike = hikes
+          // hikes is in oder of difficulty, lets get reverse order
+          .reverse()
+          // now lets find the hike with the difficulty right above this one
+          .reduce((lowerHike, hike) => {
+            if (hike.difficulty > difficulty) {
+              return hike;
+            }
+            return lowerHike;
+          }, null);
+
+        if (nextHike) {
+          return this.transitionTo(`${ nextHike.dashedName }`);
+        }
+        debug('next Hike was not found');
+      });
+    },
+
+    routerWillLeave(/* nextState, router, cb[optional] */) {
+      // TODO(berks): do animated transitions here stuff here
+    },
+
+    renderInfo(showInfo, info) {
+      return (
+        <Modal
+          backdrop={ false }
+          onHide={ ::this.onCorrectAnswer }
+          show={ showInfo }>
+          <Modal.Body>
+            <h3>
+              { info || 'correct!' }
+            </h3>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              block={ true }
+              bsSize='large'
+              onClick={ ::this.onCorrectAnswer }>
+              To next questions
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      );
     },
 
     render() {
+      const { showInfo } = this.state;
       const { tests } = this.props;
       const { number = '1' } = this.props.params;
 
@@ -81,17 +137,18 @@ export default contain(
             <Panel>
               <p>{ question }</p>
             </Panel>
+            { this.renderInfo(showInfo, info) }
             <Panel>
               <Button
                 bsSize='large'
                 className='pull-left'
-                onClick={ this.onAnswer.bind(this, answer, false) }>
+                onClick={ this.onAnswer.bind(this, answer, false, info) }>
                 false
               </Button>
               <Button
                 bsSize='large'
                 className='pull-right'
-                onClick={ this.onAnswer.bind(this, answer, true) }>
+                onClick={ this.onAnswer.bind(this, answer, true, info) }>
                 true
               </Button>
             </Panel>
@@ -99,5 +156,7 @@ export default contain(
         </Col>
       );
     }
-  }).compose(Navigation)
+  })
+    .compose(Navigation)
+    .compose(TransitionHook)
 );

gulpfile.js

@@ -43,6 +43,7 @@ var paths = {
     'node_modules/',
     'client/'
   ],
+
   publicJs: './public/js',
 
   loopback: {