Reset reaction details list when a reaction is added or removed

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

@@ -809,8 +809,10 @@ describe('Message.vue', () => {
 		test('dispatches store action upon picking an emoji from the emojipicker', () => {
 			const addReactionToMessageAction = jest.fn()
 			const userHasReactedGetter = jest.fn().mockReturnValue(() => false)
+			const reactionsLoadedGetter = jest.fn().mockReturnValue(() => true)
 			testStoreConfig.modules.quoteReplyStore.actions.addReactionToMessage = addReactionToMessageAction
 			testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter
+			testStoreConfig.modules.messagesStore.getters.reactionsLoaded = reactionsLoadedGetter
 
 			store = new Store(testStoreConfig)
 
@@ -821,11 +823,6 @@ describe('Message.vue', () => {
 				stubs: {
 					EmojiPicker,
 				},
-				data() {
-					return {
-						detailedReactionsRequested: true,
-					}
-				},
 			})
 
 			const emojiPicker = wrapper.findComponent(EmojiPicker)
@@ -844,20 +841,17 @@ describe('Message.vue', () => {
 		test('dispatches store action to remove an emoji upon clicking reaction button', async () => {
 			const removeReactionFromMessageAction = jest.fn()
 			const userHasReactedGetter = jest.fn().mockReturnValue(() => true)
+			const reactionsLoadedGetter = jest.fn().mockReturnValue(() => true)
 			testStoreConfig.modules.quoteReplyStore.actions.removeReactionFromMessage = removeReactionFromMessageAction
 			testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter
+			testStoreConfig.modules.messagesStore.getters.reactionsLoaded = reactionsLoadedGetter
 
 			store = new Store(testStoreConfig)
 
 			const wrapper = shallowMount(Message, {
 				localVue,
 				store,
 				propsData: messageProps,
-				data() {
-					return {
-						detailedReactionsRequested: true,
-					}
-				},
 			})
 
 			// Click reaction button upon having already reacted

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

@@ -359,7 +359,7 @@ export default {
 			isActionMenuOpen: false,
 			isEmojiPickerOpen: false,
 			isReactionsMenuOpen: false,
-			detailedReactionsRequested: false,
+			detailedReactionsLoading: false,
 		}
 	},
 
@@ -568,6 +568,10 @@ export default {
 		detailedReactions() {
 			return this.$store.getters.reactions(this.token, this.id)
 		},
+
+		detailedReactionsLoaded() {
+			return this.$store.getters.reactionsLoaded(this.token, this.id)
+		},
 	},
 
 	watch: {
@@ -625,7 +629,7 @@ export default {
 		},
 
 		handleReactionsMouseOver() {
-			if (this.hasReactions && !this.detailedReactionsRequested) {
+			if (this.hasReactions && !this.detailedReactionsLoaded) {
 				this.getReactions()
 			}
 		},
@@ -637,24 +641,29 @@ export default {
 		},
 
 		async getReactions() {
+			if (this.detailedReactionsLoading) {
+				// FIXME not sure how to await the other execution
+			}
+
 			try {
 				/**
 				 * Get reaction details when the message is hovered for the first
 				 * time. After that we rely on system messages to update the
 				 * reactions.
 				 */
-				this.detailedReactionsRequested = true
+				this.detailedReactionsLoading = true
 				await this.$store.dispatch('getReactions', {
 					token: this.token,
 					messageId: this.id,
 				})
+				this.detailedReactionsLoading = false
 			} catch {
-				this.detailedReactionsRequested = false
+				this.detailedReactionsLoading = false
 			}
 		},
 
 		async handleReactionClick(clickedEmoji) {
-			if (!this.detailedReactionsRequested) {
+			if (!this.detailedReactionsLoaded) {
 				await this.getReactions()
 			}
 			// Check if current user has already added this reaction to the message

src/store/messagesStore.js

@@ -391,6 +391,13 @@ const actions = {
 			})
 		}
 
+		if (message.systemMessage === 'reaction' || message.systemMessage === 'reaction_revoked') {
+			context.commit('resetReactions', {
+				token: message.token,
+				messageId: message.parent,
+			})
+		}
+
 		context.commit('addMessage', message)
 	},
 

src/store/reactionsStore.js

@@ -41,6 +41,14 @@ const getters = {
 		}
 	},
 
+	reactionsLoaded: (state) => (token, messageId) => {
+		if (state.reactions?.[token]?.[messageId]) {
+			return true
+		} else {
+			return false
+		}
+	},
+
 	// Checks if a user has already reacted to a message with a particular reaction
 	userHasReacted: (state) => (actorType, actorId, token, messageId, reaction) => {
 		if (!state?.reactions?.[token]?.[messageId]?.[reaction]) {
@@ -60,6 +68,13 @@ const mutations = {
 		}
 		Vue.set(state.reactions[token], messageId, reactions)
 	},
+
+	resetReactions(state, { token, messageId }) {
+		if (!state.reactions[token]) {
+			Vue.set(state.reactions, token, {})
+		}
+		Vue.delete(state.reactions[token], messageId)
+	},
 }
 
 const actions = {