receive and display messages

src/matrix.js

@@ -1,5 +1,4 @@
 import matrix from 'matrix-js-sdk';
-//import Vue from 'vue'
 import main from '@/main.js';
 const matrix_cli = matrix.createClient("https://adb.sh");
 
@@ -10,7 +9,6 @@ let session = {
     rooms: [],
     currentRoom: undefined
 };
-let rooms = [];
 
 export default {
     data(){
@@ -27,6 +25,7 @@ export default {
             }).then((response) => {
                 console.log(`access token => ${response.access_token}`);
                 session.access_token = response.access_token
+                document.cookie = `access_token=${session.access_token}; user=${session.user};`;
                 if (response.error){
                     main.methods.error(response.error)
                     console.log(`login error => ${response.error}`)
@@ -37,44 +36,49 @@ export default {
                     console.log(state)
                 })
             });
-            /*let i=0;
-            let checkRooms = setInterval(()=>{
-                rooms = matrix_cli.getRooms()
-                console.log("asdasd"+rooms.length)
-                if (rooms.length !== 0 || i>10) clearInterval(checkRooms)
-                i++;
-            },500)*/
-        },
-        getRooms(){
-            rooms.push(matrix_cli.getRooms())
-            return rooms
         }
     }
 }
 
-/*new Vue({
-    el: '#roomList',
-    refs:{
-        rooms: [{name: "lol"},{name: "lol123"}]
-    },
-    data() {
-        return {
-            rooms: [{name: "lol"},{name: "lol123"}],
-        }
-    }
-})*/
-
 matrix_cli.on("event", event => {
     console.log(event.getType());
     console.log(event);
-    session.rooms = []
-    matrix_cli.getRooms().forEach(room => {
-        session.rooms.push({name: room.name, roomId: room.roomId})
+    matrix_cli.getRooms().forEach(newRoom => {
+        let room = session.rooms.find(room => room.roomId === newRoom.roomId)
+        if (!room){
+            session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: []})
+            console.log(`new room => ${newRoom.name}`)
+        }
+        else if (room.name !== newRoom.name){
+            console.log(`roomname changed from ${room.name} to ${newRoom.name}`)
+            room.name = newRoom.name
+        }
     })
-    console.log(matrix_cli.getRooms())
+    console.log(session)
 })
 
 matrix_cli.on("Room.timeline", event => {
     if (event.getType() !== "m.room.message") return;
-    console.log(event.event.content.body);
-});
+    console.log(`new message => ${event.event.content.body}`);
+    let room = session.rooms.find(room => room.roomId === event.event.room_id)
+    if (!room){
+        session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event]})
+        console.log(`undefined room name for => ${event.event.room_id}`)
+    }
+    else room.messages.push(event.event)
+});
+/*
+if (getCookie("access_token")){
+
+    main.methods.router({path: "rooms/"})
+}
+else main.methods.router({path: "login"})
+*/
+/*function getCookie(key){
+    let cookies = document.cookie.split(';');
+    cookies.forEach(cookie => {
+        if (cookie.split('=')[0] === key)
+            return cookie.split('=')[1];
+    })
+    return false;
+}*/

src/views/chat.vue

@@ -2,14 +2,14 @@
   <div>
     <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <p style="text-align: center; font-style: italic;">you entered the chat</p>
-        <div v-for="(message, i) in chatroom.messages" :key="message.time">
-          <div v-if="message.content.user !== chatroom.username && function(){
-               return i===0 || chatroom.messages[i-1].content.user!==message.content.user;}()"
-               style="margin-left: 2rem; margin-top: 1rem">{{message.content.user}}
+        <p v-if="session.currentRoom.messages.length === 0" class="emptyRoom">this room im empty</p>
+        <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
+          <div v-if="message.sender !== session.user && function(){
+               return i===0 || session.currentRoom.messages[i-1].sender!==message.sender;}()"
+               style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
           </div>
-          <messageReceive v-if="message.content.user !== chatroom.username" :msg=message.content.text />
-          <message v-if="message.content.user === chatroom.username" :msg=message.content.text />
+          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body />
+          <message v-if="message.sender === session.user" :msg=message.content.body />
         </div>
       </div>
     </div>
@@ -50,7 +50,7 @@ export default {
   data(){
     return {
       chatroom: main.data().chatroom,
-      sesssion: matrix.data().session
+      session: matrix.data().session
     }
   }
 }
@@ -78,4 +78,8 @@ export default {
   right: 1rem;
   display: none;
 }
+.emptyRoom{
+  text-align: center;
+  font-style: italic;
+}
 </style>