Merge remote-tracking branch 'origin/master'

Author: Gregg

src/App.vue

@@ -1,16 +1,19 @@
 <template>
   <div id="app">
     <NavBar/>
+    <NotificationContainer/>
     <router-view :key="$route.fullPath" />
   </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar.vue'
+import NotificationContainer from '@/components/NotificationContainer.vue'
 
 export default {
   components: {
-    NavBar
+    NavBar,
+    NotificationContainer
   }
 }
 </script>

src/components/NotificationBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="notification-bar" :class="notificationTypeClass">
+    <p>{{ notification.message }}</p>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      timeout: null
+    }
+  },
+  mounted() {
+    this.timeout = setTimeout(() => this.remove(this.notification), 5000)
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout)
+  },
+  computed: {
+    notificationTypeClass() {
+      return `-text-${this.notification.type}`
+    }
+  },
+  methods: mapActions('notification', ['remove'])
+}
+</script>
+
+<style scoped>
+.notification-bar {
+  margin: 1em 0 1em;
+}
+</style>

src/components/NotificationContainer.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="notification-container">
+    <NotificationBar
+      v-for="notification in notifications"
+      :key="notification.id"
+      :notification="notification"
+    />
+  </div>
+</template>
+
+<script>
+import NotificationBar from '@/components/NotificationBar.vue'
+import { mapState } from 'vuex'
+
+export default {
+  components: {
+    NotificationBar
+  },
+  computed: mapState('notification', ['notifications'])
+}
+</script>
+
+<style scoped>
+.notification-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-right: 40px;
+}
+</style>

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