Add reaction store and move some logic there

Signed-off-by: marco <marcoambrosini@pm.me>

3 files changed, 108 insertions, 27 deletions

diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6fc60ae3f..6d28cb748 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -29,7 +29,6 @@ import {
 	postRichObjectToConversation,
 	addReactionToMessage,
 	removeReactionFromMessage,
-	getReactionsDetails,
 } from '../services/messagesService'
 
 import SHA256 from 'crypto-js/sha256'
@@ -371,8 +370,14 @@ const mutations = {
 		}
 	},
 
-	addReactionsToMessage(state, { token, messageId, reactions }) {
-		Vue.set(state.messages[token][messageId], 'reactions', reactions)
+	// Increases reaction count for a particular reaction on a message
+	addReactionToMessage(state, { token, messageId, reaction }) {
+		state.messages[token][messageId].reactions[reaction]++
+	},
+
+	// Decreases reaction count for a particular reaction on a message
+	removeReactionFromMessage(state, { token, messageId, reaction }) {
+		state.messages[token][messageId].reactions[reaction]--
 	},
 }
 
@@ -981,10 +986,19 @@ const actions = {
 	 */
 	async addReactionToMessage(context, { token, messageId, selectedEmoji }) {
 		try {
+			context.commit('addReactionToMessage', {
+				token,
+				messageId,
+				reaction: selectedEmoji,
+			})
 			await addReactionToMessage(token, messageId, selectedEmoji)
-
-			context.commit('addReactionToMessage', { token, messageId, selectedEmoji })
 		} catch (error) {
+			// Restore the previous state if the request fails
+			context.commit('removeReactionFromMessage', {
+				token,
+				messageId,
+				reaction: selectedEmoji,
+			})
 			console.debug(error)
 		}
 	},
@@ -995,34 +1009,21 @@ const actions = {
 	 * @param {*} context the context object
 	 * @param {*} param1 conversation token, message id and selected emoji (string)
 	 */
-	async removeReactionToMessage(context, { token, messageId, selectedEmoji }) {
+	async removeReactionFromMessage(context, { token, messageId, selectedEmoji }) {
 		try {
+			context.commit('removeReactionFromMessage', {
+				token,
+				messageId,
+				reaction: selectedEmoji,
+			})
 			await removeReactionFromMessage(token, messageId, selectedEmoji)
-
-			context.commit('removeReactionFromMessage', { token, messageId, selectedEmoji })
 		} catch (error) {
-			console.debug(error)
-		}
-	},
-
-	/**
-	 * Gets the full reactions array for a given message.
-	 *
-	 * @param {*} context the context object
-	 * @param {*} param1 conversation token, message id
-	 */
-	async getReactionsDetails(context, { token, messageId }) {
-		try {
-			const response = await getReactionsDetails(token, messageId)
-
-			context.commit('addReactionsToMessage', {
+			// Restore the previous state if the request fails
+			context.commit('addReactionToMessage', {
 				token,
 				messageId,
-				reactions: response.data.ocs.data,
+				reaction: selectedEmoji,
 			})
-
-			return response
-		} catch (error) {
 			console.debug(error)
 		}
 	},
diff --git a/src/store/reactionsStore.js b/src/store/reactionsStore.js
new file mode 100644
index 000000000..c3c7ce0e5
--- /dev/null
+++ b/src/store/reactionsStore.js
@@ -0,0 +1,78 @@
+/**
+ * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import Vue from 'vue'
+import {
+	getReactionsDetails,
+} from '../services/messagesService'
+
+const state = {
+	/**
+	 * Structure:
+	 * reactions.token.messageId
+	 */
+	reactions: {},
+}
+
+const getters = {
+	reactions: (state) => (token, messageId) => {
+		if (state.reactions?.[token]?.[messageId]) {
+			return state.reactions[token][messageId]
+		} else {
+			return undefined
+		}
+	},
+}
+
+const mutations = {
+	addReactions(state, { token, messageId, reactions }) {
+		if (!state.reactions[token]) {
+			Vue.set(state.reactions, [token], [messageId])
+		}
+		state.reactions[token][messageId] = reactions
+	},
+}
+
+const actions = {
+	/**
+	 * Gets the full reactions array for a given message.
+	 *
+	 * @param {*} context the context object
+	 * @param {*} param1 conversation token, message id
+	 */
+	async getReactions(context, { token, messageId }) {
+
+		try {
+			const response = await getReactionsDetails(token, messageId)
+			context.commit('addReactions', {
+				token,
+				messageId,
+				reactions: response.data.ocs.data,
+			})
+
+			return response
+		} catch (error) {
+			console.debug(error)
+		}
+	},
+}
+
+export default { state, mutations, getters, actions }
diff --git a/src/store/storeConfig.js b/src/store/storeConfig.js
index 16b8b6db4..8d772fa26 100644
--- a/src/store/storeConfig.js
+++ b/src/store/storeConfig.js
@@ -38,6 +38,7 @@ import tokenStore from './tokenStore'
 import uiModeStore from './uiModeStore'
 import windowVisibilityStore from './windowVisibilityStore'
 import messageActionsStore from './messageActionsStore'
+import reactionsStore from './reactionsStore'
 
 export default {
 	modules: {
@@ -59,6 +60,7 @@ export default {
 		uiModeStore,
 		windowVisibilityStore,
 		messageActionsStore,
+		reactionsStore,
 	},
 
 	mutations: {},