Merge pull request #21 from opentripplanner/dev

New release

__tests__/actions/__snapshots__/api.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`actions > api > planTrip should gracefully handle bad response 1`] = `
+Array [
+  Array [
+    Object {
+      "type": "PLAN_REQUEST",
+    },
+  ],
+  Array [
+    Object {
+      "error": true,
+      "payload": [Error: Received error from server],
+      "type": "PLAN_ERROR",
+    },
+  ],
+]
+`;
+
 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 > planTrip should make a query to OTP with customOtpQueryBuilder in state config 2`] = `

__tests__/actions/api.js

@@ -87,5 +87,25 @@ describe('actions > api', () => {
         expect(mockDispatch.mock.calls).toMatchSnapshot()
       })
     })
+
+    it('should gracefully handle bad response', async () => {
+      const planTripAction = planTrip()
+
+      nock('http://mock-host.com')
+        .get(/api\/plan/)
+        .reply(500, {
+          fake: 'response'
+        })
+
+      const mockDispatch = jest.fn()
+      planTripAction(mockDispatch, () => {
+        return defaultState
+      })
+
+      // wait for request to complete
+      await timeoutPromise(100)
+
+      expect(mockDispatch.mock.calls).toMatchSnapshot()
+    })
   })
 })

example.css

@@ -18,12 +18,3 @@
   margin: 0px;
   padding: 0px;
 }
-
-button.header, button.step, .intermediate-stops button  {
-  background: inherit;
-  color: inherit;
-  border: 0;
-  text-align: inherit;
-  text-decoration: none;
-  width: 100%;
-}

lib/actions/api.js

@@ -10,11 +10,12 @@ if (typeof (fetch) === 'undefined') {
 
 import { queryIsValid } from '../util/state'
 
+export const receivedPlanError = createAction('PLAN_ERROR')
 export const receivedPlanResponse = createAction('PLAN_RESPONSE')
 export const requestPlanResponse = createAction('PLAN_REQUEST')
 
 export function planTrip (customOtpQueryBuilder) {
-  return function (dispatch, getState) {
+  return async function (dispatch, getState) {
     const otpState = getState().otp
     const latest = otpState.searches.length && otpState.searches[otpState.searches.length - 1]
     // check for query change
@@ -27,15 +28,20 @@ export function planTrip (customOtpQueryBuilder) {
     const queryBuilderFn = customOtpQueryBuilder || otpState.config.customOtpQueryBuilder || constructPlanQuery
     const url = queryBuilderFn(otpState.config.api, otpState.currentQuery)
     // setURLSearch(url)
-    fetch(url)
-      .then(response => {
-        if (response.status >= 400) {
-          throw new Error('Bad response from server')
-        }
-        return response.json()
-      }).then(json => {
-        dispatch(receivedPlanResponse(json))
-      })
+    let response, json
+    try {
+      response = await fetch(url)
+      if (response.status >= 400) {
+        const error = new Error('Received error from server')
+        error.response = response
+        throw error
+      }
+      json = await response.json()
+    } catch (err) {
+      return dispatch(receivedPlanError(err))
+    }
+
+    dispatch(receivedPlanResponse(json))
   }
 }
 

lib/components/form/error-message.js

@@ -13,9 +13,9 @@ class ErrorMessage extends Component {
     if (!error) return null
 
     return (
-      <div className='error'>
+      <div className='alert alert-danger error'>
         <div className='header'>Error!</div>
-        <div className='message'>{error.msg}</div>
+        <div className='message'>{error.message}</div>
       </div>
     )
   }

lib/components/form/form.css

@@ -1,16 +1,7 @@
-.otp .error {
-  margin-bottom: 16px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px
-}
-
 .otp .error > .header {
   font-size: 16px;
   padding-bottom: 4px;
-  border-bottom: 1px solid black;
-  margin-bottom: 6px;
+  border-bottom: 1px solid #dbbec3;
 }
 
 .otp .error > .header > .title {

lib/index.css

@@ -8,3 +8,12 @@
 @import url(lib/components/map/map.css);
 @import url(lib/components/form/form.css);
 @import url(lib/components/narrative/narrative.css);
+
+button.header, button.step, .intermediate-stops button  {
+  background: inherit;
+  color: inherit;
+  border: 0;
+  text-align: inherit;
+  text-decoration: none;
+  width: 100%;
+}

lib/reducers/create-otp-reducer.js

@@ -31,6 +31,7 @@ function createOtpReducer (config, initialQuery) {
   }
 
   return (state = initialState, action) => {
+    const latestSearchIndex = state.searches.length - 1
     switch (action.type) {
       case 'PLAN_REQUEST':
         return update(state, {
@@ -43,14 +44,25 @@ function createOtpReducer (config, initialQuery) {
             activeStep: null
           }]}
         })
+      case 'PLAN_ERROR':
+        return update(state, {
+          searches: {[latestSearchIndex]: {
+            planResponse: {
+              $set: {
+                error: action.payload
+              }
+            },
+            pending: {$set: false}
+          }},
+          activeSearch: { $set: latestSearchIndex }
+        })
       case 'PLAN_RESPONSE':
-        const latestIndex = state.searches.length - 1
         return update(state, {
-          searches: {[latestIndex]: {
+          searches: {[latestSearchIndex]: {
             planResponse: {$set: action.payload},
             pending: {$set: false}
           }},
-          activeSearch: { $set: state.searches.length - 1 }
+          activeSearch: { $set: latestSearchIndex }
         })
       case 'SET_ACTIVE_ITINERARY':
         if (state.activeSearch !== null) {