More work on chat header

src/components/Chat.vue

@@ -213,7 +213,6 @@ export default {
 
   data() {
     return {
-      room: null,
       events: [],
       currentInput: "",
       contactIsTyping: false,
@@ -250,8 +249,14 @@ export default {
   },
 
   computed: {
+    room() {
+      return this.$matrix.currentRoom;
+    },
     roomId() {
-      return this.$matrix.currentRoomId;
+      if (!this.room) {
+        return null;
+      }
+      return this.room.roomId;
     },
     sendButtonDisabled() {
       return this.currentInput.length == 0;
@@ -259,24 +264,19 @@ export default {
   },
 
   watch: {
-    roomId: {
-      handler(ignoredNewVal, ignoredOldVal) {
+    room: {
+      handler(room, ignoredOldVal) {
         console.log("Chat: Current room changed");
 
         // Clear old events
         this.events = [];
         this.timelineWindow = null;
         this.contactIsTyping = false;
-
-        if (!this.roomId) {
+        
+        if (!room) {
           return; // no room
         }
 
-        this.room = this.$matrix.getRoom(this.roomId);
-        if (!this.room) {
-          return; // Not found
-        }
-
         this.timelineWindow = new TimelineWindow(
           this.$matrix.matrixClient,
           this.room.getUnfilteredTimelineSet(),

src/components/ChatHeader.vue

@@ -1,20 +1,20 @@
 <template>
-  <v-container fluid>
+  <v-container fluid v-if="room">
     <v-row class="chat-header-row">
       <v-col
         class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
       >
-        <v-btn icon class="members-icon" @click.stop="showRoomInfo">
-          <v-icon>people</v-icon>
-        </v-btn>
-        <div class="num-members">{{ memberCount }}</div>
+        <v-avatar>
+          <v-img :src="room.avatar" />
+        </v-avatar>
       </v-col>
 
       <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-        <div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
+        <div class="room-name" @click.stop="showRoomInfo">{{ room.summary.info.title }}</div>
+        <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
       <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
-        <v-btn class="leave-button">Leave</v-btn>
+        <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -46,7 +46,11 @@ export default {
   watch: {
     room: {
       handler(newVal, ignoredOldVal) {
-        this.memberCount = newVal.getJoinedMemberCount();
+        if (newVal) {
+          this.memberCount = newVal.getJoinedMemberCount();
+        } else {
+          this.memberCount = null;
+        }
       },
     },
   },
@@ -68,6 +72,20 @@ export default {
     showRoomInfo() {
       this.$router.push({ name: "RoomInfo" });
     },
+
+    leaveRoom() {
+      //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
+      const roomId = this.room.roomId;
+      this.$matrix.matrixClient.leave(roomId, undefined)
+      .then(() => {
+        console.log("Left room");
+        this.$matrix.matrixClient.store.removeRoom(roomId);
+        this.$matrix.setCurrentRoomId(null);
+      })
+      .catch(err => {
+        console.log("Error leaving", err);
+      });
+    }
   },
 };
 </script>