feat: add Channel prop doDeleteMessageRequest (#2152)

GetStream · Nov 3, 2023 · a01774a · a01774a
1 parent f392927
commit a01774a
Show file tree

Hide file tree

Showing 6 changed files with 414 additions and 150 deletions.
diff --git a/docusaurus/docs/React/components/core-components/channel.mdx b/docusaurus/docs/React/components/core-components/channel.mdx
@@ -192,6 +192,37 @@ Custom UI component for date separators.
 | --------- | ------------------------------------------------------------------------------- |
 | component | <GHComponentLink text='DateSeparator' path='/DateSeparator/DateSeparator.tsx'/> |
 
+### doDeleteMessageRequest
+
+Custom action handler to override the default `client.deleteMessage(message.id)` function.
+
+| Type                                                                                                                      |
+|---------------------------------------------------------------------------------------------------------------------------|
+| `(message: StreamMessage<StreamChatGenerics>) => Promise<MessageResponse<StreamChatGenerics>>` |
+
+The function can execute different logic for message replies compared to messages in the main message list based on the `parent_id` property of `StreamMessage` object:
+
+```tsx
+import { Channel, StreamMessage } from 'stream-chat-react';
+import type { MyStreamChatGenerics } from './types';
+
+const doDeleteMessageRequest = async (message: StreamMessage<MyStreamChatGenerics>) => {
+    if (message.parent_id) {
+        // do something before / after deleting a message reply
+    } else {
+        // do something before / after deleting a message
+    }
+}
+
+const App = () => (
+  {/* more components */}
+    <Channel doDeleteMessageRequest={ doDeleteMessageRequest }>
+        {/* more components */}
+    </Channel>
+  {/* more components */}
+);
+```
+
 ### doMarkReadRequest
 
 Custom action handler to override the default `channel.markRead` request function (advanced usage only).

diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -1,5 +1,6 @@
 import React, {
   PropsWithChildren,
+  useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -118,6 +119,10 @@ export type ChannelProps<
   CooldownTimer?: ComponentContextValue<StreamChatGenerics>['CooldownTimer'];
   /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
   DateSeparator?: ComponentContextValue<StreamChatGenerics>['DateSeparator'];
+  /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
+  doDeleteMessageRequest?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => Promise<MessageResponse<StreamChatGenerics>>;
   /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
   doMarkReadRequest?: (
     channel: StreamChannel<StreamChatGenerics>,
@@ -313,6 +318,7 @@ const ChannelInner = <
     activeUnreadHandler,
     channel,
     children,
+    doDeleteMessageRequest,
     doMarkReadRequest,
     doSendMessageRequest,
     doUpdateMessageRequest,
@@ -679,6 +685,26 @@ const ChannelInner = <
     });
   };
 
+  const deleteMessage = useCallback(
+    async (
+      message: StreamMessage<StreamChatGenerics>,
+    ): Promise<MessageResponse<StreamChatGenerics>> => {
+      if (!message?.id) {
+        throw new Error('Cannot delete a message - missing message ID.');
+      }
+      let deletedMessage;
+      if (doDeleteMessageRequest) {
+        deletedMessage = await doDeleteMessageRequest(message);
+      } else {
+        const result = await client.deleteMessage(message.id);
+        deletedMessage = result.message;
+      }
+
+      return deletedMessage;
+    },
+    [client, doDeleteMessageRequest],
+  );
+
   const updateMessage = (
     updatedMessage: MessageToSend<StreamChatGenerics> | StreamMessage<StreamChatGenerics>,
   ) => {
@@ -925,6 +951,7 @@ const ChannelInner = <
     () => ({
       addNotification,
       closeThread,
+      deleteMessage,
       dispatch,
       editMessage,
       jumpToLatestMessage,
@@ -944,6 +971,7 @@ const ChannelInner = <
     }),
     [
       channel.cid,
+      deleteMessage,
       enrichURLForPreviewConfig?.findURLFn,
       enrichURLForPreviewConfig?.onLinkPreviewDismissed,
       loadMore,