docs(examples): chat example update (#1149)

* remove mutation type

* use v-model instead of target.value

* Fix to use mapAction when using store's action

* Fix to use Arrow Function & Object destructuring

* Fix to use store/getters

* fix: revert the format change

* fix: change all mutation names in camelCase

* chore: fix code format

* chore: remove extra whitespace

* chore: const -> function

Author: keng0o

examples/chat/components/MessageSection.vue

@@ -3,33 +3,34 @@
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
     <ul class="message-list" ref="list">
       <message
-        v-for="message in sortedMessages"
+        v-for="message in messages"
         :key="message.id"
         :message="message">
       </message>
     </ul>
-    <textarea class="message-composer" @keyup.enter="sendMessage"></textarea>
+    <textarea
+      class="message-composer"
+      v-model="text"
+      @keyup.enter="sendMessage"></textarea>
   </div>
 </template>
 
 <script>
 import Message from './Message.vue'
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'MessageSection',
   components: { Message },
-  computed: {
-    ...mapGetters({
-      thread: 'currentThread',
-      messages: 'currentMessages'
-    }),
-    sortedMessages () {
-      return this.messages
-        .slice()
-        .sort((a, b) => a.timestamp - b.timestamp)
+  data () {
+    return {
+      text: ''
     }
   },
+  computed: mapGetters({
+    thread: 'currentThread',
+    messages: 'sortedMessages'
+  }),
   watch: {
     'thread.lastMessage': function () {
       this.$nextTick(() => {
@@ -38,17 +39,17 @@ export default {
       })
     }
   },
-  methods: {
-    sendMessage (e) {
-      const text = e.target.value
+  methods: mapActions({
+    sendMessage (dispatch) {
+      const { text, thread } = this
       if (text.trim()) {
-        this.$store.dispatch('sendMessage', {
+        dispatch('sendMessage', {
           text,
-          thread: this.thread
+          thread
         })
-        e.target.value = ''
+        this.text = ''
       }
     }
-  }
+  })
 }
 </script>

examples/chat/components/ThreadSection.vue

@@ -19,29 +19,12 @@
 
 <script>
 import Thread from './Thread.vue'
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'ThreadSection',
   components: { Thread },
-  computed: {
-    ...mapGetters([
-      'threads',
-      'currentThread'
-    ]),
-    unreadCount () {
-      const threads = this.threads
-      return Object.keys(threads).reduce((count, id) => {
-        return threads[id].lastMessage.isRead
-          ? count
-          : count + 1
-      }, 0)
-    }
-  },
-  methods: {
-    switchThread (id) {
-      this.$store.dispatch('switchThread', { id })
-    }
-  }
+  computed: mapGetters(['threads', 'currentThread', 'unreadCount']),
+  methods: mapActions(['switchThread'])
 }
 </script>

examples/chat/store/actions.js

@@ -1,22 +1,17 @@
 import * as api from '../api'
-import * as types from './mutation-types'
 
 export const getAllMessages = ({ commit }) => {
   api.getAllMessages(messages => {
-    commit(types.RECEIVE_ALL, {
-      messages
-    })
+    commit('receiveAll', messages)
   })
 }
 
 export const sendMessage = ({ commit }, payload) => {
   api.createMessage(payload, message => {
-    commit(types.RECEIVE_MESSAGE, {
-      message
-    })
+    commit('receiveMessage', message)
   })
 }
 
 export const switchThread = ({ commit }, payload) => {
-  commit(types.SWITCH_THREAD, payload)
+  commit('switchThread', payload)
 }

examples/chat/store/getters.js

@@ -12,3 +12,14 @@ export const currentMessages = state => {
     ? thread.messages.map(id => state.messages[id])
     : []
 }
+
+export const unreadCount = ({ threads }) => {
+  return Object.keys(threads).reduce((count, id) => {
+    return threads[id].lastMessage.isRead ? count : count + 1
+  }, 0)
+}
+
+export const sortedMessages = (state, getters) => {
+  const messages = getters.currentMessages
+  return messages.slice().sort((a, b) => a.timestamp - b.timestamp)
+}

examples/chat/store/mutation-types.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
-import * as types from './mutation-types'
 
 export default {
-  [types.RECEIVE_ALL] (state, { messages }) {
+  receiveAll (state, messages) {
     let latestMessage
     messages.forEach(message => {
       // create new thread if the thread doesn't exist
@@ -20,11 +19,11 @@ export default {
     setCurrentThread(state, latestMessage.threadID)
   },
 
-  [types.RECEIVE_MESSAGE] (state, { message }) {
+  receiveMessage (state, message) {
     addMessage(state, message)
   },
 
-  [types.SWITCH_THREAD] (state, { id }) {
+  switchThread (state, id) {
     setCurrentThread(state, id)
   }
 }