Video question now loads

common/app/App.jsx

@@ -63,7 +63,6 @@ export class FreeCodeCamp extends React.Component {
   render() {
     const { username, points, picture } = this.props;
     const navProps = { username, points, picture };
-    console.log('app', this.props.children);
 
     return (
       <div>

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

@@ -10,10 +10,12 @@ import { resetHike } from '../redux/actions';
 const mapStateToProps = createSelector(
   state => state.hikesApp.hikes.entities,
   state => state.hikesApp.currentHike,
-  (hikes, currentHikeDashedName) => {
+  state => state.hikesApp,
+  (hikes, currentHikeDashedName, { shouldShowQuestions }) => {
     const currentHike = hikes[currentHikeDashedName];
     return {
-      title: currentHike.title
+      title: currentHike ? currentHike.title : '',
+      shouldShowQuestions
     };
   }
 );
@@ -23,10 +25,12 @@ export class Hike extends React.Component {
   static displayName = 'Hike';
 
   static propTypes = {
-    title: PropTypes.object,
+    // actions
-    params: PropTypes.object,
     resetHike: PropTypes.func,
-    showQuestions: PropTypes.bool
+    // ui
+    title: PropTypes.string,
+    params: PropTypes.object,
+    shouldShowQuestions: PropTypes.bool
   };
 
   componentWillUnmount() {
@@ -49,7 +53,7 @@ export class Hike extends React.Component {
   render() {
     const {
       title,
-      showQuestions
+      shouldShowQuestions
     } = this.props;
 
     return (
@@ -63,7 +67,7 @@ export class Hike extends React.Component {
           <section
             className={ 'text-center' }
             title={ title }>
-            { this.renderBody(showQuestions) }
+            { this.renderBody(shouldShowQuestions) }
           </section>
         </Row>
       </Col>

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

@@ -5,6 +5,8 @@ import Vimeo from 'react-vimeo';
 import { createSelector } from 'reselect';
 import debug from 'debug';
 
+import { toggleQuestionView } from '../redux/actions';
+
 const log = debug('fcc:hikes');
 
 const mapStateToProps = createSelector(
@@ -29,10 +31,12 @@ export class Lecture extends React.Component {
   static displayName = 'Lecture';
 
   static propTypes = {
-    dashedName: PropTypes.string,
+    // actions
-    description: PropTypes.array,
+    toggleQuestionView: PropTypes.func,
+    // ui
     id: PropTypes.string,
-    hikesActions: PropTypes.object
+    description: PropTypes.array,
+    dashedName: PropTypes.string
   };
 
   shouldComponentUpdate(nextProps) {
@@ -42,11 +46,6 @@ export class Lecture extends React.Component {
 
   handleError: log;
 
-  handleFinish(hikesActions) {
-    debug('loading questions');
-    hikesActions.toggleQuestions();
-  }
-
   renderTranscript(transcript, dashedName) {
     return transcript.map((line, index) => (
       <p
@@ -61,8 +60,9 @@ export class Lecture extends React.Component {
     const {
       id = '1',
       description = [],
-      hikesActions
+      toggleQuestionView
     } = this.props;
+
     const dashedName = 'foo';
 
     return (
@@ -70,7 +70,7 @@ export class Lecture extends React.Component {
         <Row>
           <Vimeo
             onError={ this.handleError }
-            onFinish= { () => this.handleFinish(hikesActions) }
+            onFinish= { toggleQuestionView }
             videoId={ id } />
         </Row>
         <Row>
@@ -81,7 +81,7 @@ export class Lecture extends React.Component {
             block={ true }
             bsSize='large'
             bsStyle='primary'
-            onClick={ () => this.handleFinish(hikesActions) }>
+            onClick={ toggleQuestionView }>
             Take me to the Questions
           </Button>
         </Row>
@@ -90,4 +90,4 @@ export class Lecture extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(Lecture);
+export default connect(mapStateToProps, { toggleQuestionView })(Lecture);

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

@@ -22,7 +22,7 @@ const actionsToBind = {
 const mapStateToProps = createSelector(
   state => state.hikesApp.hikes.entities,
   state => state.hikesApp.hikes.results,
-  state => state.hikesApp.ui,
+  state => state.hikesApp,
   state => state.app.isSignedIn,
   (hikesMap, hikesByDashname, ui, isSignedIn) => {
     const {

common/app/routes/Hikes/redux/actions.js

@@ -14,8 +14,9 @@ export const fetchHikesCompleted = createAction(
   types.fetchHikesCompleted,
   (hikes, currentHike) => ({ hikes, currentHike })
 );
+export const resetHike = createAction(types.resetHike);
 
-export const toggleQuestion = createAction(types.toggleQuestion);
+export const toggleQuestionView = createAction(types.toggleQuestionView);
 
 export const grabQuestions = createAction(types.grabQuestions, e => {
   let { pageX, pageY, touches } = e;

common/app/routes/Hikes/redux/reducer.js

@@ -25,7 +25,7 @@ const initialState = {
 
 export default handleActions(
   {
-    [types.toggleQuestion]: state => ({
+    [types.toggleQuestionView]: state => ({
       ...state,
       shouldShowQuestions: !state.shouldShowQuestions,
       currentQuestion: 1

common/app/routes/Hikes/redux/types.js

@@ -1,6 +1,7 @@
 const types = [
   'fetchHikes',
   'fetchHikesCompleted',
+  'resetHike',
 
   'toggleQuestionView',
   'grabQuestion',