How to display total unread message count in react?

Sendbird Chat UIKit React
,
1

Please state the version of UIKit & OS you are using when creating a topic
and select the related tags

UIKit ver 2.7.0

I want to display total unread message count using SendBird.getTotalUnreadMessageCount (like android)

2

Hi @aram,

Depending on where you’re looking to display this value, you may need to utilize the core Javascript SDK in conjunction with the UIKit to achieve your goal. Could you provide us with some context of where you’re looking to display this value?

3

Please check the bottom of the screenshot.
*Mobile web

image
image774×1356 158 KB

4

Based on the screenshot, it sounds like you would likely need to utilize the core SDK unless you’re utilizing the Sendbird Provider HOC.

If you’re using the HOC, you could get an instance of the SDK directly from the UIKit:

const context = useSendbirdStateContext();
const sdkInstance = sendBirdSelectors.getSdk(context);
const unreadCount = sdkInstance.getTotalUnreadMessageCount();

Here is an example where I console it out: totalUnreadCount Example - CodeSandbox

1 Like
5

Type error occurred…

image
image1908×882 85.7 KB

image
image1228×722 214 KB

6

Is this being called in a component that is wrapped with the SendBirdProvider HOC?

7

No, but I want to implement this outside the SendBirdProvider.

8

Ah okay. If you want to implement outside of the provider, you’ll need to utilize the Core SDK along side the UIKit. Which does mean you’d need to implement several steps such as the connection and authentication as well as the fetching of the totalUnreadCount.

1 Like
9

it’s not working

First question, why can’t I use the latest version of the library for a React version below 18? You do import from version 18 in your code for MessageInput and it doesn’t work on versions below, although it is stated in your documentation
I have to use this version “@sendbird/uikit-react”: “3.1.0”

Second question, why it’s not working

import { FC } from 'react';
import { sendBirdSelectors, useSendbirdStateContext } from '@sendbird/uikit-react';

const UnreadMessagesHandler: FC = ({}) => {
  console.log({ sendBirdSelectors });

  return null;
};

export default UnreadMessagesHandler;

console:

{sendBirdSelectors: undefined}   UnreadMessagesHandler.tsx:7

My component is wrapped in SendbirdProvider

      <SendBirdProvider
            appId={SENDBIRD_APP_ID}
            colorSet={colorSet}
            nickname={currentApplicationChatData.name}
            theme="light"
            userId={currentApplicationChatData.sendbirdUserId}
          >
            <UnreadMessagesHandler />
            <Channel channelUrl={currentApplicationChatData.channelId} />
      </SendBirdProvider>

Okay, I’ll use another import, but that doesn’t work either

image
image2176×760 103 KB

u have’t this method in your sdk

u example in sandbox also not working

1 Like
10

The solution was found, I had to dig through the library code to find it

const UnreadMessagesHandler: FC<Props> = ({ channelId, setUnreadMessages, isOpened }) => {
  const context = useSendbirdStateContext();
  const getGroupChannel = sendbirdSelectors.getGetGroupChannel(context);

  const handleUnreadMessages = useCallback(async () => {
    if (!isOpened) {
      const groupChannel = await getGroupChannel(channelId);

      setUnreadMessages(groupChannel.unreadMessageCount);
    }
  }, [channelId, getGroupChannel, isOpened, setUnreadMessages]);

  useEffect(() => {
    handleUnreadMessages();

    const getUnreadMessages = setInterval(handleUnreadMessages, 10_000); // 10s

    return () => {
      clearInterval(getUnreadMessages);
    };
  }, [handleUnreadMessages, setUnreadMessages]);

  useEffect(() => {
    if (isOpened) {
      setUnreadMessages(0);
    }
  }, [isOpened, setUnreadMessages]);

  return null;
};

export default UnreadMessagesHandler;


   // hide by css to access to unread messages
 <ChatWrapper isOpened={isOpened} ref={chatRef}>
          <SendBirdProvider
            appId={SENDBIRD_APP_ID}
            colorSet={colorSet}
            nickname={currentApplicationChatData.name}
            theme="light"
            userId={currentApplicationChatData.sendbirdUserId}
          >
            <UnreadMessagesHandler
              channelId={currentApplicationChatData.channelId}
              isOpened={isOpened}
              setUnreadMessages={setUnreadMessages}
            />
            {/* hide to prevent reading messages when chat is closed */}
            {isOpened && (
              <Channel channelUrl={currentApplicationChatData.channelId} />
            )}
          </SendBirdProvider>
        </ChatWrapper>
11

@Tyler getTotalUnreadMessageCount() method does not exist in sdkInstance.

Any other way the get total unread messages from all the channels that the user has?
I’m using SendbirdProvider.

Also I have the sendbird/chat package, and when I try to get it through that the count is 0, and it should be 2:

await sendbird.connect(id, MOCKED_USER_3_ACCESS_TOKEN);
const count = await sendbird.groupChannel.getTotalUnreadMessageCount();

image

1 Like