While testing my application I occasionally have an issue when I receive a message to a chat that is currently open. I see the new message appear in the ChannelPreview and I get a notification saying I have a new message. However the new message doesn’t appear in the channel unless I refresh the page.
Version: Sendbird UIKit React version 3.1.2
Frequency: Occasional
Impact: Reducing confidence and Reliability of the app.
Hello @Trevor_Dammon,
Welcome to the Sendbird Community.
Could you provide some additional information around your implementation? Have you done any customization to the UIKit? Are you using the component or the component?
How frequent is occasionally? Meaning if I was to try and reproduce this how long do you think it might take?
Hi Tyler,
I’ll share a snippet of the code I have implemented. I am using the uikit for React.
The basic structure starts with the SendbirdProvider component containing the ChannelList and a custom ChannelHeader. If a channel is selected then the Channel component is displayed. Lastly if settings or search is clicked then either ChannelSettings or MessageSearch will be displayed.
<SendbirdProvider
accessToken={accessToken}
appId={sendbirdAppId}
colorSet={myColorSet}
nickname={user.fullName}
userId={user.userId}
>
<div className={styles.sendbirdContainer}>
<ChannelList
className={styles.channelList}
queries={{
channelListQuery: {
includeEmpty: true,
},
}}
renderChannelPreview={({ channel }) =>
renderChannelPreview(channel)
}
renderHeader={renderHeader}
/>
{currentChannel ? (
<Channel
channelUrl={currentChannel?.url}
className={styles.channel}
disableUserProfile={true}
highlightedMessage={
selectedMessage?.messageId
}
isReactionEnabled={true}
onChatHeaderActionClick={() => {
setShowSettings(true);
showSearch && setShowSearch(false);
}}
onSearchClick={() => {
setShowSearch(true);
showSettings && setShowSettings(false);
}}
replyType="QUOTE_REPLY"
showSearchIcon={true}
/>
) : (
<div className={styles.chatPlaceholder}></div>
)}
{showSettings && (
<ChannelSettings
channelUrl={currentChannel?.url}
className={styles.channelSettings}
onCloseClick={() => setShowSettings(false)}
renderChannelProfile={renderChannelProfile}
renderModerationPanel={
renderModerationPanel
}
queries={{
usersDataSource: contactList,
}}
/>
)}
{showSearch && (
<div className={styles.messageSearchContainer}>
<MessageSearch
channelUrl={currentChannel?.url}
onCloseClick={() =>
setShowSearch(false)
}
onResultClick={setSelectedMessage}
/>
</div>
)}
</div>
</SendbirdProvider>
I have a video of the issue but I am not permitted to upload it as I am a new user.
The issue happens maybe 1 in 20 times while testing.
Thanks again.
Hi Trevor,
It may be best for you to submit a case to our support team via the Dashboard of your organization. It will allow you to upload videos and relevant information there. In the mean time, I’ll try and reproduce this behavior.
