From 5c10678a58a84ca1f7c7ad23062cf7884d2feee6 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Wed, 6 Jan 2016 13:17:57 -0800
Subject: [PATCH] Fix transitioning between hikes resets questions

---
 common/app/flux/Store.js                      |  2 +-
 common/app/routes/Hikes/components/Hike.jsx   | 85 +++++++++++--------
 .../app/routes/Hikes/components/Lecture.jsx   |  2 +-
 common/app/routes/Hikes/flux/Actions.js       |  6 +-
 4 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/common/app/flux/Store.js b/common/app/flux/Store.js
index d995544902..b7accbc467 100644
--- a/common/app/flux/Store.js
+++ b/common/app/flux/Store.js
@@ -10,7 +10,7 @@ const initValue = {
     hikes: [],
     // lecture state
     currentHike: {},
-    showQuestion: false
+    showQuestions: false
   },
   jobsApp: {
     showModal: false
diff --git a/common/app/routes/Hikes/components/Hike.jsx b/common/app/routes/Hikes/components/Hike.jsx
index 900f930dfb..d4e323c0c3 100644
--- a/common/app/routes/Hikes/components/Hike.jsx
+++ b/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({
-  displayName: 'Hike',
-
-  propTypes: {
-    currentHike: PropTypes.object,
-    showQuestions: PropTypes.bool
+export default contain(
+  {
+    actions: ['hikesActions']
   },
+  React.createClass({
+    displayName: 'Hike',
 
-  renderBody(showQuestions) {
-    if (showQuestions) {
-      return <Questions />;
+    propTypes: {
+      currentHike: PropTypes.object,
+      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>
-    );
-  }
-});
+  })
+);
diff --git a/common/app/routes/Hikes/components/Lecture.jsx b/common/app/routes/Hikes/components/Lecture.jsx
index be26aa540a..3f18b97b89 100644
--- a/common/app/routes/Hikes/components/Lecture.jsx
+++ b/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>
diff --git a/common/app/routes/Hikes/flux/Actions.js b/common/app/routes/Hikes/flux/Actions.js
index fb0dd81e8b..05fcc0c373 100644
--- a/common/app/routes/Hikes/flux/Actions.js
+++ b/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 };
       }
     };