fix(conversation): reuse read/unread server response for store update

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js

@@ -378,10 +378,6 @@ describe('MessageButtonsBar.vue', () => {
 				id: 100,
 				updateVisually: true,
 			})
-
-			expect(fetchConversationAction).toHaveBeenCalledWith(expect.anything(), {
-				token: TOKEN,
-			})
 		})
 
 		test('copies message link', async () => {

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -722,9 +722,6 @@ export default {
 				id: this.previousMessageId,
 				updateVisually: true,
 			})
-
-			// reload conversation to update additional attributes that have computed values
-			await this.$store.dispatch('fetchConversation', { token: this.token })
 		},
 
 		handleReactionClick(selectedEmoji) {

src/services/messagesService.js

@@ -170,7 +170,7 @@ const postRichObjectToConversation = async function(token, { objectType, objectI
 /**
  * Updates the last read message id
  *
- * @param {string} token The token of the conversation to be removed from favorites
+ * @param {string} token The token of the conversation
  * @param {number} lastReadMessage id of the last read message to set
  * @param {object} options request options
  */

src/store/conversationsStore.js

@@ -647,23 +647,14 @@ const actions = {
 		commit('addConversation', conversation)
 	},
 
-	async markConversationRead({ commit, getters }, token) {
-		if (!getters.conversations[token]) {
-			return
-		}
-
-		commit('updateUnreadMessages', { token, unreadMessages: 0, unreadMention: false, unreadMentionDirect: false })
-	},
-
 	async markConversationUnread({ commit, dispatch, getters }, { token }) {
 		if (!getters.conversations[token]) {
 			return
 		}
 
 		try {
-			await setConversationUnread(token)
-			commit('updateUnreadMessages', { token, unreadMessages: 1 })
-			await dispatch('fetchConversation', { token })
+			const response = await setConversationUnread(token)
+			dispatch('addConversation', response.data.ocs.data)
 		} catch (error) {
 			console.error('Error while setting the conversation as unread: ', error)
 		}

src/store/conversationsStore.spec.js

@@ -34,6 +34,7 @@ import {
 	setCallPermissions,
 	setConversationUnread,
 } from '../services/conversationsService.js'
+import { updateLastReadMessage } from '../services/messagesService.js'
 import { useTalkHashStore } from '../stores/talkHash.js'
 import { generateOCSErrorResponse, generateOCSResponse } from '../test-helpers.js'
 
@@ -58,6 +59,10 @@ jest.mock('../services/conversationsService', () => ({
 	setConversationUnread: jest.fn(),
 }))
 
+jest.mock('../services/messagesService', () => ({
+	updateLastReadMessage: jest.fn(),
+}))
+
 jest.mock('@nextcloud/event-bus')
 
 jest.mock('../services/BrowserStorage.js', () => ({
@@ -99,6 +104,7 @@ describe('conversationsStore', () => {
 			actorId: 'actor-id',
 			defaultPermissions: PARTICIPANT.PERMISSIONS.CUSTOM,
 			callPermissions: PARTICIPANT.PERMISSIONS.CUSTOM,
+			lastMessage: { ...previousLastMessage },
 		}
 
 		testStoreConfig = cloneDeep(storeConfig)
@@ -914,34 +920,48 @@ describe('conversationsStore', () => {
 	describe('read marker', () => {
 		beforeEach(() => {
 			store = new Vuex.Store(testStoreConfig)
+			store.commit('setUserId', 'current-user')
 		})
 
-		test('marks conversation as read by clearing unread counters', () => {
+		test('marks conversation as read by clearing unread counters', async () => {
+			// Arrange
 			testConversation.unreadMessages = 1024
 			testConversation.unreadMention = true
-
 			store.dispatch('addConversation', testConversation)
 
-			store.dispatch('markConversationRead', testToken)
+			const response = generateOCSResponse({
+				payload: {
+					...testConversation,
+					unreadMessages: 0,
+					unreadMention: false,
+				}
+			})
+			updateLastReadMessage.mockResolvedValue(response)
 
+			// Act
+			store.dispatch('clearLastReadMessage', { token: testToken })
+			await flushPromises()
+
+			// Assert
 			const changedConversation = store.getters.conversation(testToken)
 			expect(changedConversation.unreadMessages).toBe(0)
 			expect(changedConversation.unreadMention).toBe(false)
 		})
 
 		test('marks conversation as unread', async () => {
+			// Arrange
 			testConversation.unreadMessages = 0
 			store.dispatch('addConversation', testConversation)
 
 			const response = generateOCSResponse({ payload: { ...testConversation, unreadMessages: 1 } })
-			fetchConversation.mockResolvedValue(response)
-			store.dispatch('markConversationUnread', { token: testToken })
+			setConversationUnread.mockResolvedValue(response)
 
+			// Act
+			store.dispatch('markConversationUnread', { token: testToken })
 			await flushPromises()
 
+			// Assert
 			expect(setConversationUnread).toHaveBeenCalledWith(testConversation.token)
-			expect(fetchConversation).toHaveBeenCalledWith(testConversation.token)
-
 			const changedConversation = store.getters.conversation(testToken)
 			expect(changedConversation.unreadMessages).toBe(1)
 		})

src/store/messagesStore.js

@@ -821,13 +821,12 @@ const actions = {
 	 * @param {boolean} data.updateVisually whether to also clear the marker visually in the UI;
 	 */
 	async clearLastReadMessage(context, { token, updateVisually = false }) {
-		const conversation = context.getters.conversations[token]
-		if (!conversation || !conversation.lastMessage) {
+		const conversation = context.getters.conversation(token)
+		if (!conversation?.lastMessage) {
 			return
 		}
 		// set the id to the last message
 		context.dispatch('updateLastReadMessage', { token, id: conversation.lastMessage.id, updateVisually })
-		context.dispatch('markConversationRead', token)
 	},
 
 	/**
@@ -836,12 +835,12 @@ const actions = {
 	 *
 	 * @param {object} context default store context;
 	 * @param {object} data the wrapping object;
-	 * @param {object} data.token the token of the conversation to be updated;
+	 * @param {string} data.token the token of the conversation to be updated;
 	 * @param {number} data.id the id of the message on which to set the read marker;
 	 * @param {boolean} data.updateVisually whether to also update the marker visually in the UI;
 	 */
 	async updateLastReadMessage(context, { token, id = 0, updateVisually = false }) {
-		const conversation = context.getters.conversations[token]
+		const conversation = context.getters.conversation(token)
 		if (!conversation || conversation.lastReadMessage === id) {
 			return
 		}
@@ -858,7 +857,8 @@ const actions = {
 
 		if (context.getters.getUserId()) {
 			// only update on server side if there's an actual user, not guest
-			await updateLastReadMessage(token, id)
+			const response = await updateLastReadMessage(token, id)
+			context.dispatch('addConversation', response.data.ocs.data)
 		}
 	},