Fix transitioning between hikes resets questions

common/app/flux/Store.js

@@ -10,7 +10,7 @@ const initValue = {
     hikes: [],
     // lecture state
     currentHike: {},
-    showQuestion: false
+    showQuestions: false
   },
   jobsApp: {
     showModal: false

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

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { contain } from 'thundercats-react';
 import {
   Col,
   Panel,
@@ -8,40 +9,56 @@ import {
 import Lecture from './Lecture.jsx';
 import Questions from './Questions.jsx';
 
-export default React.createClass({
+export default contain(
-  displayName: 'Hike',
+  {
-
+    actions: ['hikesActions']
-  propTypes: {
-    currentHike: PropTypes.object,
-    showQuestions: PropTypes.bool
   },
+  React.createClass({
+    displayName: 'Hike',
 
-  renderBody(showQuestions) {
+    propTypes: {
-    if (showQuestions) {
+      currentHike: PropTypes.object,
-      return <Questions />;
+      hikesActions: PropTypes.object,
+      params: PropTypes.object,
+      showQuestions: PropTypes.bool
+    },
+
+    componentWillReceiveProps({ params: { dashedName }, showQuestions }) {
+      if (
+        showQuestions &&
+        this.props.params.dashedName !== dashedName
+      ) {
+        this.props.hikesActions.toggleQuestions();
+      }
+    },
+
+    renderBody(showQuestions) {
+      if (showQuestions) {
+        return <Questions />;
+      }
+      return <Lecture />;
+    },
+
+    render() {
+      const {
+        currentHike: { title } = {},
+        showQuestions
+      } = this.props;
+
+      const videoTitle = <h4>{ title }</h4>;
+
+      return (
+        <Col xs={ 12 }>
+          <Row>
+            <Panel
+              className={ 'text-center' }
+              header={ videoTitle }
+              title={ title }>
+              { this.renderBody(showQuestions) }
+            </Panel>
+          </Row>
+        </Col>
+      );
     }
-    return <Lecture />;
+  })
-  },
+);
-
-  render() {
-    const {
-      currentHike: { title } = {},
-      showQuestions
-    } = this.props;
-
-    const videoTitle = <h4>{ title }</h4>;
-
-    return (
-      <Col xs={ 12 }>
-        <Row>
-          <Panel
-            className={ 'text-center' }
-            header={ videoTitle }
-            title={ title }>
-            { this.renderBody(showQuestions) }
-          </Panel>
-        </Row>
-      </Col>
-    );
-  }
-});

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

@@ -69,7 +69,7 @@ export default contain(
           <Row>
             <Vimeo
               onError={ this.handleError }
-              onFinish= { this.handleFinish }
+              onFinish= { () => this.handleFinish(hikesActions) }
               videoId={ id } />
           </Row>
           <Row>

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

@@ -88,7 +88,11 @@ export default Actions({
   toggleQuestions() {
     return {
       transform(state) {
-        const hikesApp = { ...state.hikesApp, showQuestions: true };
+        const hikesApp = {
+          ...state.hikesApp,
+          showQuestions: !state.hikesApp.showQuestions,
+          currentQuestion: 1
+        };
         return { ...state, hikesApp };
       }
     };