Fix change route when chat room changes

webapp/components/Chat/Chat.vue

@@ -173,7 +173,7 @@ export default {
       roomsLoaded: false,
       roomPage: 0,
       roomPageSize: 10,
-      selectedRoom: this.roomId,
+      selectedRoom: null,
       loadingRooms: true,
       messagesLoaded: false,
       messagePage: 0,
@@ -209,17 +209,9 @@ export default {
       return chatStyle.STYLE.light
     },
     computedRoomId() {
-      let roomId = null
+      if (this.singleRoom) return null
 
-      if (!this.singleRoom) {
-        roomId = this.roomId
-
-        if (this.getStoreRoomId.roomId) {
-          roomId = this.getStoreRoomId.roomId
-        }
-      }
-
-      return roomId
+      return this.roomId
     },
     isSafari() {
       return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
@@ -241,6 +233,11 @@ export default {
       }
     },
   },
+  watch: {
+    selectedRoom(newRoom) {
+      this.$emit('room-selected', newRoom.id)
+    },
+  },
   methods: {
     ...mapMutations({
       commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
@@ -293,10 +290,13 @@ export default {
     },
 
     async fetchMessages({ room, options = {} }) {
-      if (this.selectedRoom?.id !== room.id) {
+      const roomId = room.id ?? this.computedRoomId
+      if (this.selectedRoom?.id !== roomId) {
         this.messages = []
         this.messagePage = 0
-        this.selectedRoom = room
+        if (room.id) {
+          this.selectedRoom = room
+        }
       }
       this.messagesLoaded = options.refetch ? this.messagesLoaded : false
       const offset = (options.refetch ? 0 : this.messagePage) * this.messagePageSize
@@ -306,7 +306,7 @@ export default {
         } = await this.$apollo.query({
           query: messageQuery(),
           variables: {
-            roomId: room.id,
+            roomId,
             first: this.messagePageSize,
             offset,
           },
@@ -424,6 +424,7 @@ export default {
       if (roomIndex !== -1) {
         const changedRoom = { ...this.rooms[roomIndex] }
         changedRoom.lastMessage.content = content
+        changedRoom.lastMessage.date = localMessage.date
 
         // Move changed room to the top of the list
         changedRoom.index = changedRoom.lastMessage.date

webapp/pages/chat.vue

@@ -7,17 +7,16 @@
     />
     <client-only>
       <chat
-        :roomId="getShowChat.showChat ? getShowChat.roomID : this.$route.params.roomId"
+        :roomId="this.$route.params.id"
         ref="chat"
         @toggle-user-search="showUserSearch = !showUserSearch"
-        :show-room="showRoom"
+        @room-selected="updateUrl"
       />
     </client-only>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
 import AddChatRoomByUserSearch from '~/components/Chat/AddChatRoomByUserSearch'
 import Chat from '~/components/Chat/Chat.vue'
 
@@ -31,24 +30,12 @@ export default {
       showUserSearch: false,
     }
   },
-  mounted() {
-    this.showChat({ showChat: false, roomID: null })
-  },
-  computed: {
-    ...mapGetters({
-      getShowChat: 'chat/showChat',
-    }),
-  },
   methods: {
-    ...mapMutations({
-      showChat: 'chat/SET_OPEN_CHAT',
-    }),
     addChatRoom(userID) {
       this.$refs.chat.newRoom(userID)
     },
-    showRoom(roomId) {
-      this.$router.push({ name: 'chat', params: { roomId } })
-      this.showChat({ showChat: true, roomID: roomId })
+    updateUrl(roomId) {
+      this.$router.push({ path: `/chat/${roomId}` })
     },
   },
 }