feat(error-handling): display error-message upon server fails

Catch all server errors including everything else thrown from redux
dispatch.  Also, utilize built-in bootstrap alerts for styling:
http://getbootstrap.com/components/#alerts

Author: evansiroky

lib/actions/api.js

@@ -28,24 +28,18 @@ export function planTrip (customOtpQueryBuilder) {
     const queryBuilderFn = customOtpQueryBuilder || otpState.config.customOtpQueryBuilder || constructPlanQuery
     const url = queryBuilderFn(otpState.config.api, otpState.currentQuery)
     // setURLSearch(url)
-    let serverResponse
     fetch(url)
       .then(response => {
-        serverResponse = response
-        return response.json()
-      })
-      .then(json => {
-        if (serverResponse.status >= 400) {
-          dispatch(receivedPlanError({
-            body: json,
-            status: serverResponse.status
-          }))
-        } else {
-          dispatch(receivedPlanResponse(json))
+        if (response.status >= 400) {
+          const error = new Error('Received error from server')
+          error.response = response
+          throw error
         }
+        return response.json()
       })
+      .then(json => dispatch(receivedPlanResponse(json)))
       .catch((err) => {
-        throw err
+        dispatch(receivedPlanError(err))
       })
   }
 }

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/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, {
@@ -45,18 +46,23 @@ function createOtpReducer (config, initialQuery) {
         })
       case 'PLAN_ERROR':
         return update(state, {
-          searches: {[state.searches.length - 1]: {
+          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) {