Merge pull request #30 from opentripplanner/itinerary-refactor

Itinerary refactor

Author: David Emory

Diff for: lib/components/narrative/access-leg.js renamed to lib/components/narrative/default/access-leg.js

@@ -1,9 +1,9 @@
-import Icon from './icon'
 import React, {PropTypes, Component} from 'react'
 
-import { distanceString } from '../../util/distance'
-import { getStepInstructions } from '../../util/itinerary'
-import { formatDuration } from '../../util/time'
+import Icon from '../icon'
+import { distanceString } from '../../../util/distance'
+import { getStepInstructions } from '../../../util/itinerary'
+import { formatDuration } from '../../../util/time'
 
 export default class AccessLeg extends Component {
   static propTypes = {

Diff for: lib/components/narrative/default/default-itinerary.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import NarrativeItinerary from '../narrative-itinerary'
+import ItinerarySummary from './itinerary-summary'
+import ItineraryDetails from './itinerary-details'
+import { formatDuration, formatTime } from '../../../util/time'
+
+export default class DefaultItinerary extends NarrativeItinerary {
+  render () {
+    const {
+      active,
+      activeLeg,
+      activeStep,
+      expanded,
+      index,
+      itinerary,
+      setActiveLeg,
+      setActiveStep
+    } = this.props
+    return (
+      <div className={`option itinerary${active ? ' active' : ''}`}>
+        <button
+          className='header'
+          onClick={this._onHeaderClick}
+        >
+          <span className='title'>Itinerary {index + 1}</span>{' '}
+          <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
+          <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
+          <ItinerarySummary itinerary={itinerary} />
+        </button>
+        {(active || expanded) &&
+          <div className='body'>
+            <ItineraryDetails
+              itinerary={itinerary}
+              activeLeg={activeLeg}
+              activeStep={activeStep}
+              setActiveLeg={setActiveLeg}
+              setActiveStep={setActiveStep}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}

Diff for: lib/components/narrative/itinerary-details.js renamed to lib/components/narrative/default/itinerary-details.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react'
 
 import AccessLeg from './access-leg'
 import TransitLeg from './transit-leg'
-import { isTransit } from '../../util/itinerary'
+import { isTransit } from '../../../util/itinerary'
 
 export default class ItineraryDetails extends Component {
   static propTypes = {

Diff for: lib/components/narrative/itinerary-summary.js renamed to lib/components/narrative/default/itinerary-summary.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { Label } from 'react-bootstrap'
 
-import ModeIcon from './mode-icon'
-import {isTransit} from '../../util/itinerary'
+import ModeIcon from '../mode-icon'
+import {isTransit} from '../../../util/itinerary'
 
 export default class ItinerarySummary extends Component {
   static propTypes = {

Diff for: lib/components/narrative/transit-leg.js renamed to lib/components/narrative/default/transit-leg.js

@@ -1,10 +1,10 @@
-import Icon from './icon'
+import Icon from '../icon'
 import React, { Component, PropTypes } from 'react'
 import { Label } from 'react-bootstrap'
 
-import ModeIcon from './mode-icon'
-import { getMapColor } from '../../util/itinerary'
-import { formatDuration } from '../../util/time'
+import ModeIcon from '../mode-icon'
+import { getMapColor } from '../../../util/itinerary'
+import { formatDuration } from '../../../util/time'
 
 export default class TransitLeg extends Component {
   static propTypes = {

Diff for: lib/components/narrative/itinerary-carousel.js

@@ -5,7 +5,7 @@ import SwipeableViews from 'react-swipeable-views'
 
 import { setActiveItinerary, setActiveLeg, setActiveStep } from '../../actions/narrative'
 import Icon from './icon'
-import NarrativeItinerary from './narrative-itinerary'
+import DefaultItinerary from './default/default-itinerary'
 import Loading from './loading'
 import { getActiveSearch } from '../../util/state'
 
@@ -16,12 +16,17 @@ class ItineraryCarousel extends Component {
     pending: PropTypes.bool,
     activeItinerary: PropTypes.number,
     hideHeader: PropTypes.bool,
+    itineraryClass: PropTypes.func,
     onExpand: PropTypes.func,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
+  static defaultProps = {
+    itineraryClass: DefaultItinerary
+  }
+
   _onItineraryClick = () => {
     const expanded = !this.state.expanded
     this.setState({expanded})
@@ -43,7 +48,7 @@ class ItineraryCarousel extends Component {
   }
 
   render () {
-    const { activeItinerary, itineraries, hideHeader, pending } = this.props
+    const { activeItinerary, itineraries, itineraryClass, hideHeader, pending } = this.props
     if (pending) return <Loading />
     if (!itineraries) return null
 
@@ -75,16 +80,14 @@ class ItineraryCarousel extends Component {
           onChangeIndex={this._onSwipe}
         >
           {itineraries.map((itinerary, index) => {
-            return (
-              <NarrativeItinerary
-                itinerary={itinerary}
-                index={index}
-                key={index}
-                expanded={this.state.expanded}
-                onClick={this._onItineraryClick}
-                {...this.props}
-              />
-            )
+            return React.createElement(itineraryClass, {
+              itinerary,
+              index,
+              key: index,
+              expanded: this.state.expanded,
+              onClick: this._onItineraryClick,
+              ...this.props
+            })
           })}
         </SwipeableViews>
       </div>

Diff for: lib/components/narrative/narrative-itineraries.js

@@ -2,38 +2,41 @@ import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
 import { setActiveItinerary, setActiveLeg, setActiveStep } from '../../actions/narrative'
-import NarrativeItinerary from './narrative-itinerary'
+import DefaultItinerary from './default/default-itinerary'
 import Loading from './loading'
 import { getActiveSearch } from '../../util/state'
 
 class NarrativeItineraries extends Component {
   static propTypes = {
     itineraries: PropTypes.array,
+    itineraryClass: PropTypes.func,
     pending: PropTypes.bool,
     activeItinerary: PropTypes.number,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
+  static defaultProps = {
+    itineraryClass: DefaultItinerary
+  }
+
   render () {
-    const { itineraries, pending, activeItinerary } = this.props
+    const { itineraries, pending, activeItinerary, itineraryClass } = this.props
     if (pending) return <Loading />
     if (!itineraries) return null
 
     return (
       <div className='options itinerary'>
         <div className='header'>We found {itineraries.length} itineraries:</div>
         {itineraries.map((itinerary, index) => {
-          return (
-            <NarrativeItinerary
-              itinerary={itinerary}
-              index={index}
-              key={index}
-              active={index === activeItinerary}
-              {...this.props}
-            />
-          )
+          return React.createElement(itineraryClass, {
+            itinerary,
+            index,
+            key: index,
+            active: index === activeItinerary,
+            ...this.props
+          })
         })}
       </div>
     )

Diff for: lib/components/narrative/narrative-itinerary.js

@@ -1,9 +1,4 @@
-import React, { Component, PropTypes } from 'react'
-// import Icon from './icon'
-
-import ItinerarySummary from './itinerary-summary'
-import ItineraryDetails from './itinerary-details'
-import { formatDuration, formatTime } from '../../util/time'
+import { Component, PropTypes } from 'react'
 
 export default class NarrativeItinerary extends Component {
   static propTypes = {
@@ -13,6 +8,7 @@ export default class NarrativeItinerary extends Component {
     expanded: PropTypes.bool,
     index: PropTypes.number,
     itinerary: PropTypes.object,
+    onClick: PropTypes.func,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
@@ -30,39 +26,6 @@ export default class NarrativeItinerary extends Component {
   }
 
   render () {
-    const {
-      active,
-      activeLeg,
-      activeStep,
-      expanded,
-      index,
-      itinerary,
-      setActiveLeg,
-      setActiveStep
-    } = this.props
-    return (
-      <div className={`option itinerary${active ? ' active' : ''}`}>
-        <button
-          className='header'
-          onClick={this._onHeaderClick}
-        >
-          <span className='title'>Itinerary {index + 1}</span>{' '}
-          <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
-          <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
-          <ItinerarySummary itinerary={itinerary} />
-        </button>
-        {(active || expanded) &&
-          <div className='body'>
-            <ItineraryDetails
-              itinerary={itinerary}
-              activeLeg={activeLeg}
-              activeStep={activeStep}
-              setActiveLeg={setActiveLeg}
-              setActiveStep={setActiveStep}
-            />
-          </div>
-        }
-      </div>
-    )
+    throw new Error('render() called on abstract class NarrativeItinerary')
   }
 }