feat(narrative): add toggle between realtime and non-realtime itineraries

Author: landonreed

lib/actions/narrative.js

@@ -3,3 +3,4 @@ import { createAction } from 'redux-actions'
 export const setActiveItinerary = createAction('SET_ACTIVE_ITINERARY')
 export const setActiveLeg = createAction('SET_ACTIVE_LEG')
 export const setActiveStep = createAction('SET_ACTIVE_STEP')
+export const setUseRealtimeResponse = createAction('SET_USE_REALTIME_RESPONSE')

lib/components/narrative/narrative-itineraries.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Button } from 'react-bootstrap'
 
-import { setActiveItinerary, setActiveLeg, setActiveStep } from '../../actions/narrative'
+import { setActiveItinerary, setActiveLeg, setActiveStep, setUseRealtimeResponse } from '../../actions/narrative'
 import DefaultItinerary from './default/default-itinerary'
 import { getActiveSearch } from '../../util/state'
 import { formatDuration } from '../../util/time'
@@ -15,29 +15,35 @@ class NarrativeItineraries extends Component {
     activeItinerary: PropTypes.number,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
-    setActiveStep: PropTypes.func
+    setActiveStep: PropTypes.func,
+    setUseRealtimeResponse: PropTypes.func,
+    useRealtime: PropTypes.bool
   }
 
   static defaultProps = {
     itineraryClass: DefaultItinerary
   }
 
-  _handleDefaultItineraryClick = (e) => {
-    // TODO figure out what this button is supposed to do
+  _toggleRealtimeItineraryClick = (e) => {
+    const {setUseRealtimeResponse, useRealtime} = this.props
+    setUseRealtimeResponse({useRealtime: !useRealtime})
   }
 
   render () {
     const {
       activeItinerary,
       itineraries,
       itineraryClass,
-      realtimeEffects
+      realtimeEffects,
+      useRealtime
     } = this.props
     if (!itineraries) return null
 
     return (
       <div className='options itinerary'>
-        <div className='header'>We found {itineraries.length} itineraries:</div>
+        <div className='header'>
+          We found {itineraries.length}{!useRealtime && ` non-realtime `} itineraries:
+        </div>
 
         {realtimeEffects.isAffectedByRealtimeData &&
           <div className='realtime-alert'>
@@ -63,9 +69,9 @@ class NarrativeItineraries extends Component {
                 <Button
                   bsSize='xsmall'
                   bsStyle='danger'
-                  onClick={this._handleDefaultItineraryClick}
+                  onClick={this._toggleRealtimeItineraryClick}
                   >
-                  View Default Itinerary
+                  View {useRealtime ? `Default` : `Realtime`} Itinerary
                 </Button>
               </div>
             </div>
@@ -107,8 +113,10 @@ const mapStateToProps = (state, ownProps) => {
     nonRealtimeItineraries &&
     itineraries[0].duration !== nonRealtimeItineraries[0].duration
   )
+  const useRealtime = state.otp.useRealtime
   return {
-    itineraries,
+    // swap out realtime itineraries with non-realtime depending on boolean
+    itineraries: useRealtime ? itineraries : nonRealtimeItineraries,
     nonRealtimeItineraries,
     pending,
     realtimeEffects: {
@@ -122,7 +130,8 @@ const mapStateToProps = (state, ownProps) => {
     },
     activeItinerary: activeSearch && activeSearch.activeItinerary,
     activeLeg: activeSearch && activeSearch.activeLeg,
-    activeStep: activeSearch && activeSearch.activeStep
+    activeStep: activeSearch && activeSearch.activeStep,
+    useRealtime
   }
 }
 
@@ -136,6 +145,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     },
     setActiveStep: (index, step) => {
       dispatch(setActiveStep({index, step}))
+    },
+    setUseRealtimeResponse: ({useRealtime}) => {
+      dispatch(setUseRealtimeResponse({useRealtime}))
     }
   }
 }

lib/reducers/create-otp-reducer.js

@@ -34,6 +34,7 @@ function createOtpReducer (config, initialQuery) {
     transitIndex: {
       stops: {}
     },
+    useRealtime: true,
     activeSearchId: 0,
     overlay: {
       bikeRental: {
@@ -108,6 +109,10 @@ function createOtpReducer (config, initialQuery) {
             }
           }
         })
+      case 'SET_USE_REALTIME_RESPONSE':
+        return update(state, {
+          useRealtime: {$set: action.payload.useRealtime}
+        })
       case 'SET_ACTIVE_ITINERARY':
         if (state.activeSearchId !== null) {
           return update(state, { searches: { [state.activeSearchId]: {

lib/util/state.js

@@ -22,8 +22,13 @@ export function getActiveSearch (otpState) {
 
 function getActiveItinerary (otpState) {
   const search = getActiveSearch(otpState)
-  if (!search || !search.response || !search.response.plan) return null
-  const plan = search.response.plan
+  const {useRealtime} = otpState
+  // set response to use depending on useRealtime
+  const response = !search
+    ? null
+    : useRealtime ? search.response : search.nonRealtimeResponse
+  if (!response || !response.plan) return null
+  const plan = response.plan
   return plan.itineraries.length > search.activeItinerary && search.activeItinerary >= 0
     ? plan.itineraries[search.activeItinerary]
     : null