Expose room id in navigation

So rooms can be bookmarked, issue #26.

src/components/Chat.vue

@@ -337,7 +337,10 @@ export default {
   watch: {
     room: {
       immediate: true,
-      handler(room, ignoredOldVal) {
+      handler(room, oldRoom) {
+        if (room == oldRoom) {
+          return; // No change.
+        }
         console.log("Chat: Current room changed");
 
         // Clear old events

src/components/ChatHeader.vue

@@ -106,7 +106,7 @@ export default {
       .then(() => {
         console.log("Left room");
         this.$matrix.matrixClient.store.removeRoom(roomId);
-        this.$matrix.setCurrentRoomId(null);
+        this.$navigation.push({name:'Chat'}, -1);
       })
       .catch(err => {
         console.log("Error leaving", err);

src/components/Join.vue

@@ -62,6 +62,7 @@
 
 <script>
 import User from "../models/user";
+import util from "../plugins/utils";
 
 export default {
   name: "Join",
@@ -92,7 +93,7 @@ export default {
             const room = self.$matrix.getRoom(self.roomId);
             if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
               // Yes, go to room
-              self.$navigation.push({ name: "Chat" }, -1);
+              self.$navigation.push({ name: 'Chat', params: { roomId: util.sanitizeRoomId(self.roomId) }}, -1);
               return;
           }
           this.waitingForMembership = false;
@@ -144,11 +145,10 @@ export default {
           return this.$matrix.matrixClient.joinRoom(this.roomId);
         })
         .then((room) => {
-          this.$matrix.setCurrentRoomId(room.roomId);
           this.loading = false;
           this.loadingMessage = null;
           this.$nextTick(() => {
-            this.$navigation.push({ name: "Chat" }, -1);
+            this.$navigation.push({ name: "Chat", params: { roomId: room.roomId }}, -1);
           });
         })
         .catch((err) => {

src/components/Login.vue

@@ -75,7 +75,7 @@ export default {
   },
   created() {
     if (this.loggedIn) {
-      this.$navigation.push({name: "Chat"}, -1);
+      this.$navigation.push({name: "Chat", params: { roomId: null }}, -1);
     }
   },
   watch: {
@@ -114,7 +114,7 @@ export default {
         this.loading = true;
         this.$store.dispatch("auth/login", this.user).then(
           () => {
-            this.$navigation.push({name: "Chat"}, -1);
+            this.$navigation.push({name: "Chat", params: { roomId: null }}, -1);
           },
           (error) => {
             this.loading = false;

src/components/RoomList.vue

@@ -26,7 +26,7 @@ export default {
   watch: {
     currentRoomId() {
       this.$emit("close");
-      this.$matrix.setCurrentRoomId(this.currentRoomId);
+      this.$navigation.push({name: 'Chat', params: { roomId: this.currentRoomId }}, -1);
     },
   },
 };

src/plugins/utils.js

@@ -333,6 +333,13 @@ class Util {
         }
         return result;
     }
+
+    sanitizeRoomId(roomId) {
+        if (roomId && roomId.match(/^(!|#).+$/)) {
+            return roomId;
+        }
+        return null;
+    }
 }
 export default new Util();
 

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 //import Home from '../components/Home.vue'
 import Chat from '../components/Chat.vue'
 import Login from '../components/Login.vue'
+import util from '../plugins/utils'
 
 Vue.use(VueRouter)
 
@@ -13,7 +14,7 @@ const routes = [
     component: Chat
   },
   {
-    path: '/room/',
+    path: '/room/:roomId',
     name: 'Chat',
     component: Chat
   },
@@ -46,10 +47,11 @@ router.beforeEach((to, from, next) => {
   var authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join');
   const loggedIn = localStorage.getItem('user');
 
-  if (to.path.startsWith('/room/')) {
+  if (to.name == 'Chat') {
-    if (to.hash && to.hash.startsWith('#')) {
+    const roomId = util.sanitizeRoomId(to.params.roomId);
+    router.app.$matrix.setCurrentRoomId(roomId);
+    if (roomId && roomId.startsWith('#')) {
       //Invite to public room
-      router.app.$matrix.setCurrentRoomId(to.hash);
       authRequired = false;
     }
   }