list rooms

src/lib/matrixHandler.js

@@ -1,13 +1,13 @@
 import matrix from 'matrix-js-sdk';
 
-export let client = undefined;
-
 export class MatrixHandler {
   constructor(clientDisplayName = 'matrix-chat') {
     this.clientDisplayName = clientDisplayName;
     this.accessToken;
     this.client = undefined;
-    this.rooms = undefined;
+    this.rooms = [];
+    this.loading = undefined;
+    this.user = undefined;
   }
   login(user, password, baseUrl, onError, callback = ()=>{}){
     if (this.client){ console.log('there is already an active session'); return; }
@@ -26,8 +26,9 @@ export class MatrixHandler {
       }
       if (response.access_token){
         console.log(`access token => ${response.access_token}`);
-        console.log(this.client.getRooms());
         callback(response.access_token);
+        this.user = user;
+        this.startSync()
       }
     }).catch(error => {
       this.logout();
@@ -37,16 +38,27 @@ export class MatrixHandler {
   }
   tokenLogin(baseUrl, accessToken, userId){
     if (this.client){ console.log('there is already an active session'); return; }
-    this.client = new matrix.createClient({baseUrl, accessToken, userId}).then(response => {
+    this.client = new matrix.createClient({baseUrl, accessToken, userId});
-      console.log(response);
+    this.user = userId;
-    });
+    this.startSync();
+  }
+  logout(){
+    this.client.stopClient();
+    this.client = undefined;
+  }
+  startSync(callback = ()=>{}){
+    this.loading = true;
     this.client.startClient();
     this.client.once('sync', (state) => {
       console.log(state);
+      this.rooms = this.client.getRooms();
+      this.loading = false;
+      callback();
     });
+    this.client.on('event', (event) => {
+      if (event.getType() === 'm.room.create') {
+        console.log(event)
       }
-  logout(){
+    })
-    this.client.stopClient();
-    this.client = undefined;
   }
 }

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="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
+        <p v-if="room.messages.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,10 +16,10 @@
           <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(session.currentRoom.messages)" :key="group[0].origin_server_ts">
+        <div class="eventGroup" v-for="group in splitEventsToGroups(room.messages)" :key="group[0].origin_server_ts">
           <div class="username" v-if="group[0].sender !== session.user">{{group[0].sender}}</div>
           <div class="thumbnailContainer">
-            <userThumbnail v-if="group[0].sender !== session.user && session.currentRoom.members.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
+            <userThumbnail v-if="group[0].sender !== session.user && room.members.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">
             <message :type="message.sender === session.user?'send':'receive'"
@@ -39,9 +39,7 @@
 import message from '@/components/message.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
-import main from '@/main.js';
 import Icon from "@/components/icon";
-import matrix from '@/matrix.js';
 import userThumbnail from '@/components/userThumbnail';
 
 export default {
@@ -53,6 +51,10 @@ export default {
     topBanner,
     userThumbnail
   },
+  props: {
+    room: {},
+    user: String
+  },
   methods:{
     scrollToBottom(){
       let msgContainer = document.getElementById("messagesContainer")
@@ -90,8 +92,6 @@ export default {
   },
   data(){
     return {
-      chatroom: main.data().chatroom,
-      session: matrix.data().session,
       showScrollBtn: false,
       scrollOnUpdate: true
     }

src/views/rooms.vue

@@ -1,31 +1,33 @@
 <template>
-  <div>
+  <div v-if="matrix.loading">
+    loading...
+  </div>
+  <div v-else>
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
-      <h2>{{session.rooms.length}} rooms:</h2>
+      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
-      <div v-for="room in session.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
         <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chat class="chat" v-if="session.currentRoom" />
+    <chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
     <div class="roomListSmall">
       <h1>[c]</h1>
       <h2>—</h2>
-      <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
+      <div v-for="(room, index) in matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
         <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
+    <chatInformation v-if="currentRoom" :room="currentRoom"/>
   </div>
 </template>
 
 <script>
-import matrix from '@/matrix.js';
 import chat from '@/views/chat.vue';
 import chatInformation from "@/components/chatInformation";
+import {matrix} from "@/main";
 
 export default {
   name: "rooms",
@@ -35,17 +37,21 @@ export default {
   },
   methods:{
     openChat(room){
-      this.session.currentRoom = room;
+      this.currentRoom = room;
-      this.$router.push(`/rooms/${room.roomId}`)
+      chat.data().room = room;
-      this.$forceUpdate()
+      chat.data().user = matrix.user;
-      let msgContainer = document.getElementById("messagesContainer")
+      this.$router.push(`/rooms/${room.roomId}`);
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
+      this.$forceUpdate();
     }
   },
   data(){
     return {
-      session: matrix.data().session
+      matrix,
+      currentRoom: undefined
     }
+  },
+  mounted() {
+    if (matrix.client === undefined) this.$router.push('/login');
   }
 }
 </script>