First question loads

common/app/Cat.js

@@ -2,10 +2,17 @@ import { Cat } from 'thundercats';
 import stamp from 'stampit';
 import { Disposable, Observable } from 'rx';
 
+import { postJSON$ } from '../utils/ajax-stream.js';
 import { AppActions, AppStore } from './flux';
 import { HikesActions } from './routes/Hikes/flux';
 import { JobActions, JobsStore} from './routes/Jobs/flux';
 
+const ajaxStamp = stamp({
+  methods: {
+    postJSON$: postJSON$
+  }
+});
+
 export default Cat().init(({ instance: cat, args: [services] }) => {
   const serviceStamp = stamp({
     methods: {
@@ -30,7 +37,7 @@ export default Cat().init(({ instance: cat, args: [services] }) => {
     }
   });
 
-  cat.register(HikesActions.compose(serviceStamp), null, services);
+  cat.register(HikesActions.compose(serviceStamp, ajaxStamp), null, services);
   cat.register(AppActions.compose(serviceStamp), null, services);
   cat.register(AppStore, null, cat);
 

common/app/flux/Store.js

@@ -8,7 +8,9 @@ const initValue = {
   points: 0,
   hikesApp: {
     hikes: [],
-    currentHikes: {}
+    currentHikes: {},
+    currentQuestion: 1,
+    showQuestion: false
   }
 };
 
@@ -20,13 +22,13 @@ export default Store({
   init({ instance: appStore, args: [cat] }) {
     const { updateRoute, getUser, setTitle } = cat.getActions('appActions');
     const register = createRegistrar(appStore);
-    const { fetchHikes } = cat.getActions('hikesActions');
+    const { toggleQuestions, fetchHikes } = cat.getActions('hikesActions');
 
     // app
     register(setter(fromMany(getUser, setTitle, updateRoute)));
 
     // hikes
-    register(fetchHikes);
+    register(fromMany(fetchHikes, toggleQuestions));
 
     return appStore;
   }

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

@@ -12,38 +12,22 @@ export default React.createClass({
   displayName: 'Hike',
 
   propTypes: {
-    dashedName: PropTypes.string,
     currentHike: PropTypes.object,
     showQuestions: PropTypes.bool
   },
 
-  renderBody(showQuestions, currentHike, dashedName) {
+  renderBody(showQuestions) {
     if (showQuestions) {
-      return (
-        <Questions hike={ currentHike }/>
-      );
+      return <Questions />;
     }
-
-    const {
-      challengeSeed: [ id ] = ['1'],
-      description = []
-    } = currentHike;
-
-    return (
-      <Lecture
-        dashedName={ dashedName }
-        description={ description }
-        id={ id } />
-    );
+    return <Lecture />;
   },
 
   render() {
     const {
-      currentHike = {},
-      dashedName,
+      currentHike: { title } = {},
       showQuestions
     } = this.props;
-    const { title } = currentHike;
 
     const videoTitle = <h2>{ title }</h2>;
 
@@ -53,7 +37,7 @@ export default React.createClass({
           <Panel
             className={ 'text-center' }
             title={ videoTitle }>
-            { this.renderBody(showQuestions, currentHike, dashedName) }
+            { this.renderBody(showQuestions) }
           </Panel>
         </Row>
       </Col>

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

@@ -31,7 +31,8 @@ export default contain(
       children: PropTypes.element,
       currentHike: PropTypes.object,
       hikes: PropTypes.array,
-      params: PropTypes.object
+      params: PropTypes.object,
+      showQuestions: PropTypes.bool
     },
 
     componentWillMount() {
@@ -45,15 +46,15 @@ export default contain(
       );
     },
 
-    renderChild(children, hikes, currentHike, dashedName) {
+    renderChild({ children, ...props }) {
       if (!children) {
         return null;
       }
-      return React.cloneElement(children, { hikes, currentHike, dashedName });
+      return React.cloneElement(children, props);
     },
 
     render() {
-      const { hikes, children, currentHike } = this.props;
+      const { hikes } = this.props;
       const { dashedName } = this.props.params;
       const preventOverflow = { overflow: 'hidden' };
       return (
@@ -61,7 +62,7 @@ export default contain(
           <Row style={ preventOverflow }>
             {
               // render sub-route
-              this.renderChild(children, hikes, currentHike, dashedName) ||
+              this.renderChild({ ...this.props, dashedName }) ||
               // if no sub-route render hikes map
               this.renderMap(hikes)
             }

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

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { contain } from 'thundercats-react';
 import { Button, Col, Row } from 'react-bootstrap';
 import { History } from 'react-router';
 import Vimeo from 'react-vimeo';
@@ -6,20 +7,47 @@ import debugFactory from 'debug';
 
 const debug = debugFactory('freecc:hikes');
 
-export default React.createClass({
+export default contain(
+  {
+    actions: ['hikesActions'],
+    store: 'appStore',
+    map(state) {
+      const {
+        currentHike: {
+          dashedName,
+          description,
+          challengeSeed: [id] = [0]
+        } = {}
+      } = state.hikesApp;
+
+      return {
+        dashedName,
+        description,
+        id
+      };
+    }
+  },
+  React.createClass({
     displayName: 'Lecture',
     mixins: [History],
 
     propTypes: {
       dashedName: PropTypes.string,
       description: PropTypes.array,
-    id: PropTypes.string
+      id: PropTypes.string,
+      hikesActions: PropTypes.object
+    },
+
+    shouldComponentUpdate(nextProps) {
+      const { props } = this;
+      return nextProps.id !== props.id;
     },
 
     handleError: debug,
 
-  handleFinish() {
+    handleFinish(hikesActions) {
       debug('loading questions');
+      hikesActions.toggleQuestions();
     },
 
     renderTranscript(transcript, dashedName) {
@@ -31,9 +59,10 @@ export default React.createClass({
     render() {
       const {
         id = '1',
-      dashedName,
-      description = []
+        description = [],
+        hikesActions
       } = this.props;
+      const dashedName = 'foo';
 
       return (
         <Col xs={ 12 }>
@@ -48,11 +77,12 @@ export default React.createClass({
             <Button
               block={ true }
               bsSize='large'
-            onClick={ this.handleFinish }>
+              onClick={ () => this.handleFinish(hikesActions) }>
               Take me to the Questions
             </Button>
           </Row>
         </Col>
       );
     }
-});
+  })
+);

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

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Motion } from 'react-motion';
-import { History, Lifecycle } from 'react-router';
+import { contain } from 'thundercats-react';
 import debugFactory from 'debug';
 import {
   Button,
@@ -10,24 +10,30 @@ import {
   Row
 } from 'react-bootstrap';
 
-import { postJSON$ } from '../../../../utils/ajax-stream.js';
-
 const debug = debugFactory('freecc:hikes');
 const ANSWER_THRESHOLD = 200;
 
-export default React.createClass({
+export default contain(
+  {
+    store: 'appStore',
+    actions: ['hikesAction'],
+    map(state) {
+      const { currentQuestion, currentHike } = state.hikesApp;
+
+      return {
+        hike: currentHike,
+        currentQuestion
+      };
+    }
+  },
+  React.createClass({
     displayName: 'Questions',
 
-  mixins: [
-    History,
-    Lifecycle
-  ],
-
     propTypes: {
-    currentHike: PropTypes.object,
       dashedName: PropTypes.string,
-    hikes: PropTypes.array,
-    params: PropTypes.object
+      currentQuestion: PropTypes.number,
+      hike: PropTypes.object,
+      hikesActions: PropTypes.object
     },
 
     getInitialState: () => ({
@@ -143,40 +149,12 @@ export default React.createClass({
     },
 
     onCorrectAnswer() {
-    const { hikes, currentHike } = this.props;
-    const { dashedName, number } = this.props.params;
-    const { id, name, difficulty, tests } = currentHike;
-    const nextQuestionIndex = +number;
+      const {
+        hikesActions,
+        hike: { id, name }
+      } = this.props;
 
-    postJSON$('/completed-challenge', { id, name }).subscribeOnCompleted(() => {
-      if (tests[nextQuestionIndex]) {
-        return this.history.pushState(
-          null,
-          `/hikes/${ dashedName }/questions/${ nextQuestionIndex + 1 }`
-        );
-      }
-      // next questions does not exist;
-      debug('finding next hike');
-      const nextHike = [].slice.call(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.history.pushState(null, `/hikes/${ nextHike.dashedName }`);
-      }
-      debug(
-        'next Hike was not found, currentHike %s',
-        currentHike.dashedName
-      );
-      this.history.pushState(null, '/hikes');
-    });
+      hikesActions.completedHike({ id, name });
     },
 
     routerWillLeave(nextState, router, cb) {
@@ -242,10 +220,12 @@ export default React.createClass({
 
     render() {
       const { showInfo, shake } = this.state;
-    const { currentHike: { tests = [] } } = this.props;
-    const { number = '1' } = this.props.params;
+      const {
+        hike: { tests = [] } = {},
+        currentQuestion
+      } = this.props;
 
-    const [question, answer, info] = tests[number - 1] || [];
+      const [ question, answer, info ] = tests[currentQuestion - 1] || [];
 
       return (
         <Col
@@ -254,7 +234,7 @@ export default React.createClass({
           xsOffset={ 2 }>
           <Row>
             <Motion style={{ x: this.getTweenValues }}>
-            { this.renderQuestion(number, question, answer, shake) }
+              { this.renderQuestion(currentQuestion, question, answer, shake) }
             </Motion>
             { this.renderInfo(showInfo, info) }
             <Panel>
@@ -275,4 +255,5 @@ export default React.createClass({
         </Col>
       );
     }
-});
+  })
+);

common/app/routes/Hikes/flux/Actions.js

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+import { Observable } from 'rx';
 import { Actions } from 'thundercats';
 import debugFactory from 'debug';
 
@@ -24,6 +26,15 @@ function getCurrentHike(hikes = [{}], dashedName, currentHike) {
     }, currentHike || {});
 }
 
+function findNextHike(hikes, id) {
+  if (!id) {
+    debug('find next hike no id provided');
+    return hikes[0];
+  }
+  const currentIndex = _.findIndex(hikes, ({ id: _id }) => _id === id);
+  return hikes[currentIndex + 1] || hikes[0];
+}
+
 export default Actions({
   refs: { displayName: 'HikesActions' },
   shouldBindMethods: true,
@@ -47,19 +58,53 @@ export default Actions({
 
     return this.readService$('hikes', null, null)
       .map(hikes => {
-        const hikesApp = {
-          hikes,
-          currentHike: getCurrentHike(hikes, dashedName)
-        };
-
+        const currentHike = getCurrentHike(hikes, dashedName);
         return {
-          transform(oldState) {
-            return Object.assign({}, oldState, { hikesApp });
+          transform(state) {
+            const hikesApp = { ...state.hikesApp, currentHike, hikes };
+            return { ...state, hikesApp };
           }
         };
       })
       .catch(err => {
         console.error(err);
       });
+  },
+
+  toggleQuestions() {
+    return {
+      transform(state) {
+        state.hikesApp.showQuestions = !state.hikesApp.showQuestions;
+        return Object.assign({}, state);
+      }
+    };
+  },
+
+  completedHike(data = {}) {
+    return this.postJSON$('/completed-challenge', data)
+      .map(() => {
+        return {
+          transform(state) {
+            const { hikes, currentHike: { id } } = state.hikesApp;
+            const currentHike = findNextHike(hikes, id);
+
+            // go to next route
+            state.route = currentHike && currentHike.dashedName ?
+              `/hikes/${ currentHike.dashedName }` :
+              '/hikes';
+
+            const hikesApp = { ...state.hikesApp, currentHike };
+            return { ...state, hikesApp };
+          }
+        };
+      })
+      .catch(err => {
+        console.error(err);
+        return Observable.just({
+          set: {
+            error: err
+          }
+        });
+      });
   }
 });