(fix) user state not realtime

Author: antoine92190

demo/src/ChatContainer.vue

@@ -191,8 +191,6 @@ export default {
 
 			users.map(user => roomList[user.roomId].users.push(user))
 
-			this.listenUsersOnlineStatus(users)
-
 			const roomMessages = await Promise.all(rawMessages).then(messages => {
 				return messages.map(message => {
 					return {
@@ -234,6 +232,7 @@ export default {
 			this.loadingRooms = false
 			this.rooms.map((room, index) => this.listenLastMessage(room, index))
 
+			this.listenUsersOnlineStatus()
 			this.listenRoomsTypingUsers(query)
 		},
 
@@ -522,35 +521,41 @@ export default {
 				})
 		},
 
-		listenUsersOnlineStatus(users) {
-			users.map(user => {
-				firebase
-					.database()
-					.ref('/status/' + user._id)
-					.on('value', snapshot => {
-						if (!snapshot.val()) return
-
-						const foundUser = users.find(u => snapshot.key === u._id)
-
-						if (foundUser) {
-							const timestampFormat = isSameDay(
-								new Date(snapshot.val().last_changed),
-								new Date()
-							)
-								? 'HH:mm'
-								: 'DD MMMM, HH:mm'
-
-							const timestamp = parseTimestamp(
-								new Date(snapshot.val().last_changed),
-								timestampFormat
-							)
-
-							const last_changed =
-								timestampFormat === 'HH:mm' ? `today, ${timestamp}` : timestamp
-
-							foundUser.status = { ...snapshot.val(), last_changed }
-						}
-					})
+		listenUsersOnlineStatus() {
+			this.rooms.map((room, index) => {
+				room.users.map(user => {
+					firebase
+						.database()
+						.ref('/status/' + user._id)
+						.on('value', snapshot => {
+							if (!snapshot.val()) return
+
+							const foundUser = room.users.find(u => snapshot.key === u._id)
+
+							if (foundUser) {
+								const timestampFormat = isSameDay(
+									new Date(snapshot.val().last_changed),
+									new Date()
+								)
+									? 'HH:mm'
+									: 'DD MMMM, HH:mm'
+
+								const timestamp = parseTimestamp(
+									new Date(snapshot.val().last_changed),
+									timestampFormat
+								)
+
+								const last_changed =
+									timestampFormat === 'HH:mm'
+										? `today, ${timestamp}`
+										: timestamp
+
+								user.status = { ...snapshot.val(), last_changed }
+
+								this.$set(this.rooms, index, room)
+							}
+						})
+				})
 			})
 		},
 

src/ChatWindow/ChatWindow.vue

@@ -2,6 +2,7 @@
 	<div class="card-window" :style="[{ height }, cssVars]">
 		<div class="chat-container">
 			<rooms-list
+				:currentUserId="currentUserId"
 				:rooms="rooms"
 				:loadingRooms="loadingRooms"
 				:room="room"
@@ -15,7 +16,8 @@
 			</rooms-list>
 			<room
 				:currentUserId="currentUserId"
-				:room="room"
+				:rooms="rooms"
+				:roomId="room.roomId || ''"
 				:messages="messages"
 				:messagesLoaded="messagesLoaded"
 				:menuActions="menuActions"

src/ChatWindow/Room.vue

@@ -71,7 +71,7 @@
 					</infinite-loading>
 				</transition>
 				<transition-group name="fade-message">
-					<div v-for="(message, i) in messages" :key="i">
+					<div v-for="(message, i) in messages" :key="message._id">
 						<message
 							:currentUserId="currentUserId"
 							:message="message"
@@ -234,7 +234,8 @@ export default {
 		textMessages: { type: Object, required: true },
 		showRoomsList: { type: Boolean, required: true },
 		isMobile: { type: Boolean, required: true },
-		room: { type: Object, required: true },
+		rooms: { type: Array, required: true },
+		roomId: { type: String, required: true },
 		messages: { type: Array, required: true },
 		messagesLoaded: { type: Boolean, required: true },
 		menuActions: { type: Array, required: true },
@@ -310,14 +311,14 @@ export default {
 				setTimeout(() => {
 					options.behavior = 'smooth'
 					element.scrollTo(options)
-				}, 0)
+				}, 50)
 			}
 
 			if (this.infiniteState) {
 				this.infiniteState.loaded()
 			} else if (newVal.length) {
 				this.loadingMessages = false
-				setTimeout(() => element.scrollTo(options), 0)
+				setTimeout(() => element.scrollTo(options), 50)
 			}
 		},
 		messagesLoaded(val) {
@@ -338,6 +339,9 @@ export default {
 	},
 
 	computed: {
+		room() {
+			return this.rooms.find(room => room.roomId === this.roomId) || {}
+		},
 		showNoMessages() {
 			return (
 				this.room.roomId &&