lesson12-mutations&actions1-finish

Author: atomjar

db.json

@@ -71,6 +71,24 @@
           "name": "Mary Gordon"
         }
       ]
+    },
+    {
+      "id": 2564147,
+      "user": {
+        "id": "abc123",
+        "name": "Adam Jahr"
+      },
+      "category": "nature",
+      "organizer": {
+        "id": "abc123",
+        "name": "Adam Jahr"
+      },
+      "title": "Working?",
+      "description": "",
+      "___location": "",
+      "date": "",
+      "time": "",
+      "attendees": []
     }
   ]
 }

src/services/EventService.js

@@ -15,5 +15,8 @@ export default {
   },
   getEvent(id) {
     return apiClient.get('/events/' + id)
+  },
+  postEvent(event) {
+    return apiClient.post('/events', event)
   }
 }

src/store.js

@@ -15,15 +15,20 @@ export default new Vuex.Store({
       'food',
       'community'
     ],
-    events: [
-      { id: 1, title: '...', organizer: '...' },
-      { id: 2, title: '...', organizer: '...' },
-      { id: 3, title: '...', organizer: '...' },
-      { id: 4, title: '...', organizer: '...' }
-    ]
+    events: []
+  },
+  mutations: {
+    ADD_EVENT(state, event) {
+      state.events.push(event)
+    }
+  },
+  actions: {
+    createEvent({ commit }, event) {
+      return EventService.postEvent(event).then(() => {
+        commit('ADD_EVENT', event)
+      })
+    }
   },
-  mutations: {},
-  actions: {},
   getters: {
     getEventById: state => id => {
       return state.events.find(event => event.id === id)

src/views/EventCreate.vue

@@ -1,18 +1,99 @@
 <template>
   <div>
-    <h1>Create an Event, {{ user.name }}</h1>
-    <p>This event was created by {{ user.name }}</p>
-    <p>{{ getEventById(2) }}</p>
+    <h1>Create an Event</h1>
+    <form @submit.prevent="createEvent">
+      <label>Select a category</label>
+      <select v-model="event.category">
+        <option v-for="cat in categories" :key="cat">{{ cat }}</option>
+      </select>
+
+      <h3>Name & describe your event</h3>
+      <div class="field">
+        <label>Title</label>
+        <input v-model="event.title" type="text" placeholder="Add an event title"/>
+      </div>
+
+      <div class="field">
+        <label>Description</label>
+        <input v-model="event.description" type="text" placeholder="Add a description"/>
+      </div>
+
+      <h3>Where is your event?</h3>
+      <div class="field">
+        <label>Location</label>
+        <input v-model="event.___location" type="text" placeholder="Add a ___location"/>
+      </div>
+
+      <h3>When is your event?</h3>
+
+      <div class="field">
+        <label>Date</label>
+        <datepicker v-model="event.date" placeholder="Select a date"/>
+      </div>
+
+      <div class="field">
+        <label>Select a time</label>
+        <select v-model="event.time">
+          <option v-for="time in times" :key="time">{{ time }}</option>
+        </select>
+      </div>
+
+      <input type="submit" class="button -fill-gradient" value="Submit"/>
+    </form>
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
 
+<script>
+import Datepicker from 'vuejs-datepicker'
 export default {
-  computed: {
-    ...mapGetters(['getEventById']),
-    ...mapState(['user', 'categories'])
+  components: {
+    Datepicker
+  },
+  data() {
+    const times = []
+    for (let i = 1; i <= 24; i++) {
+      times.push(i + ':00')
+    }
+    return {
+      times,
+      categories: this.$store.state.categories,
+      event: this.createFreshEventObject()
+    }
+  },
+  methods: {
+    createEvent() {
+      this.$store
+        .dispatch('createEvent', this.event)
+        .then(() => {
+          this.$router.push({
+            name: 'event-show',
+            params: { id: this.event.id }
+          })
+          this.event = this.createFreshEventObject()
+          console.log('I was ran')
+        })
+        .catch(() => {
+          console.log('There was a problem creating your event')
+        })
+    },
+    createFreshEventObject() {
+      const user = this.$store.state.user
+      const id = Math.floor(Math.random() * 10000000)
+
+      return {
+        id: id,
+        user: user,
+        category: '',
+        organizer: user,
+        title: '',
+        description: '',
+        ___location: '',
+        date: '',
+        time: '',
+        attendees: []
+      }
+    }
   }
 }
 </script>

src/views/EventShow.vue

@@ -3,7 +3,7 @@
     <div class="event-header">
       <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
       <h1 class="title">{{ event.title }}</h1>
-      <h5>Organized by {{ event.organizer }}</h5>
+      <h5>Organized by {{ event.organizer ? event.organizer.name : '' }}</h5>
       <h5>Category: {{ event.category }}</h5>
     </div>