fix(web): logic for optimistic updates of reactions (#1528)

Author: nikkothari22

frontend/src/hooks/usePostMessageReaction.ts

@@ -31,28 +31,37 @@ const usePostMessageReaction = () => {
                 // If the message ID matches, we need to update the reactions object
                 const existingReactions = JSON.parse(m.message_reactions ?? '{}') as Record<string, ReactionObject>
 
+                const emojiKey = is_custom ? (emoji_name ?? emoji) : emoji
+
                 // Check if the emoji is already in the reactions object
-                if (existingReactions[emoji]) {
+                if (existingReactions[emojiKey]) {
+                    const hasCurrentUserReacted = existingReactions[emojiKey].users.includes(username)
                     // If it is, check how many users have reacted to the message
-                    const userCount = existingReactions[emoji].count
-
-                    // If the user has already reacted, remove their reaction
-                    if (userCount > 1) {
-                        existingReactions[emoji].users = existingReactions[emoji].users.filter(u => u !== username)
-                        existingReactions[emoji].count = existingReactions[emoji].count - 1
+                    const userCount = existingReactions[emojiKey].count
+
+                    if (hasCurrentUserReacted) {
+                        // Remove the user from the reaction
+                        if (userCount === 1) {
+                            delete existingReactions[emojiKey]
+                        } else {
+                            existingReactions[emojiKey].users = existingReactions[emojiKey].users.filter(u => u !== username)
+                            existingReactions[emojiKey].count = existingReactions[emojiKey].count - 1
+                        }
                     } else {
-                        // If there is only one user, remove the reaction
-                        delete existingReactions[emoji]
+                        // If the user has not reacted, add them to the reaction
+                        existingReactions[emojiKey].users.push(username)
+                        existingReactions[emojiKey].count = existingReactions[emojiKey].count + 1
                     }
                 } else {
                     // If it's not, add it
-                    existingReactions[emoji] = {
+                    existingReactions[emojiKey] = {
                         reaction: emoji,
                         users: [username],
                         count: 1,
                         emoji_name: emoji_name ?? ''
                     }
                 }
+
                 return {
                     ...m,
                     message_reactions: JSON.stringify(existingReactions)

raven/api/reactions.py

@@ -93,7 +93,7 @@ def calculate_message_reaction(message_id, channel_id: str = None):
 		"Raven Message",
 		message_id,
 		"message_reactions",
-		json.dumps(total_reactions),
+		json.dumps(total_reactions, indent=4),
 		update_modified=False,
 	)
 	frappe.publish_realtime(