diff --git a/client/src/components/chat/ContactsList.tsx b/client/src/components/chat/ContactsList.tsx index 8063a21..a5e4d85 100644 --- a/client/src/components/chat/ContactsList.tsx +++ b/client/src/components/chat/ContactsList.tsx @@ -44,20 +44,16 @@ function ContactsList({ useEffect(() => { if (!socket) return; - socket.on( - 'added to group', - (msg: { - username: string; - user_id: string; - group_id: string; - isadmin: false; - }) => { - console.log('added to group, fetching contacts'); - console.error(msg); - fetchContacts(); - }, - ); - }, []); + const handleAddedToGroup = () => { + fetchContacts(); + }; + + socket.on('added to group', handleAddedToGroup); + + return () => { + socket?.off('added to group', handleAddedToGroup); + }; + }, [socket]); const fetchContacts = async () => { const contacts: ContactsProps[] = await getContactsList(); diff --git a/client/src/components/chat/ParticipantsBar.tsx b/client/src/components/chat/ParticipantsBar.tsx index ccd9f9a..83264ef 100644 --- a/client/src/components/chat/ParticipantsBar.tsx +++ b/client/src/components/chat/ParticipantsBar.tsx @@ -71,50 +71,42 @@ function ParticipantsBar({ useEffect(() => { if (!socket || !contact) return; - socket.on( - 'added to group', - (msg: { - username: string; - user_id: string; - group_id: string; - isadmin: false; - }) => { - const { group_id } = msg; - console.log('Added to group: ', msg); - console.log('Current participants: ', participants); - console.log('CURRENTCONTACT: ', currentContact); - if ( - msg.group_id == currentContact?.conversation_id && - msg.user_id == user?.user_id - ) { - initializeContact({ - read: true, - username: msg.username, - user_id: msg.user_id, - id: currentContact?.id, - type: 'group', - conversation_id: msg.group_id, - last_active: new Date().toString(), - }); - } + const handleAddedToGroup = (msg: { + username: string; + user_id: string; + group_id: string; + isadmin: false; + }) => { + const { group_id } = msg; + if ( + msg.group_id == currentContact?.conversation_id && + msg.user_id == user?.user_id + ) { + initializeContact({ + read: true, + username: msg.username, + user_id: msg.user_id, + id: currentContact?.id, + type: 'group', + conversation_id: msg.group_id, + last_active: new Date().toString(), + }); + } - if (group_id === contact.conversation_id) { - setParticipants((prevMembers) => { - const existingMember = prevMembers.some( - (m) => m.user_id === msg.user_id, - ); - if (existingMember) { - return prevMembers; - } - return [...prevMembers, msg]; - }); - } - }, - ); + if (group_id === contact.conversation_id) { + setParticipants((prevMembers) => { + const existingMember = prevMembers.some( + (m) => m.user_id === msg.user_id, + ); + if (existingMember) { + return prevMembers; + } + return [...prevMembers, msg]; + }); + } + }; - socket.on('left group', (msg: { user_id: string; group_id: string }) => { - console.log(`(socket on "left group")`, msg); - // Initialize contact again to clear messages and participants list + const handleLeftGroup = (msg: { user_id: string; group_id: string }) => { if ( msg.group_id == currentContact?.conversation_id && msg.user_id == user?.user_id @@ -124,13 +116,16 @@ function ParticipantsBar({ setParticipants((prevMembers) => prevMembers.filter((member) => member.user_id !== msg.user_id), ); - }); + }; + + socket.on('added to group', handleAddedToGroup); + socket.on('left group', handleLeftGroup); return () => { - socket?.off('left group'); - socket?.off('added to group'); + socket?.off('added to group', handleAddedToGroup); + socket?.off('left group', handleLeftGroup); }; - }, [contact, participants]); + }, [socket, contact, currentContact, user?.user_id]); const handleRemoveUser = async (userId: string) => { try {