feat: add optional Delete for me message action

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -18,6 +18,7 @@ import type {
   ChannelMemberResponse,
   ChannelQueryOptions,
   ChannelState,
+  DeleteMessageOptions,
   ErrorFromResponse,
   Event,
   EventAPIResponse,
@@ -176,7 +177,10 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
    */
   channelQueryOptions?: ChannelQueryOptions;
   /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-  doDeleteMessageRequest?: (message: LocalMessage) => Promise<MessageResponse>;
+  doDeleteMessageRequest?: (
+    message: LocalMessage,
+    options?: DeleteMessageOptions,
+  ) => Promise<MessageResponse>;
   /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
   doMarkReadRequest?: (
     channel: StreamChannel,
@@ -910,15 +914,18 @@ const ChannelInner = (
     );
 
   const deleteMessage = useCallback(
-    async (message: LocalMessage): Promise<MessageResponse> => {
+    async (
+      message: LocalMessage,
+      options?: DeleteMessageOptions,
+    ): Promise<MessageResponse> => {
       if (!message?.id) {
         throw new Error('Cannot delete a message - missing message ID.');
       }
       let deletedMessage;
       if (doDeleteMessageRequest) {
-        deletedMessage = await doDeleteMessageRequest(message);
+        deletedMessage = await doDeleteMessageRequest(message, options);
       } else {
-        const result = await client.deleteMessage(message.id);
+        const result = await client.deleteMessage(message.id, options);
         deletedMessage = result.message;
       }
 

src/components/Channel/__tests__/Channel.test.js

@@ -1603,15 +1603,18 @@ describe('Channel', () => {
 
         it('should call the default client.deleteMessage() function', async () => {
           const message = generateMessage();
-
+          const deleteMessageOptions = { deleteForMe: true, hard: false };
           const clientDeleteMessageSpy = jest
             .spyOn(chatClient, 'deleteMessage')
             .mockImplementationOnce(() => Promise.resolve({ message }));
           await renderComponent({ channel, chatClient }, ({ deleteMessage }) => {
-            deleteMessage(message);
+            deleteMessage(message, deleteMessageOptions);
           });
           await waitFor(() =>
-            expect(clientDeleteMessageSpy).toHaveBeenCalledWith(message.id),
+            expect(clientDeleteMessageSpy).toHaveBeenCalledWith(
+              message.id,
+              deleteMessageOptions,
+            ),
           );
         });
 
@@ -1640,7 +1643,7 @@ describe('Channel', () => {
 
         it('should call the custom doDeleteMessageRequest instead of client.deleteMessage()', async () => {
           const message = generateMessage();
-
+          const deleteMessageOptions = { deleteForMe: true, hard: false };
           const doDeleteMessageRequest = jest.fn();
           const clientDeleteMessageSpy = jest
             .spyOn(chatClient, 'deleteMessage')
@@ -1649,13 +1652,16 @@ describe('Channel', () => {
           await renderComponent(
             { channel, chatClient, doDeleteMessageRequest },
             ({ deleteMessage }) => {
-              deleteMessage(message);
+              deleteMessage(message, deleteMessageOptions);
             },
           );
 
           await waitFor(() => {
             expect(clientDeleteMessageSpy).not.toHaveBeenCalled();
-            expect(doDeleteMessageRequest).toHaveBeenCalledWith(message);
+            expect(doDeleteMessageRequest).toHaveBeenCalledWith(
+              message,
+              deleteMessageOptions,
+            );
           });
         });
       });

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -59,6 +59,8 @@ export const useCreateChannelStateContext = (
     channelCapabilities[capability] = true;
   });
 
+  // FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
+  // of this serialization has been changed. A great example of memoization gone wrong.
   const memoizedMessageData = skipMessageDataMemoization
     ? messages
     : messages
@@ -69,10 +71,11 @@ export const useCreateChannelStateContext = (
             pinned,
             reply_count,
             status,
+            type,
             updated_at,
             user,
           }) =>
-            `${deleted_at}${
+            `${type}${deleted_at}${
               latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
             }${pinned}${reply_count}${status}${
               updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))

src/components/Message/__tests__/utils.test.js

@@ -17,6 +17,7 @@ import {
   MESSAGE_ACTIONS,
   messageHasAttachments,
   messageHasReactions,
+  OPTIONAL_MESSAGE_ACTIONS,
   validateAndGetMessage,
 } from '../utils';
 
@@ -90,6 +91,7 @@ describe('Message utils', () => {
       canReply: true,
     };
     const actions = Object.values(MESSAGE_ACTIONS);
+    const optionalActions = Object.values(OPTIONAL_MESSAGE_ACTIONS);
 
     it.each([
       ['empty', []],
@@ -131,31 +133,36 @@ describe('Message utils', () => {
     });
 
     it.each([
-      ['allow', 'edit', 'canEdit', true],
-      ['not allow', 'edit', 'canEdit', false],
-      ['allow', 'delete', 'canDelete', true],
-      ['not allow', 'delete', 'canDelete', false],
-      ['allow', 'flag', 'canFlag', true],
-      ['not allow', 'flag', 'canFlag', false],
-      ['allow', 'markUnread', 'canMarkUnread', true],
-      ['not allow', 'markUnread', 'canMarkUnread', false],
-      ['allow', 'mute', 'canMute', true],
-      ['not allow', 'mute', 'canMute', false],
-      ['allow', 'pin', 'canPin', true],
-      ['not allow', 'pin', 'canPin', false],
-      ['allow', 'quote', 'canQuote', true],
-      ['not allow', 'quote', 'canQuote', false],
-    ])('it should %s %s when %s is %s', (_, action, capabilityKey, capabilityValue) => {
-      const capabilities = {
-        [capabilityKey]: capabilityValue,
-      };
-      const result = getMessageActions(actions, capabilities);
-      if (capabilityValue) {
-        expect(result).toStrictEqual([action]);
-      } else {
-        expect(result).not.toStrictEqual([action]);
-      }
-    });
+      ['allow', 'edit', 'canEdit', true, actions],
+      ['not allow', 'edit', 'canEdit', false, actions],
+      ['allow', 'delete', 'canDelete', true, actions],
+      ['not allow', 'delete', 'canDelete', false, actions],
+      ['allow', 'deleteForMe', 'canDelete', true, optionalActions],
+      ['not allow', 'deleteForMe', 'canDelete', false, optionalActions],
+      ['allow', 'flag', 'canFlag', true, actions],
+      ['not allow', 'flag', 'canFlag', false, actions],
+      ['allow', 'markUnread', 'canMarkUnread', true, actions],
+      ['not allow', 'markUnread', 'canMarkUnread', false, actions],
+      ['allow', 'mute', 'canMute', true, actions],
+      ['not allow', 'mute', 'canMute', false, actions],
+      ['allow', 'pin', 'canPin', true, actions],
+      ['not allow', 'pin', 'canPin', false, actions],
+      ['allow', 'quote', 'canQuote', true, actions],
+      ['not allow', 'quote', 'canQuote', false, actions],
+    ])(
+      'it should %s %s when %s is %s',
+      (_, action, capabilityKey, capabilityValue, actionsToUse) => {
+        const capabilities = {
+          [capabilityKey]: capabilityValue,
+        };
+        const result = getMessageActions(actionsToUse, capabilities);
+        if (capabilityValue) {
+          expect(result).toStrictEqual([action]);
+        } else {
+          expect(result).not.toStrictEqual([action]);
+        }
+      },
+    );
   });
 
   describe('shouldMessageComponentUpdate', () => {

src/components/Message/hooks/__tests__/useDeleteHandler.test.js

@@ -75,9 +75,22 @@ describe('useDeleteHandler custom hook', () => {
 
   it('should delete a message by its id', async () => {
     const message = generateMessage();
+    const deleteMessageOptions = { deleteForMe: true, hard: false };
     const handleDelete = await renderUseDeleteHandler(message);
-    await handleDelete(mouseEventMock);
-    expect(deleteMessage).toHaveBeenCalledWith(message);
+    await handleDelete(mouseEventMock, deleteMessageOptions);
+    expect(deleteMessage).toHaveBeenCalledWith(message, deleteMessageOptions);
+  });
+
+  it('should enrich the message in the delete response with deleted_for_me and type="deleted"', async () => {
+    jest.spyOn(client, 'deleteMessage').mockResolvedValueOnce({ message: testMessage });
+    const deleteMessageOptions = { deleteForMe: true, hard: false };
+    const handleDelete = await renderUseDeleteHandler(testMessage);
+    await handleDelete(mouseEventMock, deleteMessageOptions);
+    expect(updateMessage).toHaveBeenCalledWith({
+      ...testMessage,
+      deleted_for_me: true,
+      type: 'deleted',
+    });
   });
 
   it('should update the message with the result of deletion', async () => {

src/components/Message/hooks/useDeleteHandler.ts

@@ -4,7 +4,7 @@ import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
-import type { LocalMessage } from 'stream-chat';
+import type { DeleteMessageOptions, LocalMessage } from 'stream-chat';
 import type { ReactEventHandler } from '../types';
 
 export type DeleteMessageNotifications = {
@@ -22,14 +22,20 @@ export const useDeleteHandler = (
   const { client } = useChatContext('useDeleteHandler');
   const { t } = useTranslationContext('useDeleteHandler');
 
-  return async (event) => {
+  return async (event, options?: DeleteMessageOptions) => {
     event.preventDefault();
     if (!message?.id || !client || !updateMessage) {
       return;
     }
 
     try {
-      const deletedMessage = await deleteMessage(message);
+      const deletedMessage = await deleteMessage(message, options);
+      // necessary to populate the below values as the server does not return the message in the response as deleted
+      if (options?.deleteForMe) {
+        // deleted_at is not available for messages that are deleted_for_me
+        deletedMessage.deleted_for_me = true;
+        deletedMessage.type = 'deleted';
+      }
       updateMessage(deletedMessage);
     } catch (e) {
       const errorMessage =

src/components/Message/utils.tsx

@@ -52,6 +52,10 @@ export const isUserMuted = (message: LocalMessage, mutes?: Mute[]) => {
   return !!userMuted.length;
 };
 
+export const OPTIONAL_MESSAGE_ACTIONS = {
+  deleteForMe: 'deleteForMe',
+};
+
 export const MESSAGE_ACTIONS = {
   delete: 'delete',
   edit: 'edit',
@@ -67,7 +71,7 @@ export const MESSAGE_ACTIONS = {
 };
 
 export type MessageActionsArray<T extends string = string> = Array<
-  keyof typeof MESSAGE_ACTIONS | T
+  keyof typeof MESSAGE_ACTIONS | keyof typeof OPTIONAL_MESSAGE_ACTIONS | T
 >;
 
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
@@ -172,6 +176,10 @@ export const getMessageActions = (
     messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
   }
 
+  if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
+    messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
+  }
+
   if (canEdit && messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1) {
     messageActionsAfterPermission.push(MESSAGE_ACTIONS.edit);
   }

src/components/MessageActions/MessageActionsBox.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 import React from 'react';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
 import { RemindMeActionButton } from './RemindMeSubmenu';
-import { useMessageReminder } from '../Message';
+import { OPTIONAL_MESSAGE_ACTIONS, useMessageReminder } from '../Message';
 import { useMessageComposer } from '../MessageInput';
 import {
   useChatContext,
@@ -162,6 +162,17 @@ const UnMemoizedMessageActionsBox = (props: MessageActionsBoxProps) => {
             {t('Delete')}
           </button>
         )}
+        {messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1 &&
+          !message.deleted_for_me && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={(e) => handleDelete(e, { deleteForMe: true })}
+              role='option'
+            >
+              {t('Delete for me')}
+            </button>
+          )}
         {messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1 && (
           <RemindMeActionButton className={buttonClassName} isMine={mine} />
         )}

src/components/MessageActions/__tests__/MessageActionsBox.test.js

@@ -179,6 +179,20 @@ describe('MessageActionsBox', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should call the handleDelete prop if the deleteForMe button is clicked', async () => {
+    getMessageActionsMock.mockImplementationOnce(() => ['deleteForMe']);
+    const handleDelete = jest.fn();
+    const {
+      result: { container, getByText },
+    } = await renderComponent({ handleDelete, message: generateMessage() });
+    await act(async () => {
+      await fireEvent.click(getByText('Delete for me'));
+    });
+    expect(handleDelete).toHaveBeenCalledTimes(1);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
   it('should call the handlePin prop if the pin button is clicked', async () => {
     getMessageActionsMock.mockImplementationOnce(() => ['pin']);
     const handlePin = jest.fn();

src/context/ChannelActionContext.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
 import type {
+  DeleteMessageOptions,
   LocalMessage,
   Message,
   MessageResponse,
@@ -29,7 +30,10 @@ export type RetrySendMessage = (message: LocalMessage) => Promise<void>;
 export type ChannelActionContextValue = {
   addNotification: (text: string, type: 'success' | 'error') => void;
   closeThread: (event?: React.BaseSyntheticEvent) => void;
-  deleteMessage: (message: LocalMessage) => Promise<MessageResponse>;
+  deleteMessage: (
+    message: LocalMessage,
+    options?: DeleteMessageOptions,
+  ) => Promise<MessageResponse>;
   dispatch: React.Dispatch<ChannelStateReducerAction>;
   editMessage: (
     message: LocalMessage | MessageResponse,