From 951b59e1ddff5ef096e9e902b82d4122fbd1b3d1 Mon Sep 17 00:00:00 2001
From: Nikhil Kothari <nik.kothari22@live.com>
Date: Thu, 22 Feb 2024 23:20:38 +0530
Subject: [PATCH] fix(mobile): refresh messages when user reacts

---
 .../features/chat-space/MessageActions/EmojiAction.tsx      | 5 ++++-
 .../features/chat-space/chat-view/MessageBlock.tsx          | 4 ++--
 .../chat-space/chat-view/components/MessageReactions.tsx    | 6 ++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/mobile/src/components/features/chat-space/MessageActions/EmojiAction.tsx b/mobile/src/components/features/chat-space/MessageActions/EmojiAction.tsx
index ecc27b25f..ec1aab026 100644
--- a/mobile/src/components/features/chat-space/MessageActions/EmojiAction.tsx
+++ b/mobile/src/components/features/chat-space/MessageActions/EmojiAction.tsx
@@ -1,4 +1,4 @@
-import { useFrappePostCall } from "frappe-react-sdk"
+import { useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
 import { BiSmile } from "react-icons/bi"
 import { ActionProps } from "./common"
 import { useCallback } from "react"
@@ -18,6 +18,8 @@ export const EmojiAction = ({ message, onSuccess, presentingElement }: EmojiActi
     const { data: { name: messageID } } = message
     const { call: reactToMessage } = useFrappePostCall('raven.api.reactions.react')
 
+    const { mutate } = useSWRConfig()
+
     const saveReaction = useCallback(async (emoji: string) => {
         Haptics.impact({
             style: ImpactStyle.Light
@@ -26,6 +28,7 @@ export const EmojiAction = ({ message, onSuccess, presentingElement }: EmojiActi
             message_id: messageID,
             reaction: emoji
         })
+            .then(() => mutate(`get_messages_for_channel_${message.data.channel_id}`))
             .then(() => onSuccess())
     }, [messageID, reactToMessage])
 
diff --git a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
index 50e7b5efb..87a6711f3 100644
--- a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
+++ b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
@@ -65,7 +65,7 @@ export const NonContinuationMessageBlock = ({ message, user, onMessageSelect }:
             </div>
         </div>
         <div className='pl-12 m-1'>
-            <MessageReactions messageID={message.data.name} message_reactions={message.data.message_reactions} />
+            <MessageReactions messageID={message.data.name} channelID={message.data.channel_id} message_reactions={message.data.message_reactions} />
         </div>
 
     </div>
@@ -102,7 +102,7 @@ const ContinuationMessageBlock = ({ message, onMessageSelect }: { message: Messa
         </div>
 
         <div className='pl-12 m-1'>
-            <MessageReactions messageID={message.data.name} message_reactions={message.data.message_reactions} />
+            <MessageReactions messageID={message.data.name} channelID={message.data.channel_id} message_reactions={message.data.message_reactions} />
         </div>
     </div>
 }
diff --git a/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx b/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx
index 8ebe4fceb..d46c6106b 100644
--- a/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx
+++ b/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo } from "react"
-import { useFrappePostCall } from "frappe-react-sdk"
+import { useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
 import { useGetUserRecords } from "@/hooks/useGetUserRecords"
 import { Haptics, ImpactStyle } from "@capacitor/haptics"
 import { IonButton } from "@ionic/react"
@@ -13,9 +13,10 @@ export interface ReactionObject {
     // The number of users who reacted with this emoji
     count: number
 }
-const MessageReactions = ({ messageID, message_reactions }: { messageID: string, message_reactions?: string | null }) => {
+const MessageReactions = ({ messageID, channelID, message_reactions }: { messageID: string, channelID: string, message_reactions?: string | null }) => {
 
     const { call: reactToMessage } = useFrappePostCall('raven.api.reactions.react')
+    const { mutate } = useSWRConfig()
 
     const saveReaction = useCallback((emoji: string) => {
         Haptics.impact({
@@ -25,6 +26,7 @@ const MessageReactions = ({ messageID, message_reactions }: { messageID: string,
             message_id: messageID,
             reaction: emoji
         })
+            .then(() => mutate(`get_messages_for_channel_${channelID}`))
         // .then(() => updateMessages())
     }, [messageID, reactToMessage])