Adding request works (mostly)

Everything works except adding the new request back to the list; this
proof of concept is a go, and will be merged to master

src/app/src/api/index.js

@@ -23,6 +23,12 @@ export default {
   /**
    * Get all prayer requests and their most recent updates
    */
-  journal: () => http.get('journal/')
+  journal: () => http.get('journal/'),
+
+  /**
+   * Add a new prayer request
+   * @param {string} requestText The text of the request to be added
+   */
+  addRequest: requestText => http.post('request/', { requestText })
 
 }

src/app/src/auth/AuthService.js

@@ -1,7 +1,9 @@
-import auth0 from 'auth0-js'
-import { AUTH_CONFIG } from './auth0-variables'
+'use strict'
 
-import * as types from '@/store/mutation-types'
+import auth0 from 'auth0-js'
+
+import AUTH_CONFIG from './auth0-variables'
+import mutations from '@/store/mutation-types'
 
 export default class AuthService {
 
@@ -64,7 +66,7 @@ export default class AuthService {
           this.setSession(authResult)
           this.userInfo(authResult.accessToken)
             .then(user => {
-              store.commit(types.USER_LOGGED_ON, user)
+              store.commit(mutations.USER_LOGGED_ON, user)
               router.replace('/dashboard')
             })
         }
@@ -93,7 +95,7 @@ export default class AuthService {
     localStorage.removeItem('expires_at')
     localStorage.setItem('user_profile', JSON.stringify({}))
     // navigate to the home route
-    store.commit(types.USER_LOGGED_OFF)
+    store.commit(mutations.USER_LOGGED_OFF)
     router.replace('/')
   }
 

src/app/src/components/Dashboard.vue

@@ -5,14 +5,19 @@
     template(v-if="!isLoadingJournal")
       new-request
       p journal has {{ journal.length }} entries
+      request-list-item(v-for="request in journal" v-bind:request="request" v-bind:key="request.requestId")
 </template>
 
 <script>
+'use strict'
+
 import { mapState } from 'vuex'
+
 import PageTitle from './PageTitle'
 import NewRequest from './request/NewRequest'
+import RequestListItem from './request/RequestListItem'
 
-import * as actions from '@/store/action-types'
+import actions from '@/store/action-types'
 
 export default {
   name: 'dashboard',
@@ -22,7 +27,8 @@ export default {
   },
   components: {
     PageTitle,
-    NewRequest
+    NewRequest,
+    RequestListItem
   },
   computed: {
     title () {

src/app/src/components/request/NewRequest.vue

@@ -7,10 +7,14 @@
           el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
       span.dialog-footer(slot='footer')
         el-button(@click='showNewVisible = false') Cancel
-        el-button(type='primary' @click='showNewVisible = false') Confirm
+        el-button(type='primary' @click='saveRequest()') Save
 </template>
 
 <script>
+'use strict'
+
+import actions from '@/store/action-types'
+
 export default {
   name: 'new-request',
   data () {
@@ -21,6 +25,12 @@ export default {
       },
       formLabelWidth: '120px'
     }
+  },
+  methods: {
+    saveRequest: async function () {
+      await this.$store.dispatch(actions.ADD_REQUEST, this.form.requestText)
+      this.showNewVisible = false
+    }
   }
 }
 </script>

src/app/src/components/request/RequestListItem.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+  div
+    p Id {{ request.requestId }} as of {{ request.asOf }}
+    p {{ request.text }}
+</template>
+
+<script>
+export default {
+  name: 'request-list-item',
+  props: ['request'],
+  data: function () {
+    return {}
+  }
+}
+</script>

src/app/src/store/action-types.js

@@ -1 +1,8 @@
-export const LOAD_JOURNAL = 'load-journal'
+'use strict'
+
+export default {
+  /** Action to add a prayer request (pass request text) */
+  ADD_REQUEST: 'add-request',
+  /** Action to load the user's prayer journal */
+  LOAD_JOURNAL: 'load-journal'
+}

src/app/src/store/index.js

@@ -4,8 +4,8 @@ import Vuex from 'vuex'
 import api from '@/api'
 import AuthService from '@/auth/AuthService'
 
-import * as types from './mutation-types'
-import * as actions from './action-types'
+import mutations from './mutation-types'
+import actions from './action-types'
 
 Vue.use(Vuex)
 
@@ -38,38 +38,48 @@ export default new Vuex.Store({
     isLoadingJournal: false
   },
   mutations: {
-    [types.USER_LOGGED_ON] (state, user) {
+    [mutations.USER_LOGGED_ON] (state, user) {
       localStorage.setItem('user_profile', JSON.stringify(user))
       state.user = user
       api.setBearer(localStorage.getItem('id_token'))
       state.isAuthenticated = true
     },
-    [types.USER_LOGGED_OFF] (state) {
+    [mutations.USER_LOGGED_OFF] (state) {
       state.user = {}
       api.removeBearer()
       state.isAuthenticated = false
     },
-    [types.LOADING_JOURNAL] (state, flag) {
+    [mutations.LOADING_JOURNAL] (state, flag) {
       state.isLoadingJournal = flag
     },
-    [types.LOADED_JOURNAL] (state, journal) {
+    [mutations.LOADED_JOURNAL] (state, journal) {
       state.journal = journal
+    },
+    [mutations.REQUEST_ADDED] (state, newRequest) {
+      state.journal.unshift(newRequest)
     }
   },
   actions: {
-    [actions.LOAD_JOURNAL] ({ commit }) {
-      commit(types.LOADED_JOURNAL, {})
-      commit(types.LOADING_JOURNAL, true)
+    async [actions.LOAD_JOURNAL] ({ commit }) {
+      commit(mutations.LOADED_JOURNAL, {})
+      commit(mutations.LOADING_JOURNAL, true)
       api.setBearer(localStorage.getItem('id_token'))
-      api.journal()
-        .then(jrnl => {
-          commit(types.LOADING_JOURNAL, false)
-          commit(types.LOADED_JOURNAL, jrnl.data)
-        })
-        .catch(err => {
-          commit(types.LOADING_JOURNAL, false)
-          logError(err)
-        })
+      try {
+        const jrnl = await api.journal()
+        commit(mutations.LOADED_JOURNAL, jrnl.data)
+      } catch (err) {
+        logError(err)
+      } finally {
+        commit(mutations.LOADING_JOURNAL, false)
+      }
+    },
+    async [actions.ADD_REQUEST] ({ commit }, requestText) {
+      try {
+        const newRequest = await api.addRequest(requestText)
+        commit(mutations.REQUEST_ADDED, newRequest)
+      } catch (err) {
+        logError(err)
+      }
     }
   },
   getters: {},

src/app/src/store/mutation-types.js

@@ -1,4 +1,14 @@
-export const USER_LOGGED_OFF = 'user-logged-out'
-export const USER_LOGGED_ON = 'user-logged-on'
-export const LOADING_JOURNAL = 'loading-journal'
-export const LOADED_JOURNAL = 'journal-loaded'
+'use strict'
+
+export default {
+  /** Mutation for when the user's prayer journal is being loaded */
+  LOADING_JOURNAL: 'loading-journal',
+  /** Mutation for when the user's prayer journal has been loaded */
+  LOADED_JOURNAL: 'journal-loaded',
+  /** Mutation for adding a new prayer request (pass text) */
+  REQUEST_ADDED: 'request-added',
+  /** Mutation for logging a user off */
+  USER_LOGGED_OFF: 'user-logged-off',
+  /** Mutation for logging a user on (pass user) */
+  USER_LOGGED_ON: 'user-logged-on'
+}