fix: add copy and flag message action handler to actionHandlers (#2573)

khushal87 · web-flow · commit f264bf0fde4e · 2024-06-28T19:56:11.000+05:30
* fix: add copy and flag message action handler to actionHandlers

* add unpinMessage action handler

* improve default handlers

* feat: add threadReply action handler
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -101,7 +101,7 @@ export type MessageTouchableHandlerPayload<
   /**
    * Set of action handler functions for various message actions. You can use these functions to perform any action when give interaction occurs.
    */
-  actionHandlers?: MessageActionHandlers;
+  actionHandlers?: MessageActionHandlers<StreamChatGenerics>;
   /**
    * Additional message touchable handler info.
    */
@@ -112,16 +112,22 @@ export type MessageTouchableHandlerPayload<
   message?: MessageType<StreamChatGenerics>;
 };
 
-export type MessageActionHandlers = {
-  deleteMessage: () => Promise<void>;
+export type MessageActionHandlers<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  copyMessage: () => void;
+  deleteMessage: () => void;
   editMessage: () => void;
+  flagMessage: () => void;
   pinMessage: () => Promise<void>;
   quotedReply: () => void;
   resendMessage: () => Promise<void>;
   showMessageOverlay: () => void;
   toggleBanUser: () => Promise<void>;
   toggleMuteUser: () => Promise<void>;
   toggleReaction: (reactionType: string) => Promise<void>;
+  unpinMessage: () => Promise<void>;
+  threadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
 };
 
 export type MessagePropsWithContext<
@@ -476,8 +482,10 @@ const MessageWithContext = <
   const ownCapabilities = useOwnCapabilitiesContext();
 
   const {
+    handleCopyMessage,
     handleDeleteMessage,
     handleEditMessage,
+    handleFlagMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
@@ -602,16 +610,20 @@ const MessageWithContext = <
     setOverlay('message');
   };
 
-  const actionHandlers: MessageActionHandlers = {
+  const actionHandlers: MessageActionHandlers<StreamChatGenerics> = {
+    copyMessage: handleCopyMessage,
     deleteMessage: handleDeleteMessage,
     editMessage: handleEditMessage,
+    flagMessage: handleFlagMessage,
     pinMessage: handleTogglePinMessage,
     quotedReply: handleQuotedReplyMessage,
     resendMessage: handleResendMessage,
     showMessageOverlay,
+    threadReply: handleThreadReply,
     toggleBanUser: handleToggleBanUser,
     toggleMuteUser: handleToggleMuteUser,
     toggleReaction: handleToggleReaction,
+    unpinMessage: handleTogglePinMessage,
   };
 
   const onLongPressMessage =
@@ -655,8 +667,10 @@ const MessageWithContext = <
     goToMessage,
     groupStyles,
     handleAction,
+    handleCopyMessage,
     handleDeleteMessage,
     handleEditMessage,
+    handleFlagMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
diff --git a/package/src/components/Message/hooks/useCreateMessageContext.ts b/package/src/components/Message/hooks/useCreateMessageContext.ts
@@ -15,8 +15,10 @@ export const useCreateMessageContext = <
   goToMessage,
   groupStyles,
   handleAction,
+  handleCopyMessage,
   handleDeleteMessage,
   handleEditMessage,
+  handleFlagMessage,
   handleQuotedReplyMessage,
   handleResendMessage,
   handleToggleBanUser,
@@ -66,8 +68,10 @@ export const useCreateMessageContext = <
       goToMessage,
       groupStyles,
       handleAction,
+      handleCopyMessage,
       handleDeleteMessage,
       handleEditMessage,
+      handleFlagMessage,
       handleQuotedReplyMessage,
       handleResendMessage,
       handleToggleBanUser,
diff --git a/package/src/components/Message/hooks/useMessageActionHandlers.ts b/package/src/components/Message/hooks/useMessageActionHandlers.ts
@@ -1,10 +1,14 @@
+import { Alert } from 'react-native';
+
 import type { MessageResponse } from 'stream-chat';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { setClipboardString } from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useMessageActionHandlers = <
@@ -32,6 +36,7 @@ export const useMessageActionHandlers = <
   Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<MessageContextValue<StreamChatGenerics>, 'message'>) => {
+  const { t } = useTranslationContext();
   const handleResendMessage = () => retrySendMessage(message);
 
   const handleQuotedReplyMessage = () => {
@@ -42,8 +47,28 @@ export const useMessageActionHandlers = <
     (mute) => mute.user.id === client.userID && mute.target.id === message.user?.id,
   );
 
-  const handleDeleteMessage = async () => {
-    await deleteMessage(message as MessageResponse<StreamChatGenerics>);
+  const handleCopyMessage = () => {
+    setClipboardString(message.text || '');
+  };
+
+  const handleDeleteMessage = () => {
+    if (message.id) {
+      Alert.alert(
+        t('Delete Message'),
+        t('Are you sure you want to permanently delete this message?'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          {
+            onPress: async () => {
+              await deleteMessage(message as MessageResponse<StreamChatGenerics>);
+            },
+            style: 'destructive',
+            text: t('Delete'),
+          },
+        ],
+        { cancelable: false },
+      );
+    }
   };
 
   const handleToggleMuteUser = async () => {
@@ -84,6 +109,36 @@ export const useMessageActionHandlers = <
     setEditingState(message);
   };
 
+  const handleFlagMessage = () => {
+    try {
+      if (message.id) {
+        Alert.alert(
+          t('Flag Message'),
+          t('Do you want to send a copy of this message to a moderator for further investigation?'),
+          [
+            { style: 'cancel', text: t('Cancel') },
+            {
+              onPress: async () => {
+                await client.flagMessage(message.id);
+                Alert.alert(
+                  t('Message flagged'),
+                  t('The message has been reported to a moderator.'),
+                );
+              },
+              text: t('Flag'),
+            },
+          ],
+          { cancelable: false },
+        );
+      }
+    } catch (_) {
+      Alert.alert(
+        t('Cannot Flag Message'),
+        t('Flag action failed either due to a network issue or the message is already flagged'),
+      );
+    }
+  };
+
   const handleToggleReaction = async (reactionType: string) => {
     const messageId = message.id;
     const own_reactions = message.own_reactions ?? [];
@@ -114,8 +169,10 @@ export const useMessageActionHandlers = <
   };
 
   return {
+    handleCopyMessage,
     handleDeleteMessage,
     handleEditMessage,
+    handleFlagMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Alert } from 'react-native';
 
 import { useMessageActionHandlers } from './useMessageActionHandlers';
 
@@ -100,8 +99,10 @@ export const useMessageActions = <
     },
   } = useTheme();
   const {
+    handleCopyMessage,
     handleDeleteMessage,
     handleEditMessage,
+    handleFlagMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
@@ -161,7 +162,7 @@ export const useMessageActions = <
             if (handleCopy) {
               handleCopy(message);
             }
-            setClipboardString(message.text || '');
+            handleCopyMessage();
           },
           actionType: 'copyMessage',
           icon: <Copy pathFill={grey} />,
@@ -171,29 +172,11 @@ export const useMessageActions = <
 
   const deleteMessage: MessageActionType = {
     action: () => {
-      setOverlay('alert');
-      if (message.id) {
-        Alert.alert(
-          t('Delete Message'),
-          t('Are you sure you want to permanently delete this message?'),
-          [
-            { onPress: () => setOverlay('none'), text: t('Cancel') },
-            {
-              onPress: async () => {
-                setOverlay('none');
-                if (handleDelete) {
-                  handleDelete(message);
-                }
-
-                await handleDeleteMessage();
-              },
-              style: 'destructive',
-              text: t('Delete'),
-            },
-          ],
-          { cancelable: false },
-        );
+      setOverlay('none');
+      if (handleDelete) {
+        handleDelete(message);
       }
+      handleDeleteMessage();
     },
     actionType: 'deleteMessage',
     icon: <Delete fill={accent_red} size={32} />,
@@ -242,51 +225,12 @@ export const useMessageActions = <
 
   const flagMessage: MessageActionType = {
     action: () => {
-      setOverlay('alert');
-      if (message.id) {
-        Alert.alert(
-          t('Flag Message'),
-          t('Do you want to send a copy of this message to a moderator for further investigation?'),
-          [
-            { onPress: () => setOverlay('none'), text: t('Cancel') },
-            {
-              onPress: async () => {
-                try {
-                  if (handleFlag) {
-                    handleFlag(message);
-                  }
-                  await client.flagMessage(message.id);
-                  Alert.alert(
-                    t('Message flagged'),
-                    t('The message has been reported to a moderator.'),
-                    [
-                      {
-                        onPress: () => setOverlay('none'),
-                        text: t('Ok'),
-                      },
-                    ],
-                  );
-                } catch (_) {
-                  Alert.alert(
-                    t('Cannot Flag Message'),
-                    t(
-                      'Flag action failed either due to a network issue or the message is already flagged',
-                    ),
-                    [
-                      {
-                        onPress: () => setOverlay('none'),
-                        text: t('Ok'),
-                      },
-                    ],
-                  );
-                }
-              },
-              text: t('Flag'),
-            },
-          ],
-          { cancelable: false },
-        );
+      setOverlay('none');
+      if (handleFlag) {
+        handleFlag(message);
       }
+
+      handleFlagMessage();
     },
     actionType: 'flagMessage',
     icon: <MessageFlag pathFill={grey} />,
diff --git a/package/src/contexts/messageContext/MessageContext.tsx b/package/src/contexts/messageContext/MessageContext.tsx
@@ -38,8 +38,10 @@ export type MessageContextValue<
   groupStyles: GroupType[];
   /** Handler for actions. Actions in combination with attachments can be used to build [commands](https://getstream.io/chat/docs/#channel_commands). */
   handleAction: ActionHandler;
-  handleDeleteMessage: () => Promise<void>;
+  handleCopyMessage: () => void;
+  handleDeleteMessage: () => void;
   handleEditMessage: () => void;
+  handleFlagMessage: () => void;
   handleQuotedReplyMessage: () => void;
   handleResendMessage: () => Promise<void>;
   handleToggleBanUser: () => Promise<void>;
