Chat won’t refresh after applying messageTypeFilters

Sendbird Chat UIKit
,
1

I’ve implemented a feature where user can filter with tabs what type of messages they want to see (all messages, only text messages, only custom messages or only file messages).

image
image221×535 27.8 KB

I used the queries param on Channel component with messageListParams containing info on what should be filtered, something like this

       <Channel
          channelUrl={channelId}
          queries={{
            messageListParams:{
               prevResultSize: 15,
               nextResultSize: 15,
               messageTypeFilter: MessageTypeFilter.FILE,
            },
          }}
        />

but after I’ve applied a filter I don’t see new messages appear until I refresh the app. This happens both when I have the filter applied, and also after I’ve cleared the filters.

I have a codesandbox with a sample where you can turn on a filter to only see files messages (note that this is a bug with incoming messages so you need to send messages from other account to see the bug in action).

versions:
“@sendbird/uikit-react”: “3.1.1”,
“sendbird”: “3.1.8”,
“react”: “18.1.0”,

Is this a bug or did I implement a feature that Sendbird is not designed to support?

2 Likes
2

I met the same issue, the sent message not show up after send.
Only if i do the reload page…
seems not caused by queries, tried remove that prop.

my code is like this, and using customized message component.

const MESSAGE_QUERIES = {
  messageListParams: {
    isInclusive: true,
    includeMetaArray: true,
    includeReactions: false,
  },
} as ChannelQueries;
<Channel
            channelUrl={channelUrl}
            renderMessage={renderChatItem}
            disableUserProfile={true}
            queries={MESSAGE_QUERIES} // comment this one also not works
            renderChannelHeader={renderChatHeader}
            renderMessageInput={renderMessageInput}
            renderCustomSeparator={CustomDateSeparator}
          />

Any ideas how to display the message just send with Channel component and customized sub components?

UPDATE:
Finally found the issue:
Previously i use channel.sendUserMessage, which channel is from channelContext,
I replaced it with sendbirdselectors, then the sent msg could show up now.

const sendUserMessage = sendbirdSelectors.getSendUserMessage(globalStore);
sendUserMessage(channel, {} as UserMessageCreateParams)
    .onPending((message) => {})
    .onFailed((error, message) => {})
    .onSucceeded((message) => {})