use byId model for chat example

examples/chat/components/MessageSection.vue

@@ -3,7 +3,7 @@
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
     <ul class="message-list" v-el:list>
       <message
-        v-for="message in thread.messages"
+        v-for="message in thread.messages | orderBy 'timestamp'"
         track-by="id"
         :message="message">
       </message>
@@ -22,7 +22,7 @@ export default {
     thread () {
       const id = vuex.state.currentThreadID
       return id
-        ? vuex.state.threads.find(t => t.id === id)
+        ? vuex.state.threads[id]
         : {}
     }
   },

examples/chat/components/Thread.vue

@@ -5,10 +5,10 @@
     @click="onClick">
     <h5 class="thread-name">{{ thread.name }}</h5>
     <div class="thread-time">
-      {{ lastMessage.timestamp | time }}
+      {{ thread.lastMessage.timestamp | time }}
     </div>
     <div class="thread-last-message">
-      {{ lastMessage.text }}
+      {{ thread.lastMessage.text }}
     </div>
   </li>
 </template>
@@ -21,15 +21,6 @@ export default {
   computed: {
     isCurrentThread () {
       return this.thread.id === vuex.state.currentThreadID
-    },
-    lastMessage () {
-      let last
-      this.thread.messages.forEach(message => {
-        if (!last || message.timestamp > last.timestamp) {
-          last = message
-        }
-      })
-      return last
     }
   },
   methods: {

examples/chat/components/ThreadSection.vue

@@ -26,11 +26,11 @@ export default {
       return vuex.state.threads
     },
     unreadCount () {
-      return vuex.state.threads.reduce((count, thread) => {
-        const hasUnread = thread.messages.some(m => !m.isRead)
-        return hasUnread
-          ? count + 1
-          : count
+      const threads = vuex.state.threads
+      return Object.keys(threads).reduce((count, id) => {
+        return threads[id].lastMessage.isRead
+          ? count
+          : count + 1
       }, 0)
     }
   }

examples/chat/vuex/index.js

@@ -8,7 +8,14 @@ Vue.use(Vuex)
 export default new Vuex({
   state: {
     currentThreadID: null,
-    threads: [/* { id, name, messages } */]
+    threads: {/*
+      id: {
+        id,
+        name,
+        messages,
+        lastMessage
+      }
+    */}
   },
   actions,
   mutations,

examples/chat/vuex/mutations.js

@@ -7,14 +7,16 @@ export default {
     let latestMessage
     messages.forEach(message => {
       // create new thread if the thread doesn't exist
-      let thread = state.threads.find(t => t.id === message.threadID)
+      const threadID = message.threadID
+      let thread = state.threads[threadID]
       if (!thread) {
         thread = {
-          id: message.threadID,
+          id: threadID,
           name: message.threadName,
-          messages: []
+          messages: {},
+          lastMessage: null
         }
-        state.threads.push(thread)
+        set(state.threads, threadID, thread)
       }
       // mark the latest message
       if (!latestMessage || message.timestamp > latestMessage.timestamp) {
@@ -29,7 +31,7 @@ export default {
 
   [types.RECEIVE_MESSAGE] (state, message) {
     // add message
-    const thread = state.threads.find(t => t.id === message.threadID)
+    const thread = state.threads[message.threadID]
     addMessageToThread(thread, message, state.currentThreadID)
   },
 
@@ -39,15 +41,17 @@ export default {
 }
 
 function addMessageToThread (thread, message, currentThreadID) {
-  // add a `isRead` field
+  // add a `isRead` field before adding the message
   message.isRead = message.threadID === currentThreadID
-  thread.messages.push(message)
+  set(thread.messages, message.id, message)
+  thread.lastMessage = message
 }
 
 function setCurrentThread (state, id) {
   state.currentThreadID = id
-  const thread = state.threads.find(t => t.id === id)
-  thread.messages.forEach(message => {
-    message.isRead = true
+  // mark thread messages as read
+  const thread = state.threads[id]
+  Object.keys(thread.messages).forEach(mid => {
+    thread.messages[mid].isRead = true
   })
 }