Merge pull request #2895 from nextcloud/bugfix/noid/immediately-update-last-message-preview

Immediately update last message preview in conversation list

src/App.vue

@@ -349,6 +349,7 @@ export default {
 
 				// this.$store.dispatch('purgeConversationsStore')
 				this.$store.dispatch('addConversation', response.data.ocs.data)
+				this.$store.dispatch('markConversationRead', token)
 
 				/**
 				 * Emits a global event that is used in App.vue to update the page title once the

src/FilesSidebarTabApp.vue

@@ -243,6 +243,7 @@ export default {
 
 			const response = await fetchConversation(this.token)
 			this.$store.dispatch('addConversation', response.data.ocs.data)
+			this.$store.dispatch('markConversationRead', this.item.token)
 		},
 
 		/**

src/PublicShareAuthSidebar.vue

@@ -156,6 +156,7 @@ export default {
 			try {
 				const response = await fetchConversation(this.token)
 				this.$store.dispatch('addConversation', response.data.ocs.data)
+				this.$store.dispatch('markConversationRead', this.item.token)
 
 				// Although the current participant is automatically added to
 				// the participants store it must be explicitly set in the

src/PublicShareSidebar.vue

@@ -193,6 +193,7 @@ export default {
 			try {
 				const response = await fetchConversation(this.token)
 				this.$store.dispatch('addConversation', response.data.ocs.data)
+				this.$store.dispatch('markConversationRead', this.item.token)
 
 				// Although the current participant is automatically added to
 				// the participants store it must be explicitly set in the

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -176,7 +176,7 @@ export default {
 		},
 
 		conversationInformation() {
-			if (!Object.keys(this.item.lastMessage).length) {
+			if (!Object.keys(this.lastChatMessage).length) {
 				return ''
 			}
 
@@ -184,7 +184,7 @@ export default {
 				return this.simpleLastChatMessage
 			}
 
-			if (this.item.lastMessage.actorId === this.$store.getters.getUserId()) {
+			if (this.lastChatMessage.actorId === this.$store.getters.getUserId()) {
 				return t('spreed', 'You: {lastMessage}', {
 					lastMessage: this.simpleLastChatMessage,
 				}, undefined, {
@@ -205,6 +205,30 @@ export default {
 			})
 		},
 
+		// The messages array for this conversation
+		messages() {
+			return this.$store.getters.messages(this.item.token)
+		},
+
+		// Get the last message for this conversation from the message store instead
+		// of the conversations store. The message store is updated immediately,
+		// while the conversations store is refreshed every 30 seconds. This allows
+		// to display message previews in this component as soon as new messages are
+		// received by the server.
+		lastChatMessage() {
+			const lastMessageTimestamp = this.item.lastMessage ? this.item.lastMessage.timestamp : 0
+
+			if (Object.keys(this.messages).length > 0) {
+				const messagesKeys = Object.keys(this.messages)
+				const lastMessageId = messagesKeys[messagesKeys.length - 1]
+
+				if (this.messages[lastMessageId].timestamp > lastMessageTimestamp) {
+					return this.messages[lastMessageId]
+				}
+			}
+			return this.item.lastMessage
+		},
+
 		/**
 		 * This is a simplified version of the last chat message.
 		 * Parameters are parsed without markup (just replaced with the name),
@@ -212,12 +236,12 @@ export default {
 		 * @returns {string} A simple message to show below the conversation name
 		 */
 		simpleLastChatMessage() {
-			if (!Object.keys(this.item.lastMessage).length) {
+			if (!Object.keys(this.lastChatMessage).length) {
 				return ''
 			}
 
-			const params = this.item.lastMessage.messageParameters
-			let subtitle = this.item.lastMessage.message.trim()
+			const params = this.lastChatMessage.messageParameters
+			let subtitle = this.lastChatMessage.message.trim()
 
 			// We don't really use rich objects in the subtitle, instead we fall back to the name of the item
 			Object.keys(params).forEach((parameterKey) => {
@@ -230,18 +254,18 @@ export default {
 		 * @returns {string} Part of the name until the first space
 		 */
 		shortLastChatMessageAuthor() {
-			if (!Object.keys(this.item.lastMessage).length
-				|| this.item.lastMessage.systemMessage.length) {
+			if (!Object.keys(this.lastChatMessage).length
+				|| this.lastChatMessage.systemMessage.length) {
 				return ''
 			}
 
-			let author = this.item.lastMessage.actorDisplayName.trim()
+			let author = this.lastChatMessage.actorDisplayName.trim()
 			const spacePosition = author.indexOf(' ')
 			if (spacePosition !== -1) {
 				author = author.substring(0, spacePosition)
 			}
 
-			if (author.length === 0 && this.item.lastMessage.actorType === 'guests') {
+			if (author.length === 0 && this.lastChatMessage.actorType === 'guests') {
 				return t('spreed', 'Guest')
 			}
 
@@ -259,6 +283,7 @@ export default {
 		},
 		async joinConversation() {
 			await joinConversation(this.item.token)
+			this.$store.dispatch('markConversationRead', this.item.token)
 		},
 		/**
 		 * Deletes the conversation.

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -100,6 +100,7 @@ export default {
 			}
 			if (to.name === 'conversation') {
 				joinConversation(to.params.token)
+				this.$store.dispatch('markConversationRead', to.params.token)
 			}
 		},
 		sortConversations(conversation1, conversation2) {
@@ -124,6 +125,9 @@ export default {
 				this.$store.dispatch('purgeConversationsStore')
 				conversations.data.ocs.data.forEach(conversation => {
 					this.$store.dispatch('addConversation', conversation)
+					if (conversation.token === this.$store.getters.getToken()) {
+						this.$store.dispatch('markConversationRead', this.$store.getters.getToken())
+					}
 				})
 				/**
 				 * Emits a global event that is used in App.vue to update the page title once the

src/store/conversationsStore.js

@@ -176,6 +176,18 @@ const actions = {
 
 		commit('addConversation', conversation)
 	},
+
+	async markConversationRead({ commit, getters }, token) {
+		const conversation = Object.assign({}, getters.conversations[token])
+		if (!conversation) {
+			return
+		}
+
+		conversation.unreadMessages = 0
+		conversation.unreadMention = false
+
+		commit('addConversation', conversation)
+	},
 }
 
 export default { state, mutations, getters, actions }