adding notifications

Author: atomjar

src/store/modules/event.js

@@ -24,22 +24,39 @@ export const mutations = {
 }
 
 export const actions = {
-  createEvent({ commit }, event) {
-    return EventService.postEvent(event).then(() => {
-      commit('ADD_EVENT', event)
-    })
+  createEvent({ commit, dispatch }, event) {
+    return EventService.postEvent(event)
+      .then(() => {
+        commit('ADD_EVENT', event)
+        const notification = {
+          type: 'success',
+          message: 'Your event has been created!'
+        }
+        dispatch('notification/add', notification, { root: true })
+      })
+      .catch(error => {
+        const notification = {
+          type: 'error',
+          message: 'There was a problem creating your event: ' + error.message
+        }
+        dispatch('notification/add', notification, { root: true })
+      })
   },
-  fetchEvents({ commit }, { perPage, page }) {
+  fetchEvents({ commit, dispatch }, { perPage, page }) {
     EventService.getEvents(perPage, page)
       .then(response => {
         commit('SET_EVENTS_TOTAL', parseInt(response.headers['x-total-count']))
         commit('SET_EVENTS', response.data)
       })
       .catch(error => {
-        console.log('There was an error:', error.response)
+        const notification = {
+          type: 'error',
+          message: 'There was a problem fetching events: ' + error.message
+        }
+        dispatch('notification/add', notification, { root: true })
       })
   },
-  fetchEvent({ commit, getters }, id) {
+  fetchEvent({ commit, getters, dispatch }, id) {
     var event = getters.getEventById(id)
 
     if (event) {
@@ -50,7 +67,11 @@ export const actions = {
           commit('SET_EVENT', response.data)
         })
         .catch(error => {
-          console.log('There was an error:', error.response)
+          const notification = {
+            type: 'error',
+            message: 'There was a problem fetching event: ' + error.message
+          }
+          dispatch('notification/add', notification, { root: true })
         })
     }
   }

src/store/modules/notification.js

@@ -0,0 +1,29 @@
+export const namespaced = true
+
+export const state = {
+  notifications: []
+}
+
+let nextId = 1
+
+export const mutations = {
+  PUSH(state, notification) {
+    state.notifications.push({
+      ...notification,
+      id: nextId++
+    })
+  },
+  DELETE(state, notificationToRemove) {
+    state.notifications = state.notifications.filter(
+      notification => notification.id !== notificationToRemove.id
+    )
+  }
+}
+export const actions = {
+  add({ commit }, notification) {
+    commit('PUSH', notification)
+  },
+  remove({ commit }, notificationToRemove) {
+    commit('DELETE', notificationToRemove)
+  }
+}

src/store/store.js

@@ -2,13 +2,15 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import * as user from '@/store/modules/user.js'
 import * as event from '@/store/modules/event.js'
+import * as notification from '@/store/modules/notification.js'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     user,
-    event
+    event,
+    notification
   },
   state: {
     categories: [

src/views/EventCreate.vue

@@ -64,18 +64,13 @@ export default {
   },
   methods: {
     createEvent() {
-      this.$store
-        .dispatch('event/createEvent', this.event)
-        .then(() => {
-          this.$router.push({
-            name: 'event-show',
-            params: { id: this.event.id }
-          })
-          this.event = this.createFreshEventObject()
-        })
-        .catch(() => {
-          console.log('There was a problem creating your event')
+      this.$store.dispatch('event/createEvent', this.event).then(() => {
+        this.$router.push({
+          name: 'event-show',
+          params: { id: this.event.id }
         })
+        this.event = this.createFreshEventObject()
+      })
     },
     createFreshEventObject() {
       const user = this.$store.state.user.user