Easiest way to show up-to-date number of unread messages of a channel?

Sendbird Chat UIKit React
1

[Problem/Question]
Hi! First post here. In my application, a user can only see a single channel by design. I’d like to know what is the easiest way to display the number of unread messages of that channel, as well as keep that number up-to-date after a user reads the messages.

E.g. of my desired flow:

  1. User logs into app and sees they have X unread messages;
  2. User opens the drawer that contains the Channel and reads them;
  3. Unread messages counter must go from X to 0 automatically;
  4. User closes the drawer and receives Y new messages;
  5. Number of unread messages must go from 0 to Y automatically until step 2 happens again;

Would the UI Kit help me with this, or would I have to directly use the JS SDK? I read the read receipts article but I struggled to see how it’d map to my situation.

Appreciate if you could help!

~jota

–
Uikit version: 3.6.5
JS SDK version: 4.9.6

2

hello @Jota ,

Welcome to Sendbird community!

Please refer below link for managing unread count in JS.

Let me know if you have any queries.

3

Hey @rahul, thanks for the response. But how would I manage to keep that number up to date? In other words, is there an event provided by the SDK that would allow me to know when the messages of that channel have been read so that I can update React’s state?

EDIT: ok I was able to find onChannelChanged but I wanted to let you know that the d.ts file provided in the SDK is not up to date:

onChannelChanged: (channel) => {
  if (channel.url === channelUrl) {
     setUnreadMessages(channel.unreadMessageCount);
                             / ^--- Property 'unreadMessageCount' does not exist on type 'BaseChannel'.ts(2339)
   }
},
4

Hello @Jota ,

Thanks for sharing it. We will check it on our end.
Please let us know if you have any other query.