Add matrix service to $matrix and move room handling to that

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app>
-    <v-app-bar app dark>
+    <v-app-bar app dark flat color="#008860">
       <v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
         <v-icon>menu</v-icon>
       </v-app-bar-nav-icon>
 
       <v-toolbar-title
-        >Keanu{{ room ? " - " + room.name : "" }}</v-toolbar-title
+        >Keanu{{ $matrix.currentRoom ? (" - " + $matrix.currentRoom.summary.info.title) : "" }}</v-toolbar-title
       >
 
       <v-spacer></v-spacer>
@@ -39,8 +39,7 @@
     <v-navigation-drawer app v-model="openDrawer">
       <v-list nav dense>
         <RoomList
-          v-if="$matrixClient != null"
+          v-if="$matrix.ready"
-          v-on:onCurrentRoomChanged="onCurrentRoomChanged"
         />
       </v-list>
     </v-navigation-drawer>
@@ -54,7 +53,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 import RoomList from "./components/RoomList";
 
 export default {
@@ -64,7 +62,6 @@ export default {
   },
   data: () => ({
     openDrawer: false,
-    currentRoom: null,
   }),
   mounted() {
     this.$router.replace("/");
@@ -76,28 +73,22 @@ export default {
     logOut() {
       this.$store.dispatch("auth/logout");
       this.$router.replace("/login");
-      this.$store.commit("setCurrentRoom", null);
-    },
-    onCurrentRoomChanged(room) {
-      this.$store.commit("setCurrentRoom", room);
     },
   },
   computed: {
     currentUser() {
       return this.$store.state.auth.user;
     },
-    room() {
-      return this.$store.state.currentRoom;
-    },
   },
   watch: {
     currentUser: {
       immediate: true,
       handler(ignorednewVal, ignoredoldVal) {
         if (this.loggedIn) {
+          const self = this;
           this.$matrix.getMatrixClient(this.currentUser)
-            .then((matrixClient) => {
+            .then(() => {
-              Vue.prototype.$matrixClient = matrixClient;
+              self.$matrix.initClient();
             })
             .catch((error) => {
               console.log("Error creating client", error);

src/assets/css/chat.scss

@@ -1,4 +1,4 @@
-$chat-background: #f5fdf5;
+$chat-background: #008860;
 $chat-standard-padding: 32px;
 $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;

src/components/Chat.vue

@@ -10,7 +10,7 @@
         <div
           class="messageJoin"
           v-if="
-            event.event.state_key != myAddress &&
+            event.event.state_key != myUserId &&
             event.getContent().membership == 'join' &&
             event.getType() == 'm.room.member'
           "
@@ -22,7 +22,7 @@
         <div
           class="messageJoin"
           v-if="
-            event.event.state_key != myAddress &&
+            event.event.state_key != myUserId &&
             event.getContent().membership == 'leave' &&
             event.getType() == 'm.room.member'
           "
@@ -34,7 +34,7 @@
         <div
           class="messageJoin"
           v-if="
-            event.event.state_key != myAddress &&
+            event.event.state_key != myUserId &&
             event.getContent().membership == 'invite' &&
             event.getType() == 'm.room.member'
           "
@@ -44,7 +44,7 @@
 
         <div
           v-else-if="
-            event.getSender() != myAddress &&
+            event.getSender() != myUserId &&
             event.getType() == 'm.room.message'
           "
         >
@@ -108,81 +108,76 @@ export default {
   }),
 
   computed: {
-    room() {
+    myUserId() {
-      return this.$store.state.currentRoom;
+      return this.$store.state.auth.user.user_id;
     },
     roomId() {
-      return this.room != null ? this.room.roomId : null;
+      return this.$matrix.currentRoomId;
     },
     sendButtonDisabled() {
       return this.currentInput.length == 0;
     },
-    myAddress() {
-      // TODO
-      return "@npex2:neo.keanu.im";
-    },
   },
 
   watch: {
-    room() {
+    roomId() {
       console.log("Chat: Current room changed");
 
       // Clear old events
       this.events = [];
 
       // Remove all old room listeners
-      this.$matrixClient.removeAllListeners("Room.timeline");
+      this.$matrix.off("Room.timeline", this.onEvent);
-      this.$matrixClient.removeAllListeners("RoomMember.typing");
+      this.$matrix.off("RoomMember.typing", this.onUserTyping);
 
       this.contactIsTyping = false;
 
-      if (!this.room) {
+      if (!this.roomId) {
         return; // no room
       }
+      const room = this.$matrix.getRoom(this.roomId);
+      if (!room) {
+        return; // Not found
+      }
 
-      this.room.timeline.forEach((event) => {
+      room.timeline.forEach((event) => {
         this.handleMatrixEvent(event);
       });
 
       // Add event listener for this room
-      this.$matrixClient.on(
+      this.$matrix.on("Room.timeline", this.onEvent);
-        "Room.timeline",
+      this.$matrix.on("RoomMember.typing", this.onUserTyping);
-        function (event, ignoredroom, ignoredtoStartOfTimeline) {
-          if (event.getRoomId() !== this.roomId) {
-            return; // Not for this room
-          }
-          if (this.handleMatrixEvent(event)) {
-            this.$nextTick(function () {
-              const container = this.$refs.chatContainer;
-              if (container.children.length > 0) {
-                const lastChild =
-                  container.children[container.children.length - 1];
-                console.log("Scroll into view", lastChild);
-                window.requestAnimationFrame(() => {
-                  lastChild.scrollIntoView({
-                    behavior: "smooth",
-                    block: "end",
-                    inline: "nearest",
-                  });
-                });
-              }
-            });
-          }
-        }.bind(this)
-      );
-
-      this.$matrixClient.on(
-        "RoomMember.typing",
-        function (event, member) {
-          if (member.userId == this.contactAddress) {
-            this.contactIsTyping = member.typing;
-          }
-        }.bind(this)
-      );
     },
   },
 
   methods: {
+    onEvent(event) {
+      if (event.getRoomId() !== this.roomId) {
+        return; // Not for this room
+      }
+      if (this.handleMatrixEvent(event)) {
+        this.$nextTick(function () {
+          const container = this.$refs.chatContainer;
+          if (container.children.length > 0) {
+            const lastChild = container.children[container.children.length - 1];
+            console.log("Scroll into view", lastChild);
+            window.requestAnimationFrame(() => {
+              lastChild.scrollIntoView({
+                behavior: "smooth",
+                block: "end",
+                inline: "nearest",
+              });
+            });
+          }
+        });
+      }
+    },
+
+    onUserTyping(event) {
+      //TODO
+      console.log("Typing:", event);
+    },
+
     /**
      * Handle a matrix event. Add it to our array if valid type.
      * @returns True if the event was added, false otherwise.

src/components/RoomList.vue

@@ -1,8 +1,8 @@
 <template>
   <v-list flat>
     <v-subheader>ROOMS</v-subheader>
-    <v-list-item-group v-model="currentRoomIndex" color="primary">
+    <v-list-item-group v-model="currentRoomId" color="primary">
-      <v-list-item v-for="(room, i) in rooms" :key="i">
+      <v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
         <v-list-item-icon>
           <v-icon v-text="room.icon"></v-icon>
         </v-list-item-icon>
@@ -11,12 +11,11 @@
             v-text="room.summary.info.title"
           ></v-list-item-title>
           <v-list-item-content
-            >Topic: {{ room.summary.info.desc }}</v-list-item-content
+            >Topic: {{ room.topic }}</v-list-item-content
           >
         </v-list-item-content>
       </v-list-item>
     </v-list-item-group>
-    <v-btn @click="reloadRooms">Refresh</v-btn>
   </v-list>
 </template>
 
@@ -25,68 +24,12 @@ export default {
   name: "RoomList",
 
   data: () => ({
-    rooms: [],
+    currentRoomId: -1,
-    currentRoomIndex: -1,
   }),
 
-  mounted() {
-    this.reloadRooms();
-    this.$matrixClient.on("Room.name", this.onRoomNameChanged);
-    this.$matrixClient.on("event", this.onEvent);
-  },
-
-  destroyed() {
-    this.$matrixClient.off("Room.name", this.onRoomNameChanged);
-    this.$matrixClient.off("event", this.onEvent);
-  },
-
   watch: {
-    currentRoomIndex() {
+    currentRoomId() {
-      var currentRoom =
+      this.$matrix.setCurrentRoomId(this.currentRoomId);
-        this.currentRoomIndex >= 0 && this.currentRoomIndex < this.rooms.length
-          ? this.rooms[this.currentRoomIndex]
-          : null;
-      this.$emit("onCurrentRoomChanged", currentRoom);
-    },
-  },
-
-  methods: {
-    onEvent(event) {
-       if (event.getType() == "m.room.topic") {
-           const room = this.rooms.find((r) => {
-               return (r.roomId == event.getRoomId());
-           })
-           if (room) {
-               room.summary.info.desc = event.getContent().topic;
-           }
-           return;
-        }
-
-      const allowedEvents = [
-        "m.room.message"
-      ];
-      if (allowedEvents.includes(event.getType())) {
-          // TODO - find "last message"...
-      }
-    },
-
-    onRoomNameChanged(room) {
-        console.log("New name for room: " + room.name);
-    },
-
-    reloadRooms() {
-      var rooms = this.$matrixClient.getVisibleRooms();
-      rooms.forEach((room) => {
-        console.log("Room", room);
-      });
-      this.rooms = rooms;
-
-      // Default to first room if available
-      if (this.rooms.length > 0 && this.currentRoomIndex == -1) {
-        this.currentRoomIndex = 0;
-      } else if (this.rooms.length == 0) {
-        this.currentRoomIndex = -1;
-      }
     },
   },
 };

src/main.js

@@ -9,6 +9,8 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
 Vue.config.productionTip = false
 
+Vue.use(matrix, {store: store});
+
 new Vue({
   vuetify,
   router,

src/services/matrix.service.js

@@ -1,6 +1,5 @@
 global.Olm = require("olm");
 import sdk from "matrix-js-sdk";
-import Vue from 'vue';
 
 const LocalStorageCryptoStore = require("matrix-js-sdk/lib/crypto/store/localStorage-crypto-store")
     .LocalStorageCryptoStore;
@@ -8,88 +7,184 @@ sdk.setCryptoStoreFactory(
     () => new LocalStorageCryptoStore(window.localStorage)
 );
 
-class MatrixService {
+export default {
-    constructor() {
+    install(Vue, options) {
-        this.matrixClient = null;
+        if (!options || !options.store) {
-    }
+            throw new Error('Please initialise plugin with a Vuex store.')
-
-    login(user) {
-        const tempMatrixClient = sdk.createClient(user.server);
-        return tempMatrixClient
-            .login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
-            .then((response) => {
-                localStorage.setItem('user', JSON.stringify(response));
-                return response;
-            })
-    }
-
-    logout() {
-        localStorage.removeItem('user');
-    }
-
-    async getMatrixClient(user) {
-        const matrixStore = new sdk.MemoryStore(window.localStorage);
-        const webStorageSessionStore = new sdk.WebStorageSessionStore(
-            window.localStorage
-        );
-
-        var homeServer = user.home_server;
-        if (!homeServer.startsWith("https://")) {
-            homeServer = "https://" + homeServer;
         }
 
-        var opts = {
+        const store = options.store;
-            baseUrl: homeServer,
+
-            userId: user.user_id,
+        const matrixService = new Vue({
-            store: matrixStore,
+            store,
-            sessionStore: webStorageSessionStore,
+
-            deviceId: user.device_id,
+            data() {
-            accessToken: user.access_token
+                return {
-        }
+                    matrixClient: null,
-        user.matrixClient = sdk.createClient(opts);
+                    rooms: [],
-        return user.matrixClient
-            .initCrypto()
-            .then(() => {
-                console.log("Crypto initialized");
-                user.matrixClient.startClient();
-                return user.matrixClient;
-            })
-            .then(matrixClient => {
-                if (matrixClient.isInitialSyncComplete()) {
-                    console.log("Initial sync done already!");
-                    return matrixClient;
-                } else {
-                    return new Promise((resolve, reject) => {
-                        matrixClient.once(
-                            "sync",
-                            function (state, ignoredprevState, ignoredres) {
-                                console.log(state); // state will be 'PREPARED' when the client is ready to use
-                                if (state == "PREPARED") {
-                                    resolve(matrixClient);
-                                } else if (state == "ERROR") {
-                                    reject("Error syncing");
-                                }
-                            }
-                        )
-                    });
                 }
-            });
+            },
+            mounted() {
+                console.log("Matrix service mounted");
+            },
+
+            computed: {
+                ready() {
+                    return this.matrixClient != null;
+                },
+
+                currentUser() {
+                    return this.$store.state.auth.user;
+                },
+
+                currentRoomId() {
+                    return this.$store.state.currentRoomId;
+                },
+                
+                currentRoom() {
+                    return this.getRoom(this.currentRoomId);
+                },
+              
+            },
+
+            methods: {
+                login(user) {
+                    const tempMatrixClient = sdk.createClient(user.server);
+                    var retUser;
+                    return tempMatrixClient
+                        .login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
+                        .then((response) => {
+                            localStorage.setItem('user', JSON.stringify(response));
+                            return response;
+                        })
+                        .then(user => {
+                            retUser = user;
+                            return this.getMatrixClient(user);
+                        })
+                        .then(() => {
+                            // Ready to use! Start by loading rooms.
+                            this.initClient();
+                            return retUser;
+                        })
+                },
+
+                logout() {
+                    if (this.matrixClient) {
+                        this.removeMatrixClientListeners(this.matrixClient);
+                        this.matrixClient.stopClient();
+                        this.matrixClient = null;
+                        localStorage.removeItem('user');
+                    }
+                    this.$store.commit("setCurrentRoomId", null);
+                },
+
+                initClient() {
+                    this.reloadRooms();
+                },
+
+                async getMatrixClient(user) {
+                    const matrixStore = new sdk.MemoryStore(window.localStorage);
+                    const webStorageSessionStore = new sdk.WebStorageSessionStore(
+                        window.localStorage
+                    );
+
+                    var homeServer = user.home_server;
+                    if (!homeServer.startsWith("https://")) {
+                        homeServer = "https://" + homeServer;
+                    }
+
+                    var opts = {
+                        baseUrl: homeServer,
+                        userId: user.user_id,
+                        store: matrixStore,
+                        sessionStore: webStorageSessionStore,
+                        deviceId: user.device_id,
+                        accessToken: user.access_token
+                    }
+                    this.matrixClient = sdk.createClient(opts);
+                    return this.matrixClient
+                        .initCrypto()
+                        .then(() => {
+                            console.log("Crypto initialized");
+
+                            this.addMatrixClientListeners(this.matrixClient);
+
+                            this.matrixClient.startClient();
+                            return this.matrixClient;
+                        })
+                        .then(matrixClient => {
+                            if (matrixClient.isInitialSyncComplete()) {
+                                console.log("Initial sync done already!");
+                                return matrixClient;
+                            } else {
+                                return new Promise((resolve, reject) => {
+                                    matrixClient.once(
+                                        "sync",
+                                        function (state, ignoredprevState, ignoredres) {
+                                            console.log(state); // state will be 'PREPARED' when the client is ready to use
+                                            if (state == "PREPARED") {
+                                                resolve(matrixClient);
+                                            } else if (state == "ERROR") {
+                                                reject("Error syncing");
+                                            }
+                                        }
+                                    )
+                                });
+                            }
+                        });
+                },
+
+                addMatrixClientListeners(client) {
+                    if (client) {
+                        client.on("event", this.onEvent);
+                    }
+                },
+
+                removeMatrixClientListeners(client) {
+                    if (client) {
+                        client.off("event", this.onEvent);
+                    }
+                },
+
+                onEvent(event) {
+                    if (event.getType() == "m.room.topic") {
+                        const room = this.matrixClient.getRoom(event.getRoomId());
+                        if (room) {
+                            Vue.set(room, "topic", event.getContent().topic);
+                        }
+                        return;
+                     }
+                },
+
+                reloadRooms() {
+                    this.rooms = this.matrixClient.getVisibleRooms();
+                },
+
+                setCurrentRoomId(roomId) {
+                    this.$store.commit("setCurrentRoomId", roomId);
+                },
+
+                getRoom(roomId) {
+                    if (this.matrixClient) {
+                        return this.matrixClient.getRoom(roomId);
+                    }
+                    return null;
+                },
+
+                on(event, handler) {
+                    if (this.matrixClient) {
+                        this.matrixClient.on(event, handler);
+                    }
+                },
+
+                off(event, handler) {
+                    if (this.matrixClient) {
+                        this.matrixClient.off(event, handler);
+                    }
+                }
+            }
+        })
+
+        Vue.prototype.$matrix = matrixService;
     }
 }
-
-const matrixService = new MatrixService();
-const matrixServicePlugin = {}
-matrixServicePlugin.install = function (Vue, ignoredOptions) {
-  Vue.prototype.$matrix = matrixService;
-
-  Vue.mixin({
-    mounted: function () {
-      // Store the VUE instance root in our own $root variable.
-      matrixService.$root = this.$root;
-    }
-  })
-}
-
-Vue.use(matrixServicePlugin);
-
-export default MatrixService;

src/store/index.js

@@ -7,11 +7,11 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
-        currentRoom: null
+        currentRoomId: null
     },
     mutations: {
-        setCurrentRoom(state, room) {
+        setCurrentRoomId(state, roomId) {
-            state.currentRoom = room;
+            state.currentRoomId = roomId;
         },
     },
     actions: {