fix: how delete for me action is handled on the SDK

Author: khushal87

examples/SampleApp/src/utils/messageActions.tsx

@@ -21,7 +21,7 @@ export function channelMessageActions({
   t: TranslationContextValue['t'];
   colors?: typeof Colors;
 }) {
-  const { dismissOverlay, updateMessage } = params;
+  const { dismissOverlay, deleteForMeMessage } = params;
   const actions = messageActions(params);
 
   // We cannot use the useMessageReminder hook here because it is a hook.
@@ -99,10 +99,7 @@ export function channelMessageActions({
         {
           text: 'Delete',
           onPress: async () => {
-            const { message: deletedMessage } = await chatClient.deleteMessage(params.message.id, {
-              deleteForMe: true,
-            });
-            updateMessage(deletedMessage);
+            await deleteForMeMessage?.action();
             dismissOverlay();
           },
           style: 'destructive',

package/src/components/Channel/Channel.tsx

@@ -9,6 +9,7 @@ import {
   Channel as ChannelClass,
   ChannelState,
   Channel as ChannelType,
+  DeleteMessageOptions,
   EventHandler,
   LocalMessage,
   localMessageToNewMessagePayload,
@@ -322,6 +323,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'handleBan'
       | 'handleCopy'
       | 'handleDelete'
+      | 'handleDeleteForMe'
       | 'handleEdit'
       | 'handleFlag'
       | 'handleMarkUnread'
@@ -580,6 +582,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -1509,7 +1512,15 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   });
 
   const deleteMessage: MessagesContextValue['deleteMessage'] = useStableCallback(
-    async (message, hardDelete = false) => {
+    async (message, optionsOrHardDelete = false) => {
+      let options: DeleteMessageOptions = {};
+      if (typeof optionsOrHardDelete === 'boolean') {
+        options = optionsOrHardDelete ? { hardDelete: true } : {};
+      } else if (optionsOrHardDelete?.deleteForMe) {
+        options = { deleteForMe: true };
+      } else if (optionsOrHardDelete?.hardDelete) {
+        options = { hardDelete: true };
+      }
       if (!channel.id) {
         throw new Error('Channel has not been initialized yet');
       }
@@ -1528,7 +1539,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
       threadInstance?.upsertReplyLocally({ message: updatedMessage });
 
-      const data = await client.deleteMessage(message.id, hardDelete);
+      const data = await client.deleteMessage(message.id, options);
 
       if (data?.message) {
         updateMessage({ ...data.message });
@@ -1837,6 +1848,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -33,6 +33,7 @@ export const useCreateMessagesContext = ({
   handleBan,
   handleCopy,
   handleDelete,
+  handleDeleteForMe,
   handleEdit,
   handleFlag,
   handleMarkUnread,
@@ -150,6 +151,7 @@ export const useCreateMessagesContext = ({
       handleBan,
       handleCopy,
       handleDelete,
+      handleDeleteForMe,
       handleEdit,
       handleFlag,
       handleMarkUnread,

package/src/components/Message/Message.tsx

@@ -121,6 +121,7 @@ export type MessagePressableHandlerPayload = PressableHandlerPayload & {
 export type MessageActionHandlers = {
   copyMessage: () => void;
   deleteMessage: () => void;
+  deleteForMeMessage: () => void;
   editMessage: () => void;
   flagMessage: () => void;
   markUnread: () => Promise<void>;
@@ -155,6 +156,7 @@ export type MessagePropsWithContext = Pick<
     | 'handleBan'
     | 'handleCopy'
     | 'handleDelete'
+    | 'handleDeleteForMe'
     | 'handleEdit'
     | 'handleFlag'
     | 'handleMarkUnread'
@@ -229,6 +231,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -487,6 +490,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const {
     handleCopyMessage,
     handleDeleteMessage,
+    handleDeleteForMeMessage,
     handleEditMessage,
     handleFlagMessage,
     handleMarkUnreadMessage,
@@ -514,6 +518,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     banUser,
     copyMessage,
     deleteMessage,
+    deleteForMeMessage,
     editMessage,
     flagMessage,
     handleReaction,
@@ -534,6 +539,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -565,6 +571,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : messageActionsProp({
           banUser,
           copyMessage,
+          deleteForMeMessage,
           deleteMessage,
           dismissOverlay,
           editMessage,
@@ -587,6 +594,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const actionHandlers: MessageActionHandlers = {
     copyMessage: handleCopyMessage,
+    deleteForMeMessage: handleDeleteForMeMessage,
     deleteMessage: handleDeleteMessage,
     editMessage: handleEditMessage,
     flagMessage: handleFlagMessage,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -66,6 +66,14 @@ export const useMessageActionHandlers = ({
     );
   };
 
+  const handleDeleteForMeMessage = async () => {
+    if (!message.id) {
+      return;
+    }
+
+    await deleteMessage(message, { deleteForMe: true });
+  };
+
   const handleToggleMuteUser = async () => {
     if (!message.user?.id) {
       return;
@@ -182,6 +190,7 @@ export const useMessageActionHandlers = ({
 
   return {
     handleCopyMessage,
+    handleDeleteForMeMessage,
     handleDeleteMessage,
     handleEditMessage,
     handleFlagMessage,

package/src/components/Message/hooks/useMessageActions.tsx

@@ -39,6 +39,7 @@ export type MessageActionsHookProps = Pick<
   | 'handleBan'
   | 'handleCopy'
   | 'handleDelete'
+  | 'handleDeleteForMe'
   | 'handleEdit'
   | 'handleFlag'
   | 'handleQuotedReply'
@@ -73,6 +74,7 @@ export const useMessageActions = ({
   handleBan,
   handleCopy,
   handleDelete,
+  handleDeleteForMe,
   handleEdit,
   handleFlag,
   handleMarkUnread,
@@ -101,6 +103,7 @@ export const useMessageActions = ({
   const {
     handleCopyMessage,
     handleDeleteMessage,
+    handleDeleteForMeMessage,
     handleEditMessage,
     handleFlagMessage,
     handleMarkUnreadMessage,
@@ -182,6 +185,19 @@ export const useMessageActions = ({
     titleStyle: { color: accent_red },
   };
 
+  const deleteForMeMessage: MessageActionType = {
+    action: () => {
+      dismissOverlay();
+      if (handleDeleteForMe) {
+        handleDeleteForMe(message);
+      }
+      handleDeleteForMeMessage();
+    },
+    actionType: 'deleteForMeMessage',
+    icon: <Delete fill={accent_red} size={24} />,
+    title: t('Delete for me'),
+  };
+
   const editMessage: MessageActionType = {
     action: () => {
       dismissOverlay();
@@ -319,6 +335,7 @@ export const useMessageActions = ({
   return {
     banUser,
     copyMessage,
+    deleteForMeMessage,
     deleteMessage,
     editMessage,
     flagMessage,

package/src/components/Message/utils/messageActions.ts

@@ -26,6 +26,8 @@ export type MessageActionsParams = {
   showMessageReactions: boolean;
   threadReply: MessageActionType;
   unpinMessage: MessageActionType;
+  // Optional Actions
+  deleteForMeMessage?: MessageActionType;
 } & Pick<MessageContextValue, 'message' | 'isMyMessage'> &
   Pick<MessagesContextValue, 'updateMessage'>;
 

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -7,6 +7,7 @@ import type {
   Channel,
   ChannelState,
   CommandSuggestion,
+  DeleteMessageOptions,
   LocalMessage,
   MessageResponse,
 } from 'stream-chat';
@@ -114,7 +115,11 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    **/
   DateHeader: React.ComponentType<DateHeaderProps>;
-  deleteMessage: (message: LocalMessage, hardDelete?: boolean) => Promise<void>;
+  // FIXME: Remove the signature with optionsOrHardDelete boolean with the next major release
+  deleteMessage: (
+    message: LocalMessage,
+    optionsOrHardDelete?: boolean | DeleteMessageOptions,
+  ) => Promise<void>;
   deleteReaction: (type: string, messageId: string) => Promise<void>;
 
   /** Should keyboard be dismissed when messaged is touched */
@@ -404,6 +409,8 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   handleBan?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a copy message action is invoked */
   handleCopy?: (message: LocalMessage) => Promise<void>;
+  /** Handler to access when a delete for me message action is invoked */
+  handleDeleteForMe?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a delete message action is invoked */
   handleDelete?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when an edit message action is invoked */