Switching locations

__tests__/actions/__snapshots__/api.js.snap

@@ -1,8 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`actions > api should make a query to OTP 1`] = `"/api/plan?arriveBy=false&fromPlace=12%2C34&showIntermediateStops=true&toPlace=34%2C12"`;
+exports[`actions > api > planTrip should make a query to OTP with customOtpQueryBuilder in state config 1`] = `"/api/plan?from=here&to=there"`;
 
-exports[`actions > api should make a query to OTP 2`] = `
+exports[`actions > api > planTrip should make a query to OTP with customOtpQueryBuilder in state config 2`] = `
+Array [
+  Array [
+    Object {
+      "type": "PLAN_REQUEST",
+    },
+  ],
+  Array [
+    Object {
+      "payload": Object {
+        "fake": "response",
+      },
+      "type": "PLAN_RESPONSE",
+    },
+  ],
+]
+`;
+
+exports[`actions > api > planTrip should make a query to OTP with customOtpQueryBuilder sent to action 1`] = `"/api/plan?from=here&to=there"`;
+
+exports[`actions > api > planTrip should make a query to OTP with customOtpQueryBuilder sent to action 2`] = `
+Array [
+  Array [
+    Object {
+      "type": "PLAN_REQUEST",
+    },
+  ],
+  Array [
+    Object {
+      "payload": Object {
+        "fake": "response",
+      },
+      "type": "PLAN_RESPONSE",
+    },
+  ],
+]
+`;
+
+exports[`actions > api > planTrip should make a query to OTP with default settings 1`] = `"/api/plan?arriveBy=false&fromPlace=12%2C34&showIntermediateStops=true&toPlace=34%2C12"`;
+
+exports[`actions > api > planTrip should make a query to OTP with default settings 2`] = `
 Array [
   Array [
     Object {

__tests__/actions/api.js

@@ -10,48 +10,82 @@ function timeoutPromise (ms) {
   })
 }
 
-const planTripAction = planTrip()
-
 describe('actions > api', () => {
-  it('should make a query to OTP', async () => {
-    nock('http://mock-host.com')
-      .get(/api\/plan/)
-      .reply(200, {
-        fake: 'response'
-      })
-      .on('request', (req, interceptor) => {
-        expect(req.path).toMatchSnapshot()
-      })
+  describe('> planTrip', () => {
+    const defaultState = {
+      otp: {
+        config: {
+          api: {
+            host: 'http://mock-host.com',
+            path: '/api',
+            port: 80
+          }
+        },
+        currentQuery: {
+          from: { lat: 12, lon: 34 },
+          to: { lat: 34, lon: 12 }
+        },
+        searches: []
+      }
+    }
 
-    const mockDispatch = jest.fn()
-    planTripAction(mockDispatch, () => {
-      return {
-        otp: {
-          config: {
-            api: {
-              host: 'http://mock-host.com',
-              path: '/api',
-              port: 80
-            }
-          },
-          currentQuery: {
-            from: {
-              lat: 12,
-              lon: 34
-            },
-            to: {
-              lat: 34,
-              lon: 12
-            }
+    const customOtpQueryBuilder = () => {
+      return `http://mock-host.com/api/plan?from=here&to=there`
+    }
+
+    const stateWithCustomBuilderFunction = {
+      otp: {
+        config: {
+          api: {
+            host: 'http://mock-host.com',
+            path: '/api',
+            port: 80
           },
-          searches: []
-        }
+          customOtpQueryBuilder
+        },
+        currentQuery: {
+          from: { lat: 12, lon: 34 },
+          to: { lat: 34, lon: 12 }
+        },
+        searches: []
       }
-    })
+    }
 
-    // wait for request to complete
-    await timeoutPromise(100)
+    const testCases = [{
+      state: defaultState,
+      title: 'default settings'
+    }, {
+      customOtpQueryBuilder,
+      state: defaultState,
+      title: 'customOtpQueryBuilder sent to action'
+    }, {
+      state: stateWithCustomBuilderFunction,
+      title: 'customOtpQueryBuilder in state config'
+    }]
 
-    expect(mockDispatch.mock.calls).toMatchSnapshot()
+    testCases.forEach((testCase) => {
+      it(`should make a query to OTP with ${testCase.title}`, async () => {
+        const planTripAction = planTrip(testCase.customOtpQueryBuilder)
+
+        nock('http://mock-host.com')
+          .get(/api\/plan/)
+          .reply(200, {
+            fake: 'response'
+          })
+          .on('request', (req, interceptor) => {
+            expect(req.path).toMatchSnapshot()
+          })
+
+        const mockDispatch = jest.fn()
+        planTripAction(mockDispatch, () => {
+          return testCase.state
+        })
+
+        // wait for request to complete
+        await timeoutPromise(100)
+
+        expect(mockDispatch.mock.calls).toMatchSnapshot()
+      })
+    })
   })
 })

__tests__/util/state.js

@@ -1,10 +1,45 @@
 /* globals describe, expect, it */
 
-import {getDefaultQuery} from '../../lib/util/state'
+import {getDefaultQuery, queryIsValid} from '../../lib/util/state'
 
 describe('util > state', () => {
   it('getDefaultQuery should parse window hash if available', () => {
     window.location.hash = '#plan?arriveBy=false&date=2017-02-03&fromPlace=12,34&toPlace=34,12&time=12:34'
     expect(getDefaultQuery()).toMatchSnapshot()
   })
+
+  describe('queryIsValid', () => {
+    const fakeFromLocation = {
+      lat: 12,
+      lon: 34
+    }
+    const fakeToLocation = {
+      lat: 34,
+      lon: 12
+    }
+    const testCases = [{
+      expected: false,
+      input: {
+        currentQuery: {
+          from: fakeFromLocation
+        }
+      },
+      title: 'should not be valid with only from location'
+    }, {
+      expected: true,
+      input: {
+        currentQuery: {
+          from: fakeFromLocation,
+          to: fakeToLocation
+        }
+      },
+      title: 'should be valid with from and to locations'
+    }]
+
+    testCases.forEach((testCase) => {
+      it(testCase.title, () => {
+        expect(queryIsValid(testCase.input))[testCase.expected ? 'toBeTruthy' : 'toBeFalsy']()
+      })
+    })
+  })
 })

example.js

@@ -22,7 +22,8 @@ import {
   // OsmBaseLayer,
   PlanTripButton,
   createOtpReducer,
-  ErrorMessage
+  ErrorMessage,
+  SwitchButton
 } from './lib'
 
 // load the OTP configuration
@@ -63,6 +64,7 @@ class OtpRRExample extends Component {
           <Col xs={12} md={4} className='sidebar'>
             <LocationField type='from' label='Enter start location or click on map...' />
             <LocationField type='to' label='Enter destination or click on map...' />
+            <SwitchButton />
             <ModeSelector />
             <DateTimeSelector />
             <ErrorMessage />

lib/actions/api.js

@@ -8,7 +8,7 @@ if (typeof (fetch) === 'undefined') {
   require('isomorphic-fetch')
 }
 
-import { hasValidLocation } from '../util/state'
+import { queryIsValid } from '../util/state'
 
 export const receivedPlanResponse = createAction('PLAN_RESPONSE')
 export const requestPlanResponse = createAction('PLAN_REQUEST')
@@ -22,9 +22,9 @@ export function planTrip (customOtpQueryBuilder) {
       console.log('query hasn\'t changed')
       return
     }
-    if (!hasValidLocation(otpState, 'from') || !hasValidLocation(otpState, 'to')) return // TODO: replace with isQueryValid?
+    if (!queryIsValid(otpState)) return
     dispatch(requestPlanResponse())
-    const queryBuilderFn = customOtpQueryBuilder || constructPlanQuery
+    const queryBuilderFn = customOtpQueryBuilder || otpState.config.customOtpQueryBuilder || constructPlanQuery
     const url = queryBuilderFn(otpState.config.api, otpState.currentQuery)
     // setURLSearch(url)
     fetch(url)

lib/actions/map.js

@@ -13,8 +13,16 @@ import { formChanged } from './form'
  *   }
  */
 
-export const settingLocation = createAction('SET_LOCATION')
 export const clearingLocation = createAction('CLEAR_LOCATION')
+export const settingLocation = createAction('SET_LOCATION')
+export const switchingLocations = createAction('SWITCH_LOCATIONS')
+
+export function clearLocation (payload) {
+  return function (dispatch, getState) {
+    dispatch(clearingLocation(payload))
+    dispatch(formChanged())
+  }
+}
 
 export function setLocation (payload) {
   return function (dispatch, getState) {
@@ -23,9 +31,17 @@ export function setLocation (payload) {
   }
 }
 
-export function clearLocation (payload) {
+export function switchLocations () {
   return function (dispatch, getState) {
-    dispatch(clearingLocation(payload))
+    const {from, to} = getState().otp.currentQuery
+    dispatch(settingLocation({
+      type: 'from',
+      location: to
+    }))
+    dispatch(settingLocation({
+      type: 'to',
+      location: from
+    }))
     dispatch(formChanged())
   }
 }

lib/components/form/switch-button.js

@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react'
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+
+import { switchLocations } from '../../actions/map'
+
+class SwitchButton extends Component {
+  static propTypes = {
+    onClick: PropTypes.func
+  }
+  _onClick = () => {
+    this.props.switchLocations()
+  }
+  render () {
+    return (
+      <Button
+        onClick={this._onClick || this.props.onClick}
+        >Switch</Button>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {}
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    switchLocations: () => { dispatch(switchLocations()) }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SwitchButton)

lib/index.js

@@ -1,31 +1,33 @@
-import LocationField from './components/form/location-field'
-import PlanTripButton from './components/form/plan-trip-button'
-import ModeSelector from './components/form/mode-selector'
 import DateTimeSelector from './components/form/date-time-selector'
 import ErrorMessage from './components/form/error-message'
+import LocationField from './components/form/location-field'
+import ModeSelector from './components/form/mode-selector'
+import PlanTripButton from './components/form/plan-trip-button'
+import SwitchButton from './components/form/switch-button'
 
-import NarrativeItineraries from './components/narrative/narrative-itineraries'
-import NarrativeItinerary from './components/narrative/narrative-itinerary'
-
-import BaseMap from './components/map/base-map'
 import BaseLayers from './components/map/base-layers'
-import OsmBaseLayer from './components/map/osm-base-layer'
+import BaseMap from './components/map/base-map'
 import EndpointsOverlay from './components/map/endpoints-overlay'
 import ItineraryOverlay from './components/map/itinerary-overlay'
+import OsmBaseLayer from './components/map/osm-base-layer'
+
+import NarrativeItineraries from './components/narrative/narrative-itineraries'
+import NarrativeItinerary from './components/narrative/narrative-itinerary'
 
 import createOtpReducer from './reducers/create-otp-reducer'
 
 export {
   // form components
-  LocationField,
-  PlanTripButton,
-  ModeSelector,
   DateTimeSelector,
   ErrorMessage,
+  LocationField,
+  ModeSelector,
+  PlanTripButton,
+  SwitchButton,
 
   // map components
-  BaseMap,
   BaseLayers,
+  BaseMap,
   EndpointsOverlay,
   ItineraryOverlay,
   OsmBaseLayer,

lib/util/state.js

@@ -56,7 +56,7 @@ export { hasValidLocation }
 
 function queryIsValid (otpState) {
   return hasValidLocation(otpState, 'from') &&
-    hasValidLocation(otpState, 'from')
+    hasValidLocation(otpState, 'to')
     // TODO: add mode validation
     // TODO: add date/time validation
 }