Forget room when leaving

Also, don't flicker "join" view when knock is accepted. Issues #651 and #653

src/components/UserProfileDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <v-dialog
     v-model="showDialog"
+    v-bind="{ ...$attrs }"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
     scroll-strategy="none"
@@ -36,7 +37,6 @@
           <p class="font-weight-light">{{ sharedRooms.slice(0, 3).join(", ") }}</p>
         </template>
       </div>
-      {{ message }}
       <DeviceList :member="activeMember" />
       <div class="py-3" v-if="activeMember.userId != $matrix.currentUserId">
         <div v-if="activeMember.membership == 'knock'">

src/services/matrix.service.js

@@ -42,6 +42,7 @@ export default {
             matrixClient: null,
             matrixClientReady: false,
             rooms: [],
+            roomMap: {}, // Map id to room
             userDisplayName: null,
             userAvatar: null,
             currentRoom: null,
@@ -94,13 +95,13 @@ export default {
 
         invites() {
             return this.rooms.filter((room) => {
-                return room.getMyMembership() === "invite";
+                return room.getMyMembership() === "invite" && !room.autoJoining;
             });
         },
 
         knockedRooms() {
             return this.rooms.filter((room) => {
-                return room.getMyMembership() === "knock";
+                return room.getMyMembership() === "knock" || (room.getMyMembership() === "invite" && room.autoJoining);
             });
         },
 
@@ -259,6 +260,7 @@ export default {
             this.$store.commit("setUser", null);
             this.$store.commit("setCurrentRoomId", null);
             this.rooms = [];
+            this.roomMap = {};
             this.userDisplayName = null;
             this.userAvatar = null;
             this.currentRoom = null;
@@ -429,7 +431,7 @@ export default {
                 case "m.room.join_rules":
                     {
                         const room = this.matrixClient.getRoom(event.getRoomId());
-                        if (room && room.getJoinRule() == "private" && room.getMyMembership() == "invite") {
+                        if (room && room.getJoinRule() == "private" && room.getMyMembership() == "invite" && !room.autoJoining) {
                             // We have an invite to a room that's now "private"? This is most probably a deleted DM room.
                             // Reject the invite, i.e. call "leave" on it.
                             this.matrixClient.leave(room.roomId);
@@ -488,11 +490,21 @@ export default {
             if (membership === "invite") {
                 if (prevMembership === "knock") {
                     // This is someone accepting our knock! Auto-join.
-                    this.matrixClient.joinRoom(room.roomId);
+                    room.autoJoining = true;
+                    this.$nextTick(() => {
+                        this.matrixClient.joinRoom(room.roomId)
+                            .catch((err) => {
+                            })
+                            .finally(() => {
+                            })
+                    })
+                    return;
                 }
                 // Invitation. Need to call "recalculate" to pick
                 // up room name, not sure why exactly.
                 room.recalculate();
+            } else if (membership === "join" || membership === "leave") {
+                room.autoJoining = false
             }
             this.reloadRooms();
         },
@@ -567,16 +579,24 @@ export default {
         },
 
         reloadRooms() {
-            // TODO - do incremental update instead of replacing the whole array
-            // each time!
             var updatedRooms = this.matrixClient.getVisibleRooms();
             updatedRooms = updatedRooms.filter((room) => {
                 return room.getMyMembership() && ["invite", "join", "knock"].includes(room.getMyMembership()) && room.currentState.getStateEvents(STATE_EVENT_ROOM_DELETED).length == 0;
             });
-            updatedRooms.forEach((room) => {
+            
+            const newRooms = updatedRooms.filter((r) => !this.roomMap[r.roomId]);
+            const updatedRoomIds = updatedRooms.map((r) => r.roomId);
+            
+            // remove rooms that are no longer there
+            const rooms = this.rooms.filter((r) => updatedRoomIds.includes(r.roomId));
+            
+            newRooms.forEach((room) => {
                 room["avatar"] = room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true, this.useAuthedMedia);
             });
-            this["rooms"] = updatedRooms;
+            this.rooms = [...rooms, ...newRooms];
+            let map = {};
+            this.rooms.forEach((r) => map[r.roomId] = r);
+            this.roomMap = map;
 
             const resolvedId =
                 this.currentRoomId && this.currentRoomId.startsWith("#")
@@ -658,10 +678,10 @@ export default {
             return this.matrixClient.leave(roomId).then(() => {
                 this.$store.commit("setCurrentRoomId", null);
                 this.rooms = this.rooms.filter((room) => {
-                    room.roomId != roomId;
+                    return room.roomId != roomId;
                 });
-                //this.matrixClient.store.removeRoom(roomId);
-                //this.matrixClient.forget(roomId, true, undefined);
+                delete this.roomMap[roomId];
+                this.matrixClient.forget(roomId, true);
             });
         },