update chat.vue

src/views/chat.vue

@@ -2,7 +2,7 @@
   <div>
     <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <p v-if="room.messages.length === 0" class="info">this room is empty</p>
+        <p v-if="room.timeline.length === 0" class="info">this room is empty</p>
         <!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event">
           <div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
                style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
@@ -16,15 +16,15 @@
           <userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
                          :userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
         </div>-->
-        <div class="eventGroup" v-for="group in splitEventsToGroups(room.messages)" :key="group[0].origin_server_ts">
+        <div class="eventGroup" v-for="group in splitTimelineToGroups(room.timeline)" :key="group[0].origin_server_ts">
-          <div class="username" v-if="group[0].sender !== session.user">{{group[0].sender}}</div>
+          <div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
           <div class="thumbnailContainer">
-            <userThumbnail v-if="group[0].sender !== session.user && room.members.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
+            <userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
           </div>
-          <div class="event" v-for="message in group" :key="message.origin_server_ts">
+          <div class="event" v-for="event in group" :key="event.origin_server_ts">
-            <message :type="message.sender === session.user?'send':'receive'"
+            <message :type="event.sender === user?'send':'receive'"
-                     :group="session.currentRoom.members.length > 2"
+                     :group="room._membersPromise.length > 2"
-                     :msg=message.content.body :time=getTime(message.origin_server_ts) />
+                     :msg=event.content.body :time=getTime(event.origin_server_ts) />
           </div>
         </div>
       </div>
@@ -76,18 +76,18 @@ export default {
       let msgContainer = document.getElementById("messagesContainer")
       this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
     },
-    splitEventsToGroups(events){
+    splitTimelineToGroups(timeline){
       let payload = [[]];
-      let group = 0;
+      timeline.forEach((object, i) => {
-      for(let i=0; i<events.length; i++){
+        let event = object.event;
-        payload[group].push(events[i]);
+        let nextEvent = timeline[i+1]?timeline[i+1].event:undefined;
-        if (events[i].sender !== (events[i+1]?events[i+1].sender:undefined) ||
+        payload[payload.length-1].push(event);
-            this.getDate(events[i].origin_server_ts) !== this.getDate(events[i+1]?events[i+1].origin_server_ts:undefined)){
+        if (!nextEvent) return payload;
-          if (i < events.length-1) payload.push([]);
+        if (event.sender !== nextEvent.sender ||
-          group++;
+            this.getDate(event.origin_server_ts) !== this.getDate(nextEvent.origin_server_ts)){
+          payload.push([]);
         }
-      }
+      })
-      return payload;
     }
   },
   data(){