[react] useEchoPresence "auto leave" breaks when we use here, joining and leaving. #450
Description
Echo Version
2.2.0
Laravel Version
12
PHP Version
8.4
NPM Version
10.9.3
Database Driver & Version
No response
Description
We try to implement a full functional chat:
we want to use:
- whisper
- here
- joining
- leaving
to track the active/online users of a channel.
const channelId = usePage().props.channelId;
const { channel } = useEchoPresence(
'message.' + channelId,
'MessageCreated',
(e) => {
console.log('message');
},
[channelId],
);
channel()
.here((members) => {
console.log(
'following members are here:',
members.reduce((accumulator, currentValue) => accumulator + currentValue.id + ' ', ''),
);
console.log('here');
})
.joining((member) => {
console.log('member joined: ', member.id);
})
.leaving((member) => {
console.log('member left: ', member.id);
})
.error((error) => {
console.error(error);
});we cannot figure out how to store members int he here callback to react state and update that state in joining an leaving.
All attempts until now break the ability of auto-leave a presence channel when the channelId changes.
Steps To Reproduce
This repo reproduces our issue:
https://github.com/anotherfrontendguy/reverb-test
- chat.tsx is working fine
- chat-broken.tsx breaks the leaving of a channel
cp .env.example .env
touch database/database.sqlite
key:generate
install reverb
migrate
composer run dev
Create two different users
In the sidebar:
One user joins the channel and the other follows:
- Chat 1
- Chat 2
- Chat Broken 1 (when you leave this channel for broken 2, you wont leave the channel)
- Chat Broken 2