Skip to content

Commit 8f87b2b

Browse files
MartinCupelaMartinCupela
authored
feat: mark channel unread (#2238)
1 parent 0ebdbc6 commit 8f87b2b

File tree

78 files changed

+3719
-709
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+3719
-709
lines changed

‎docusaurus/docs/React/components/contexts/channel-action-context.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ A function that takes a message to be edited, returns a Promise.
5050
| -------- |
5151
| function |
5252

53+
### jumpToFirstUnreadMessage
54+
55+
Jumps to the first unread message in the channel, if such message exists. If the message is not found, jumps to last read message. Does not jump if the last read message is not defined. The parameter `queryMessageLimit` specifies the message page size around the first unread message in case it is not found in the local app state and has to be retrieved through and API call.
56+
57+
| Type |
58+
| --------------------- |
59+
| `(queryMessageLimit?: number) => Promise<void>` |
60+
5361
### jumpToLatestMessage
5462

5563
Used in conjunction with `jumpToMessage`. Restores the position of the message list back to the most recent messages.

‎docusaurus/docs/React/components/contexts/component-context.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,22 @@ Custom UI component for the typing indicator.
365365
| --------- | ------------------------------------------------------------------------------------- |
366366
| component | <GHComponentLink text='TypingIndicator' path='/TypingIndicator/TypingIndicator.tsx'/> |
367367

368+
### UnreadMessagesNotification
369+
370+
Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`.
371+
372+
| Type | Default |
373+
| --------- | ------------------------------------------------------------------------------------- |
374+
| component | <GHComponentLink text='UnreadMessagesNotification' path='/MessageList/UnreadMessagesNotification.tsx'/> |
375+
376+
### UnreadMessagesSeparator
377+
378+
Custom UI component inserted before the first message marked unread.
379+
380+
| Type | Default |
381+
| --------- | ------------------------------------------------------------------------------------- |
382+
| component | <GHComponentLink text='UnreadMessagesSeparator' path='/MessageList/UnreadMessagesSeparator.tsx'/> |
383+
368384
### VirtualMessage
369385

370386
Custom UI component to display a message in the `VirtualizedMessageList`.

‎docusaurus/docs/React/components/contexts/message-context.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,14 @@ Function that flags a message.
177177
| ----------------------------------------------------------- |
178178
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
179179

180+
### handleMarkUnread
181+
182+
Function that marks the message and all the following messages as unread in a channel.
183+
184+
| Type |
185+
| ----------------------------------------------------------- |
186+
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
187+
180188
### handleMute
181189

182190
Function that mutes the sender of a message.

‎docusaurus/docs/React/components/contexts/message-list-context.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ The context value is provided by `MessageListContextProvider` which wraps the co
1515
- `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](./component-context.mdx#dateseparator).
1616
- `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](./component-context.mdx#messagesystem).
1717
- `HeaderComponent` - component to be displayed before the oldest message in the message list. The [`component can be customized`](./component-context.mdx#headercomponent).
18+
- `UnreadMessagesNotification` - custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`. The [`component can be customized`](./component-context.mdx#unreadmessagesnotification).
19+
- `UnreadMessagesSeparator` - component to be displayed before the oldest message in the message list. The [`component can be customized`](./component-context.mdx#unreadmessagesseparator).
1820

1921
## Basic Usage
2022

‎docusaurus/docs/React/components/core-components/channel.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,14 @@ export const MessageInput = (props: MessageInputProps) => {
469469
| ------- | ------- |
470470
| boolean | true |
471471

472+
### markReadOnMount
473+
474+
Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is not marked read on mount.
475+
476+
| Type | Default |
477+
|---------|---------|
478+
| boolean | false |
479+
472480
### Input
473481

474482
Custom UI component handling how the message input is rendered.
@@ -733,6 +741,23 @@ Custom UI component for the typing indicator.
733741
| --------- | ------------------------------------------------------------------------------------- |
734742
| component | <GHComponentLink text='TypingIndicator' path='/TypingIndicator/TypingIndicator.tsx'/> |
735743

744+
### UnreadMessagesNotification
745+
746+
Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`.
747+
748+
| Type | Default |
749+
| --------- | ------------------------------------------------------------------------------------- |
750+
| component | <GHComponentLink text='UnreadMessagesNotification' path='/MessageList/UnreadMessagesNotification.tsx'/> |
751+
752+
753+
### UnreadMessagesSeparator
754+
755+
Custom UI component inserted before the first message marked unread.
756+
757+
| Type | Default |
758+
| --------- | ------------------------------------------------------------------------------------- |
759+
| component | <GHComponentLink text='UnreadMessagesSeparator' path='/MessageList/UnreadMessagesSeparator.tsx'/> |
760+
736761
### videoAttachmentSizeHandler
737762

738763
A custom function to provide size configuration for video attachments

‎docusaurus/docs/React/components/core-components/message-list.mdx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ If true, picking a reaction from the `ReactionSelector` component will close the
266266

267267
### customMessageActions
268268

269-
An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../message-components/message_ui/#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
269+
An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../message-components/message_ui#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
270270

271271
```jsx
272272
const customActions = {
@@ -350,6 +350,24 @@ flagged [message object](https://getstream.io/chat/docs/javascript/message_forma
350350
| ---------------------------------- |
351351
| (message: StreamMessage) => string |
352352

353+
### getMarkMessageUnreadErrorNotification
354+
355+
Function that returns the notification text to be displayed when a mark message unread request fails. This function receives the
356+
marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
357+
358+
| Type |
359+
| ---------------------------------- |
360+
| (message: StreamMessage) => string |
361+
362+
### getMarkMessageUnreadSuccessNotification
363+
364+
Function that returns the notification text to be displayed when a mark message unread request succeeds. This function receives the
365+
marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
366+
367+
| Type |
368+
| ---------------------------------- |
369+
| (message: StreamMessage) => string |
370+
353371
### getMuteUserErrorNotification
354372

355373
Function that returns the notification text to be displayed when a mute user request fails. This function receives the
@@ -441,6 +459,14 @@ Function called when more messages are to be loaded, provide your own function t
441459
| -------- | ---------------------------------------------------------------------------------------- |
442460
| function | [ChannelActionContextValue['loadMore']](../contexts/channel-action-context.mdx#loadmore) |
443461

462+
### markReadOnScrolledToBottom
463+
464+
When enabled, the channel will be marked read when a user scrolls to the bottom. Ignored when scrolled to the bottom of a thread message list.
465+
466+
| Type | Default |
467+
|---------|---------|
468+
| boolean | false |
469+
444470
### Message
445471

446472
Custom UI component to display an individual message.

‎docusaurus/docs/React/components/core-components/virtualized-list.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,14 @@ Function called when more messages are to be loaded, provide your own function t
174174
| -------- | ---------------------------------------------------------------------------------------- |
175175
| function | [ChannelActionContextValue['loadMore']](../contexts/channel-action-context.mdx#loadmore) |
176176

177+
### markReadOnScrolledToBottom
178+
179+
When enabled, the channel will be marked read when a user scrolls to the bottom. Ignored when scrolled to the bottom of a thread message list.
180+
181+
| Type | Default |
182+
|---------|---------|
183+
| boolean | false |
184+
177185
### Message
178186

179187
Custom UI component to display an individual message.

‎docusaurus/docs/React/components/message-components/message-ui.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,15 @@ Function that flags a message (overrides the function stored in `MessageContext`
305305
| ----------------------------------------------------------- | ------------------------------------------------------------------------------- |
306306
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['handleFlag']](../contexts/message-context.mdx#handleflag) |
307307

308+
### handleMarkUnread
309+
310+
Function that marks the message and all the following messages as unread in a channel. (overrides the function stored in `MessageContext`).
311+
312+
| Type | Default |
313+
| ----------------------------------------------------------- | ------------------------------------------------------------------------------- |
314+
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['handleMarkUnread']](../contexts/message-context.mdx#handleMarkUnread) |
315+
316+
308317
### handleMute
309318

310319
Function that mutes the sender of a message (overrides the function stored in `MessageContext`).

‎docusaurus/docs/React/components/message-components/message.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,24 @@ flagged [message object](https://getstream.io/chat/docs/javascript/message_forma
174174
| ---------------------------------- |
175175
| (message: StreamMessage) => string |
176176

177+
### getMarkMessageUnreadErrorNotification
178+
179+
Function that returns the notification text to be displayed when a mark message unread request fails. This function receives the
180+
marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
181+
182+
| Type |
183+
| ---------------------------------- |
184+
| (message: StreamMessage) => string |
185+
186+
### getMarkMessageUnreadSuccessNotification
187+
188+
Function that returns the notification text to be displayed when a mark message unread request succeeds. This function receives the
189+
marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
190+
191+
| Type |
192+
| ---------------------------------- |
193+
| (message: StreamMessage) => string |
194+
177195
### getMuteUserErrorNotification
178196

179197
Function that returns the notification text to be displayed when a mute user request fails. This function receives the

‎docusaurus/docs/React/components/message-components/ui-components.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,14 @@ Function that flags a message (overrides the value from `MessageContext`).
8181
| ----------------------------------------------------------- |
8282
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
8383

84+
### handleMarkUnread
85+
86+
Function that marks the message and all the following messages as unread in a channel.
87+
88+
| Type |
89+
| ----------------------------------------------------------- |
90+
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
91+
8492
### handleMute
8593

8694
Function that mutes the sender of a message (overrides the value from `MessageContext`).

0 commit comments

Comments
 (0)