Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Channel prop doDeleteMessageRequest #2152

Merged
merged 3 commits into from
Nov 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions docusaurus/docs/React/components/core-components/channel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
28 changes: 28 additions & 0 deletions src/components/Channel/Channel.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {
PropsWithChildren,
useCallback,
useEffect,
useLayoutEffect,
useMemo,
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -313,6 +318,7 @@ const ChannelInner = <
activeUnreadHandler,
channel,
children,
doDeleteMessageRequest,
doMarkReadRequest,
doSendMessageRequest,
doUpdateMessageRequest,
Expand Down Expand Up @@ -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>,
) => {
Expand Down Expand Up @@ -925,6 +951,7 @@ const ChannelInner = <
() => ({
addNotification,
closeThread,
deleteMessage,
dispatch,
editMessage,
jumpToLatestMessage,
Expand All @@ -944,6 +971,7 @@ const ChannelInner = <
}),
[
channel.cid,
deleteMessage,
enrichURLForPreviewConfig?.findURLFn,
enrichURLForPreviewConfig?.onLinkPreviewDismissed,
loadMore,
Expand Down
Loading
Loading