Added 404 and Network Issue components and functionality

Author: Gregg

src/router.js

@@ -5,6 +5,8 @@ import EventList from './views/EventList.vue'
 import EventShow from './views/EventShow.vue'
 import NProgress from 'nprogress'
 import store from '@/store/store'
+import NotFound from './views/NotFound.vue'
+import NetworkIssue from './views/NetworkIssue.vue'
 
 Vue.use(Router)
 
@@ -28,11 +30,35 @@ const router = new Router({
       component: EventShow,
       props: true,
       beforeEnter(routeTo, routeFrom, next) {
-        store.dispatch('event/fetchEvent', routeTo.params.id).then(event => {
-          routeTo.params.event = event
-          next()
-        })
+        store
+          .dispatch('event/fetchEvent', routeTo.params.id)
+          .then(event => {
+            routeTo.params.event = event
+            next()
+          })
+          .catch(error => {
+            if (error.response && error.response.status == 404) {
+              next({ name: '404', params: { resource: 'event' } })
+            } else {
+              next({ name: 'network-issue' })
+            }
+          })
       }
+    },
+    {
+      path: '/404',
+      name: '404',
+      component: NotFound,
+      props: true
+    },
+    {
+      path: '/network-issue',
+      name: 'network-issue',
+      component: NetworkIssue
+    },
+    {
+      path: '*',
+      redirect: { name: '404', params: { resource: 'page' } }
     }
   ]
 })

src/services/EventService.js

@@ -6,7 +6,8 @@ const apiClient = axios.create({
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json'
-  }
+  },
+  timeout: 10000
 })
 
 export default {

src/store/modules/event.js

@@ -59,7 +59,7 @@ export const actions = {
         dispatch('notification/add', notification, { root: true })
       })
   },
-  fetchEvent({ commit, getters, dispatch, state }, id) {
+  fetchEvent({ commit, getters, state }, id) {
     if (id == state.event.id) {
       return state.event
     }
@@ -70,18 +70,10 @@ export const actions = {
       commit('SET_EVENT', event)
       return event
     } else {
-      return EventService.getEvent(id)
-        .then(response => {
-          commit('SET_EVENT', response.data)
-          return response.data
-        })
-        .catch(error => {
-          const notification = {
-            type: 'error',
-            message: 'There was a problem fetching event: ' + error.message
-          }
-          dispatch('notification/add', notification, { root: true })
-        })
+      return EventService.getEvent(id).then(response => {
+        commit('SET_EVENT', response.data)
+        return response.data
+      })
     }
   }
 }

src/views/NetworkIssue.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <h1>Uh-Oh!</h1>
+        <h3>It looks like you're experiencing some network issues, please click the back button and try again.</h3>
+        <router-link :to="{ name: 'event-list' }">Or go back to the home page</router-link>
+    </div>
+</template>

src/views/NotFound.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h1>Oops!</h1>
+        <h3>The {{ resource }} you're looking for is not here.</h3>
+        <router-link :to="{ name: 'event-list' }">Back to the home page</router-link>
+    </div>
+</template>
+<script>
+export default {
+  props: {
+    resource: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>