Fix join timing issue

package.json

@@ -15,7 +15,7 @@
     "js-sha256": "^0.9.0",
     "json-web-key": "^0.4.0",
     "material-design-icons-iconfont": "^5.0.1",
-    "matrix-js-sdk": "^9.0.1",
+    "matrix-js-sdk": "^9.4.1",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "raw-loader": "^4.0.2",
     "roboto-fontface": "*",

src/components/Chat.vue

@@ -397,7 +397,7 @@ export default {
     },
 
     onRoomNotJoined() {
-      this.$navigation.push({ name: "Join", hash: this.roomId }, 0);
+      this.$navigation.push({ name: "Join", params: { roomId: this.roomId }}, 0);
     },
 
     touchX(event) {

src/components/ChatHeader.vue

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

src/components/Join.vue

@@ -79,7 +79,9 @@ export default {
     };
   },
   mounted() {
-    this.roomId = this.$route.hash;
+    this.$matrix.on("Room.myMembership", this.onMyMembership);
+
+    this.roomId = this.$matrix.currentRoomId;
     this.roomName = this.roomId;
     if (this.currentUser) {
       this.waitingForMembership = true;
@@ -87,14 +89,23 @@ export default {
       this.$matrix
         .getMatrixClient(this.currentUser)
         .then(() => {
-            self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
+          self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
 
-            // Already joined?
+          // Already joined?
-            const room = self.$matrix.getRoom(self.roomId);
+          const room = self.$matrix.getRoom(self.roomId);
-            if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
+          if (
-              // Yes, go to room
+            room &&
-              self.$navigation.push({ name: 'Chat', params: { roomId: util.sanitizeRoomId(self.roomId) }}, -1);
+            room.hasMembershipState(self.currentUser.user_id, "join")
-              return;
+          ) {
+            // Yes, go to room
+            self.$navigation.push(
+              {
+                name: "Chat",
+                params: { roomId: util.sanitizeRoomId(self.roomId) },
+              },
+              -1
+            );
+            return;
           }
           this.waitingForMembership = false;
         })
@@ -103,18 +114,30 @@ export default {
         });
     }
 
-    this.$matrix
+    if (this.roomId.startsWith("#")) {
-      .getPublicRoomInfo(this.roomId)
+      this.$matrix
-      .then((room) => {
+        .getPublicRoomInfo(this.roomId)
-        console.log("Found room:", room);
+        .then((room) => {
-        this.roomName = room.name;
+          console.log("Found room:", room);
-        this.roomAvatar = room.avatar;
+          this.roomName = room.name;
-        this.waitingForInfo = false;
+          this.roomAvatar = room.avatar;
-      })
+          this.waitingForInfo = false;
-      .catch((err) => {
+        })
-        console.log("Could not find room info", err);
+        .catch((err) => {
-        this.waitingForInfo = false;
+          console.log("Could not find room info", err);
-      });
+          this.waitingForInfo = false;
+        });
+    } else {
+      // Private room, try to get name
+      const room = this.$matrix.getRoom(this.roomId);
+      if (room) {
+        this.roomName = room.name || this.roomName;
+      }
+      this.waitingForInfo = false;
+    }
+  },
+  destroyed() {
+    this.$matrix.off("Room.myMembership", this.onMyMembership);
   },
   computed: {
     currentUser() {
@@ -122,6 +145,12 @@ export default {
     },
   },
   methods: {
+    onMyMembership(room, membership, ignoredprevMembership) {
+      if (room && room.roomId == this.roomId && membership == "join") {
+        this.$navigation.push({ name: "Chat", params: { roomId: this.roomId } },-1);
+      }
+    },
+
     handleLogin() {
       this.$navigation.push({ name: "Login" }, 1);
     },
@@ -148,7 +177,10 @@ export default {
           this.loading = false;
           this.loadingMessage = null;
           this.$nextTick(() => {
-            this.$navigation.push({ name: "Chat", params: { roomId: room.roomId }}, -1);
+            this.$navigation.push(
+              { name: "Chat", params: { roomId: room.roomId } },
+              -1
+            );
           });
         })
         .catch((err) => {

src/components/RoomInfo.vue

@@ -4,7 +4,7 @@
       <v-row class="chat-header-row align-center">
 
         <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
-          <v-btn icon @click.stop="$router.go(-1)">
+          <v-btn v-show="$navigation && $navigation.canPop()" icon @click.stop="$navigation.pop">
             <v-icon>arrow_back</v-icon>
           </v-btn>
         </v-col>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 //import Home from '../components/Home.vue'
 import Chat from '../components/Chat.vue'
+import Join from '../components/Join.vue'
 import Login from '../components/Login.vue'
 import util from '../plugins/utils'
 
@@ -31,10 +32,9 @@ const routes = [
     props: true
   },
   {
-    path: '/join/',
+    path: '/join/:roomId?',
     name: 'Join',
-    component: () => import('../components/Join.vue'),
+    component: Join
-    props: true
   },
 ]
 
@@ -44,10 +44,14 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   const publicPages = ['/login'];
-  var authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join');
+  var authRequired = !publicPages.includes(to.path);
   const loggedIn = localStorage.getItem('user');
 
-  if (to.name == 'Chat') {
+  if (to.name == 'Join' && !to.params.roomId && to.hash) {
+    to.params.roomId = to.hash;
+  }
+
+  if (to.name == 'Chat' || to.name == 'Join') {
     const roomId = util.sanitizeRoomId(to.params.roomId);
     router.app.$matrix.setCurrentRoomId(roomId);
     if (roomId && roomId.startsWith('#')) {

src/services/matrix.service.js

@@ -312,11 +312,14 @@ export default {
                             }
                         }
                         if (response.next_batch) {
-                            return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000, next_batch:response.next_batch})
+                            return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000, since:response.next_batch})
                             //return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
                             .then(response => {
                                 return _findOrGetMore(response);
-                            }) 
+                            })
+                            .catch(err => {
+                                return Promise.reject("Failed to find room: " + err);
+                            });
                         } else {
                             return Promise.reject("No more data");
                         }
@@ -326,6 +329,9 @@ export default {
                     //return tempMatrixClient.publicRooms({limit:1})
                     .then(response => {
                         return findOrGetMore(response);
+                    })
+                    .catch(err => {
+                        return Promise.reject("Failed to find room: " + err);
                     });
                 }
             }