Channel does not get added after member being removed and added back to channel

[hima-Megahed]

Hello, I have an odd behavior which i don't know if that's a bug.

I have a ChannelList Component which list all my channels. When I been removed as a member from a channel it disappear from ChannelList and that's correct, but when I've been added to the same channel it doesn't show up in ChannelList again. Only when i refresh show up.

So is there anything i'm missing or workaround rather than refreshing where that's not efficient solution.

Thanks GetStream!

gz#5562

[hima-Megahed]

@jaapbakker88 @vishalnarkhede any help i would be thankful as this is affecting my application.

[ModunIran]

i have the same problem. pls note the solution when you solve it. thx.

[hima-Megahed]

@mahboubii @jaapbakker88 Any updates regarding this issue, it forces my application to full reload to overcome as a workaround which is very bad.

[DanC5]

@hima-Megahed Sorry for the delay here, just now getting caught up on this issue. Based on the setup of your app, can you console log which event fires in this user flow, particularly when the user is re-added to the channel? You can setup an event listener like this,

client.on('all', (event) => console.log(event))

I suspect I know the issue, but want to be sure I know what's happening in your app.

[hima-Megahed]

@DanC5 Hey there Thanks for your help, I got you what you asked for

First thing when the logged-in user has been added to a channel

"{"type":"notification.added_to_channel","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","channel":{"id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","type":"team","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","created_at":"2021-01-24T13:13:52.341865Z","updated_at":"2021-01-24T13:14:28.607128Z","created_by":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"name":"System Admin","image":"https://ui-avatars.com/api/?size=200&name=System+Admin"},"frozen":false,"members":[{"user_id":"5","user":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=System+Admin","name":"System Admin"},"is_moderator":true,"created_at":"2021-01-24T13:13:52.343771Z","updated_at":"2021-01-24T13:13:52.979734Z","banned":false,"shadow_banned":false},{"user_id":"8","user":{"id":"8","role":"user","created_at":"2020-12-01T13:55:27.452422Z","updated_at":"2021-02-02T11:11:28.260312Z","last_active":"2021-02-02T11:11:28.260312Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Mahmoud+Kassem","name":"Mahmoud Kassem"},"created_at":"2021-02-01T13:07:15.444094Z","updated_at":"2021-02-01T13:07:15.444094Z","banned":false,"shadow_banned":false},{"user_id":"9","user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:19:32.252088Z","last_active":"2021-02-02T11:19:32.252088Z","banned":false,"online":true,"teams":["Team_2_2"],"name":"Ahmed Tawfik","image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik"},"created_at":"2021-02-02T11:33:38.889827Z","updated_at":"2021-02-02T11:33:38.889827Z","banned":false,"shadow_banned":false}],"member_count":3,"config":{"created_at":"2020-11-09T12:51:10.126437Z","updated_at":"2020-11-16T11:52:50.292932Z","name":"team","typing_events":true,"read_events":true,"connect_events":true,"search":true,"reactions":true,"replies":true,"mutes":true,"uploads":true,"url_enrichment":true,"custom_events":false,"message_retention":"infinite","max_message_length":5000,"automod":"disabled","automod_behavior":"flag","blocklist_behavior":"flag","commands":[{"name":"giphy","description":"Post a random gif to the channel","args":"[text]","set":"fun_set"}]},"team":"Team_2_2","image":"https://ui-avatars.com/api/?size=190&name=qwe dsds","isPublic":true,"description":"descripton","name":"Hima Group"},"created_at":"2021-02-02T11:33:38.904516848Z","unread_count":5,"total_unread_count":5,"unread_channels":2,"received_at":"2021-02-02T11:33:39.047Z"}"

Then when the same user gets removed from this channel

"{"type":"notification.removed_from_channel","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","channel":{"id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","type":"team","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","created_at":"2021-01-24T13:13:52.341865Z","updated_at":"2021-01-24T13:14:28.607128Z","created_by":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=System+Admin","name":"System Admin"},"frozen":false,"members":[{"user_id":"5","user":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"name":"System Admin","image":"https://ui-avatars.com/api/?size=200&name=System+Admin"},"is_moderator":true,"created_at":"2021-01-24T13:13:52.343771Z","updated_at":"2021-01-24T13:13:52.979734Z","banned":false,"shadow_banned":false},{"user_id":"8","user":{"id":"8","role":"user","created_at":"2020-12-01T13:55:27.452422Z","updated_at":"2021-02-02T11:11:28.260312Z","last_active":"2021-02-02T11:11:28.260312Z","banned":false,"online":false,"teams":["Team_2_2"],"name":"Mahmoud Kassem","image":"https://ui-avatars.com/api/?size=200&name=Mahmoud+Kassem"},"created_at":"2021-02-01T13:07:15.444094Z","updated_at":"2021-02-01T13:07:15.444094Z","banned":false,"shadow_banned":false}],"member_count":2,"config":{"created_at":"2020-11-09T12:51:10.126437Z","updated_at":"2020-11-16T11:52:50.292932Z","name":"team","typing_events":true,"read_events":true,"connect_events":true,"search":true,"reactions":true,"replies":true,"mutes":true,"uploads":true,"url_enrichment":true,"custom_events":false,"message_retention":"infinite","max_message_length":5000,"automod":"disabled","automod_behavior":"flag","blocklist_behavior":"flag","commands":[{"name":"giphy","description":"Post a random gif to the channel","args":"[text]","set":"fun_set"}]},"team":"Team_2_2","image":"https://ui-avatars.com/api/?size=190&name=qwe dsds","isPublic":true,"description":"descripton","name":"Hima Group"},"member":{"role":"member","created_at":"2021-02-02T11:39:54.262937Z","updated_at":"2021-02-02T11:39:54.262937Z","banned":false,"shadow_banned":false},"user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik","name":"Ahmed Tawfik"},"created_at":"2021-02-02T11:40:20.224703456Z","received_at":"2021-02-02T11:40:20.309Z"}"

Then

"{"type":"member.removed","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik","name":"Ahmed Tawfik"},"created_at":"2021-02-02T11:40:20.214130987Z","received_at":"2021-02-02T11:40:20.313Z"}"

Then

"{"type":"channel.updated","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","channel":{"id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","type":"team","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","created_at":"2021-01-24T13:13:52.341865Z","updated_at":"2021-01-24T13:14:28.607128Z","created_by":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=System+Admin","name":"System Admin"},"frozen":false,"members":[{"user_id":"5","user":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=System+Admin","name":"System Admin"},"is_moderator":true,"created_at":"2021-01-24T13:13:52.343771Z","updated_at":"2021-01-24T13:13:52.979734Z","banned":false,"shadow_banned":false},{"user_id":"8","user":{"id":"8","role":"user","created_at":"2020-12-01T13:55:27.452422Z","updated_at":"2021-02-02T11:11:28.260312Z","last_active":"2021-02-02T11:11:28.260312Z","banned":false,"online":false,"teams":["Team_2_2"],"name":"Mahmoud Kassem","image":"https://ui-avatars.com/api/?size=200&name=Mahmoud+Kassem"},"created_at":"2021-02-01T13:07:15.444094Z","updated_at":"2021-02-01T13:07:15.444094Z","banned":false,"shadow_banned":false}],"member_count":2,"config":{"created_at":"2020-11-09T12:51:10.126437Z","updated_at":"2020-11-16T11:52:50.292932Z","name":"team","typing_events":true,"read_events":true,"connect_events":true,"search":true,"reactions":true,"replies":true,"mutes":true,"uploads":true,"url_enrichment":true,"custom_events":false,"message_retention":"infinite","max_message_length":5000,"automod":"disabled","automod_behavior":"flag","blocklist_behavior":"flag","commands":[{"name":"giphy","description":"Post a random gif to the channel","args":"[text]","set":"fun_set"}]},"team":"Team_2_2","description":"descripton","image":"https://ui-avatars.com/api/?size=190&name=qwe dsds","isPublic":true,"name":"Hima Group"},"created_at":"2021-02-02T11:40:20.235120879Z","received_at":"2021-02-02T11:40:20.315Z"}"

Then When the same user joins the same channel again

ChannelTeamList will be empty as in the image

And those are the events I got when the same user gets added to the same channel for the second time:

• "{"type":"member.added","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","member":{"user_id":"9","user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik","name":"Ahmed Tawfik"},"created_at":"2021-02-02T11:43:28.212441Z","updated_at":"2021-02-02T11:43:28.212441Z","banned":false,"shadow_banned":false},"user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik","name":"Ahmed Tawfik"},"created_at":"2021-02-02T11:43:28.218416718Z","received_at":"2021-02-02T11:43:28.291Z"}"
• Then "{"type":"channel.updated","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","channel":{"id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","type":"team","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","created_at":"2021-01-24T13:13:52.341865Z","updated_at":"2021-01-24T13:14:28.607128Z","created_by":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=System+Admin","name":"System Admin"},"frozen":false,"members":[{"user_id":"5","user":{"id":"5","role":"user","created_at":"2020-11-22T10:12:32.893483Z","updated_at":"2021-02-02T10:02:17.31005Z","last_active":"2021-02-02T10:02:17.31005Z","banned":false,"online":false,"teams":["Team_2_2"],"name":"System Admin","image":"https://ui-avatars.com/api/?size=200&name=System+Admin"},"is_moderator":true,"created_at":"2021-01-24T13:13:52.343771Z","updated_at":"2021-01-24T13:13:52.979734Z","banned":false,"shadow_banned":false},{"user_id":"8","user":{"id":"8","role":"user","created_at":"2020-12-01T13:55:27.452422Z","updated_at":"2021-02-02T11:11:28.260312Z","last_active":"2021-02-02T11:11:28.260312Z","banned":false,"online":false,"teams":["Team_2_2"],"image":"https://ui-avatars.com/api/?size=200&name=Mahmoud+Kassem","name":"Mahmoud Kassem"},"created_at":"2021-02-01T13:07:15.444094Z","updated_at":"2021-02-01T13:07:15.444094Z","banned":false,"shadow_banned":false},{"user_id":"9","user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"name":"Ahmed Tawfik","image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik"},"created_at":"2021-02-02T11:43:28.212441Z","updated_at":"2021-02-02T11:43:28.212441Z","banned":false,"shadow_banned":false}],"member_count":3,"config":{"created_at":"2020-11-09T12:51:10.126437Z","updated_at":"2020-11-16T11:52:50.292932Z","name":"team","typing_events":true,"read_events":true,"connect_events":true,"search":true,"reactions":true,"replies":true,"mutes":true,"uploads":true,"url_enrichment":true,"custom_events":false,"message_retention":"infinite","max_message_length":5000,"automod":"disabled","automod_behavior":"flag","blocklist_behavior":"flag","commands":[{"name":"giphy","description":"Post a random gif to the channel","args":"[text]","set":"fun_set"}]},"team":"Team_2_2","description":"descripton","image":"https://ui-avatars.com/api/?size=190&name=qwe dsds","isPublic":true,"name":"Hima Group"},"created_at":"2021-02-02T11:43:28.224301393Z","received_at":"2021-02-02T11:43:28.293Z"}"
• Then "{"type":"user.watching.start","cid":"team:Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_id":"Team_2_2_public_3fc07800-838e-40e6-bff5-79dbc8a32666","channel_type":"team","user":{"id":"9","role":"user","created_at":"2020-09-14T11:04:45.271808Z","updated_at":"2021-02-02T11:34:38.482615Z","last_active":"2021-02-02T11:34:38.482615Z","banned":false,"online":true,"teams":["Team_2_2"],"name":"Ahmed Tawfik","image":"https://ui-avatars.com/api/?size=200&name=Ahmed+Tawfik"},"watcher_count":1,"created_at":"2021-02-02T11:43:30.944407037Z","received_at":"2021-02-02T11:43:31.011Z"}"

[DanC5]

@hima-Megahed Great info! Ok this is what I suspected, the notification.added_to_channel event adds the channel in question to the list, but channel.updated does not. We're looking to make a pretty significant release by the end of the week, so I'll try to get the fix in by then, and will keep you updated. Thanks!

[hima-Megahed]

@DanC5 Ok, great then I'm waiting on this and we appreciate all the hard work you are doing here guys. Keep it up 👍

[DanC5]

@hima-Megahed I just researched this a bit and noticed that while our event listener for the 'channel.updated' event doesn't automatically add the channel in question to the list, we do provide an optional customHandler function https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useChannelUpdatedListener.js#L15.

This function trickles into the event listener via the onChannelUpdated prop on the ChannelList component, https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.js#L147. In this function, you should be able to do something like this to automatically add the channel to the list...

const onChannelUpdated = async (setChannels, event) => {
  const channel = client.channel(event.channel.type, event.channel.id);
  await channel.watch();
  setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
}

You might need to play with the custom handler function a bit to get everything to line up, but I imagine something similar to this will work for your use case. Let me know if this works or not, thanks!

[hima-Megahed]

@DanC5 Great I'll mess around with this and update you whether worked or not, Indeed Do you still going to include a fix for this in the next release?

[DanC5]

@hima-Megahed I can speak with our backend team to see if the events fire in this order for any particular reason. Since other events trigger channel.updated we probably won't add the event channel to the top of the list by default, which is why we have the optional handler. But it does make sense that in your case the channel should be re-added. I'll report back, thanks.

[hima-Megahed]

@DanC5 Yes I got your point, but your fix I see kinda temporary So that I asked whether this would be included by your end to the code base and later released to the public as this will be more reliable and optimized for me as an end-user for GetStream.

Anyway, I really appreciate your help and as I said I'll try your fix and get you back with the results, meanwhile if GetStream backend team managed to resolve this and included it in a patch fix or something, that would be cheering.

[DanC5]

@hima-Megahed here's the exact message I sent to the back end team, and they said this is not the expected results. Can you share a code snippet of how you're adding/removing members to the channel? If it is a bug on our end, then this will help them pinpoint what to adjust in the event logic.

[hima-Megahed]

@DanC5 Ok Great, sorry for the late reply was the end of my week,

So first I add member using stream-chat-net nuget package version: 0.4.3

and this how we add a user to a channel

Then I remove member using stream-chat-net nuget package version: 0.4.3

and this how we remove a user from a channel

So as I described before for you the strange behavior happens for the second time user joins a channel.

also worth noting, I'm using the flowing packages in the front end code

• "getstream": "^4.5.4"
• "stream-chat-react": "^1.0.1"

[DanC5]

Ahh ok, so you're hitting those endpoints from the .NET SDK. I don't have experience with this language/SDK, so we're going to need to pull in a backend engineer to help out.

@ferhatelmas Can you jump in and answer a question regarding the event logic of the .NET SDK? To summarize, Ibrahim adds a member to a channel, removes the member, and then adds the member again. Per my screenshot above, he's seeing different events fire for the first and second addition.

@hima-Megahed Have you yet tried to add a custom onChannelUpdated prop to the ChannelList to handle the addition of the channel back to the list? We'll see what Ferhat has to say about the events, but either way that custom handler prop should fix your issue, but I understand wanting to see if we can get consistent events to fire on first and second addition.

Also, it'd be helpful to know what version of stream-chat-react you have installed in your lock file, as the latest release v3.6.0.

[hima-Megahed]

@DanC5 Looks great, So I'm waiting on @ferhatelmas look as he could spot the problem, And yet I didn't try adding the custom onChannelUpdated I'm really going through a high peak workload currently. But I could give it a try and sure I'll need your help on this but let me try this out in a couple of days and get back to you.

As you mentioned I thought of having a reliable solution that could solve the issue without any customization, but meanwhile, I'll try your fix to get rid of this awful behavior.

Thanks, Stream team your support is really awesome.