Create event module

Author: Gregg

src/store/modules/event.js

@@ -0,0 +1,60 @@
+import EventService from '@/services/EventService.js'
+
+export const state = {
+  events: [],
+  eventsTotal: 0,
+  event: {}
+}
+
+export const mutations = {
+  ADD_EVENT(state, event) {
+    state.events.push(event)
+  },
+  SET_EVENTS(state, events) {
+    state.events = events
+  },
+  SET_EVENTS_TOTAL(state, eventsTotal) {
+    state.eventsTotal = eventsTotal
+  },
+  SET_EVENT(state, event) {
+    state.event = event
+  }
+}
+
+export const actions = {
+  createEvent({ commit }, event) {
+    return EventService.postEvent(event).then(() => {
+      commit('ADD_EVENT', event)
+    })
+  },
+  fetchEvents({ commit }, { 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)
+      })
+  },
+  fetchEvent({ commit, getters }, id) {
+    var event = getters.getEventById(id)
+
+    if (event) {
+      commit('SET_EVENT', event)
+    } else {
+      EventService.getEvent(id)
+        .then(response => {
+          commit('SET_EVENT', response.data)
+        })
+        .catch(error => {
+          console.log('There was an error:', error.response)
+        })
+    }
+  }
+}
+export const getters = {
+  getEventById: state => id => {
+    return state.events.find(event => event.id === id)
+  }
+}

src/store/store.js

@@ -1,13 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import EventService from '@/services/EventService.js'
 import * as user from '@/store/modules/user.js'
+import * as event from '@/store/modules/event.js'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    user
+    user,
+    event
   },
   state: {
     categories: [
@@ -18,63 +19,6 @@ export default new Vuex.Store({
       'education',
       'food',
       'community'
-    ],
-    events: [],
-    eventsTotal: 0,
-    event: {}
-  },
-  mutations: {
-    ADD_EVENT(state, event) {
-      state.events.push(event)
-    },
-    SET_EVENTS(state, events) {
-      state.events = events
-    },
-    SET_EVENTS_TOTAL(state, eventsTotal) {
-      state.eventsTotal = eventsTotal
-    },
-    SET_EVENT(state, event) {
-      state.event = event
-    }
-  },
-  actions: {
-    createEvent({ commit }, event) {
-      return EventService.postEvent(event).then(() => {
-        commit('ADD_EVENT', event)
-      })
-    },
-    fetchEvents({ commit }, { 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)
-        })
-    },
-    fetchEvent({ commit, getters }, id) {
-      var event = getters.getEventById(id)
-
-      if (event) {
-        commit('SET_EVENT', event)
-      } else {
-        EventService.getEvent(id)
-          .then(response => {
-            commit('SET_EVENT', response.data)
-          })
-          .catch(error => {
-            console.log('There was an error:', error.response)
-          })
-      }
-    }
-  },
-  getters: {
-    getEventById: state => id => {
-      return state.events.find(event => event.id === id)
-    }
+    ]
   }
 })

src/views/EventCreate.vue

@@ -78,7 +78,7 @@ export default {
         })
     },
     createFreshEventObject() {
-      const user = this.$store.state.user
+      const user = this.$store.state.user.user
       const id = Math.floor(Math.random() * 10000000)
 
       return {

src/views/EventList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>Events for {{ user.user.name }}</h1>
-    <EventCard v-for="event in events" :key="event.id" :event="event"/>
+    <EventCard v-for="event in event.events" :key="event.id" :event="event"/>
     <template v-if="page != 1">
       <router-link :to="{ name: 'event-list', query: { page: page - 1 } }" rel="prev">
       Prev Page</router-link>
@@ -34,9 +34,9 @@ export default {
       return parseInt(this.$route.query.page) || 1
     },
     hasNextPage() {
-      return this.eventsTotal > this.page * this.perPage
+      return this.event.eventsTotal > this.page * this.perPage
     },
-    ...mapState(['events', 'eventsTotal', 'user'])
+    ...mapState(['event', 'eventsTotal', 'user'])
   }
 }
 </script>

src/views/EventShow.vue

@@ -32,7 +32,9 @@ export default {
   created() {
     this.$store.dispatch('fetchEvent', this.id)
   },
-  computed: mapState(['event'])
+  computed: mapState({
+    event: state => state.event.event
+  })
 }
 </script>
 <style scoped>