refactor chat example data structure

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 | orderBy 'timestamp'"
+        v-for="message in messages | orderBy 'timestamp'"
         track-by="id"
         :message="message">
       </message>
@@ -24,6 +24,10 @@ export default {
       return id
         ? vuex.state.threads[id]
         : {}
+    },
+    messages () {
+      return this.thread.messages &&
+        this.thread.messages.map(id => vuex.state.messages[id])
     }
   },
   watch: {

examples/chat/vuex/index.js

@@ -8,24 +8,29 @@ Vue.use(Vuex)
 export default new Vuex({
   state: {
     currentThreadID: null,
-    threads: {/*
+    threads: {
+      /*
       id: {
         id,
         name,
-        messages: {
-          id: {
-            id,
-            threadId,
-            threadName,
-            authorName,
-            text,
-            timestamp,
-            isRead
-          }
-        },
+        messages: [...ids],
         lastMessage
       }
-    */}
+      */
+    },
+    messages: {
+      /*
+      id: {
+        id,
+        threadId,
+        threadName,
+        authorName,
+        text,
+        timestamp,
+        isRead
+      }
+      */
+    }
   },
   actions,
   mutations,

examples/chat/vuex/mutations.js

@@ -36,7 +36,7 @@ function createThread (state, id, name) {
   const thread = {
     id,
     name,
-    messages: {},
+    messages: [],
     lastMessage: null
   }
   set(state.threads, id, thread)
@@ -46,16 +46,18 @@ function createThread (state, id, name) {
 function addMessage (state, message) {
   // add a `isRead` field before adding the message
   message.isRead = message.threadID === state.currentThreadID
+  // add it to the thread it belongs to
   const thread = state.threads[message.threadID]
-  set(thread.messages, message.id, message)
-  thread.lastMessage = message
+  if (!thread.messages.some(id => id === message.id)) {
+    thread.messages.push(message.id)
+    thread.lastMessage = message
+  }
+  // add it to the messages map
+  set(state.messages, message.id, message)
 }
 
 function setCurrentThread (state, id) {
   state.currentThreadID = id
-  // mark thread messages as read
-  const thread = state.threads[id]
-  Object.keys(thread.messages).forEach(mid => {
-    thread.messages[mid].isRead = true
-  })
+  // mark thread as read
+  state.threads[id].lastMessage.isRead = true
 }