port chat example

Author: yyx990803

examples/chat/components/App.vue

@@ -12,6 +12,7 @@ import ThreadSection from './ThreadSection.vue'
 import MessageSection from './MessageSection.vue'
 
 export default {
+  name: 'App',
   components: {
     ThreadSection,
     MessageSection

examples/chat/components/Message.vue

@@ -10,6 +10,9 @@
 
 <script>
 export default {
-  props: ['message']
+  name: 'Message',
+  props: {
+    message: Object
+  }
 }
 </script>

examples/chat/components/MessageSection.vue

@@ -4,31 +4,26 @@
     <ul class="message-list" ref="list">
       <message
         v-for="message in sortedMessages"
-        track-by="id"
+        :key="message.id"
         :message="message">
       </message>
     </ul>
-    <textarea class="message-composer" @keyup.enter="trySendMessage"></textarea>
+    <textarea class="message-composer" @keyup.enter="sendMessage"></textarea>
   </div>
 </template>
 
 <script>
 import Message from './Message.vue'
-import { sendMessage } from '../vuex/actions'
-import { currentThread, currentMessages } from '../vuex/getters'
+import { mapGetters } from 'vuex'
 
 export default {
+  name: 'MessageSection',
   components: { Message },
-  vuex: {
-    getters: {
-      thread: currentThread,
-      messages: currentMessages
-    },
-    actions: {
-      sendMessage
-    }
-  },
   computed: {
+    ...mapGetters({
+      thread: 'currentThread',
+      messages: 'currentMessages'
+    }),
     sortedMessages () {
       return this.messages
         .slice()
@@ -44,10 +39,13 @@ export default {
     }
   },
   methods: {
-    trySendMessage (e) {
+    sendMessage (e) {
       const text = e.target.value
       if (text.trim()) {
-        this.sendMessage(text, this.thread)
+        this.$store.call('sendMessage', {
+          text,
+          thread: this.thread
+        })
         e.target.value = ''
       }
     }

examples/chat/components/Thread.vue

@@ -1,8 +1,8 @@
 <template>
   <li
     class="thread-list-item"
-    :class="{ active: thread.id === currentThreadID }"
-    @click="switchThread(thread.id)">
+    :class="{ active: active }"
+    @click="$emit('switch-thread', thread.id)">
     <h5 class="thread-name">{{ thread.name }}</h5>
     <div class="thread-time">
       {{ thread.lastMessage.timestamp | time }}
@@ -14,17 +14,11 @@
 </template>
 
 <script>
-import { switchThread } from '../vuex/actions'
-
 export default {
-  props: ['thread'],
-  vuex: {
-    getters: {
-      currentThreadID: state => state.currentThreadID
-    },
-    actions: {
-      switchThread
-    }
+  name: 'Thread',
+  props: {
+    thread: Object,
+    active: Boolean
   }
 }
 </script>

examples/chat/components/ThreadSection.vue

@@ -8,24 +8,27 @@
     <ul class="thread-list">
       <thread
         v-for="thread in threads"
-        track-by="id"
-        :thread="thread">
+        :key="thread.id"
+        :thread="thread"
+        :active="thread.id === currentThread.id"
+        @switch-thread="switchThread">
       </thread>
     </ul>
   </div>
 </template>
 
 <script>
 import Thread from './Thread.vue'
+import { mapGetters } from 'vuex'
 
 export default {
+  name: 'ThreadSection',
   components: { Thread },
-  vuex: {
-    getters: {
-      threads: state => state.threads
-    }
-  },
   computed: {
+    ...mapGetters([
+      'threads',
+      'currentThread'
+    ]),
     unreadCount () {
       const threads = this.threads
       return Object.keys(threads).reduce((count, id) => {
@@ -34,6 +37,11 @@ export default {
           : count + 1
       }, 0)
     }
+  },
+  methods: {
+    switchThread (id) {
+      this.$store.call('switchThread', { id })
+    }
   }
 }
 </script>

examples/chat/vuex/actions.js

@@ -3,16 +3,20 @@ import * as types from './mutation-types'
 
 export const getAllMessages = ({ dispatch }) => {
   api.getAllMessages(messages => {
-    dispatch(types.RECEIVE_ALL, messages)
+    dispatch(types.RECEIVE_ALL, {
+      messages
+    })
   })
 }
 
-export const sendMessage = ({ dispatch }, text, thread) => {
-  api.createMessage({ text, thread }, message => {
-    dispatch(types.RECEIVE_MESSAGE, message)
+export const sendMessage = ({ dispatch }, payload) => {
+  api.createMessage(payload, message => {
+    dispatch(types.RECEIVE_MESSAGE, {
+      message
+    })
   })
 }
 
-export const switchThread = ({ dispatch }, id) => {
-  dispatch(types.SWITCH_THREAD, id)
+export const switchThread = ({ dispatch }, payload) => {
+  dispatch(types.SWITCH_THREAD, payload)
 }

examples/chat/vuex/getters.js

@@ -1,10 +1,12 @@
-export function currentThread (state) {
+export const threads = state => state.threads
+
+export const currentThread = state => {
   return state.currentThreadID
     ? state.threads[state.currentThreadID]
     : {}
 }
 
-export function currentMessages (state) {
+export const currentMessages = state => {
   const thread = currentThread(state)
   return thread.messages
     ? thread.messages.map(id => state.messages[id])

examples/chat/vuex/mutations.js

@@ -2,7 +2,7 @@ import { set } from 'vue'
 import * as types from './mutation-types'
 
 export default {
-  [types.RECEIVE_ALL] (state, messages) {
+  [types.RECEIVE_ALL] (state, { messages }) {
     let latestMessage
     messages.forEach(message => {
       // create new thread if the thread doesn't exist
@@ -20,11 +20,11 @@ export default {
     setCurrentThread(state, latestMessage.threadID)
   },
 
-  [types.RECEIVE_MESSAGE] (state, message) {
+  [types.RECEIVE_MESSAGE] (state, { message }) {
     addMessage(state, message)
   },
 
-  [types.SWITCH_THREAD] (state, id) {
+  [types.SWITCH_THREAD] (state, { id }) {
     setCurrentThread(state, id)
   }
 }
@@ -53,6 +53,9 @@ function addMessage (state, message) {
 
 function setCurrentThread (state, id) {
   state.currentThreadID = id
+  if (!state.threads[id]) {
+    debugger
+  }
   // mark thread as read
   state.threads[id].lastMessage.isRead = true
 }

examples/chat/vuex/store.js

@@ -1,37 +1,43 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
+import * as getters from './getters'
+import * as actions from './actions'
 import mutations from './mutations'
 import createLogger from '../../../src/plugins/logger'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
-  state: {
-    currentThreadID: null,
-    threads: {
-      /*
-      id: {
-        id,
-        name,
-        messages: [...ids],
-        lastMessage
-      }
-      */
-    },
-    messages: {
-      /*
-      id: {
-        id,
-        threadId,
-        threadName,
-        authorName,
-        text,
-        timestamp,
-        isRead
-      }
-      */
+const state = {
+  currentThreadID: null,
+  threads: {
+    /*
+    id: {
+      id,
+      name,
+      messages: [...ids],
+      lastMessage
     }
+    */
   },
+  messages: {
+    /*
+    id: {
+      id,
+      threadId,
+      threadName,
+      authorName,
+      text,
+      timestamp,
+      isRead
+    }
+    */
+  }
+}
+
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
   mutations,
   plugins: process.env.NODE_ENV !== 'production'
     ? [createLogger()]