diff --git a/packages/auth/src/RocketChatAuth.ts b/packages/auth/src/RocketChatAuth.ts index 0f2c55f196..94c901925f 100644 --- a/packages/auth/src/RocketChatAuth.ts +++ b/packages/auth/src/RocketChatAuth.ts @@ -36,7 +36,9 @@ class RocketChatAuth { async onAuthChange(callback: (user: object | null) => void) { this.authListeners.push(callback); const user = await this.getCurrentUser(); - callback(user); + if (this.authListeners.includes(callback)) { + callback(user); + } } async removeAuthListener(callback: (user: object | null) => void) { diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js index 34f5c8bf40..d4c7ee8a8d 100644 --- a/packages/react/src/views/ChatBody/ChatBody.js +++ b/packages/react/src/views/ChatBody/ChatBody.js @@ -146,16 +146,18 @@ const ChatBody = ({ ); useEffect(() => { - RCInstance.auth.onAuthChange((user) => { + const onAuthChange = (user) => { if (user) { RCInstance.addMessageListener(addMessage); RCInstance.addMessageDeleteListener(removeMessage); RCInstance.addActionTriggeredListener(onActionTriggerResponse); RCInstance.addUiInteractionListener(onActionTriggerResponse); } - }); + }; + RCInstance.auth.onAuthChange(onAuthChange); return () => { + RCInstance.auth.removeAuthListener(onAuthChange); RCInstance.removeMessageListener(addMessage); RCInstance.removeMessageDeleteListener(removeMessage); RCInstance.removeActionTriggeredListener(onActionTriggerResponse); @@ -164,25 +166,35 @@ const ChatBody = ({ }, [RCInstance, addMessage, removeMessage, onActionTriggerResponse]); useEffect(() => { - RCInstance.auth.onAuthChange((user) => { + const onAuthChange = (user) => { if (user) { getMessagesAndRoles(); setHasMoreMessages(true); } else { getMessagesAndRoles(anonymousMode); } - }); + }; + RCInstance.auth.onAuthChange(onAuthChange); + + return () => { + RCInstance.auth.removeAuthListener(onAuthChange); + }; }, [RCInstance, anonymousMode, getMessagesAndRoles]); useEffect(() => { - RCInstance.auth.onAuthChange((user) => { + const onAuthChange = (user) => { if (user) { fetchAndSetPermissions(); } else { permissionsRef.current = null; } - }); - }, []); + }; + RCInstance.auth.onAuthChange(onAuthChange); + + return () => { + RCInstance.auth.removeAuthListener(onAuthChange); + }; + }, [RCInstance, fetchAndSetPermissions, permissionsRef]); // Expose clearUnreadDivider function via ref for ChatInput to call useEffect(() => { diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index e753b689ae..5a8ec4b505 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -144,7 +144,7 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => { ); useEffect(() => { - RCInstance.auth.onAuthChange((user) => { + const onAuthChange = (user) => { if (user) { RCInstance.getCommandsList() .then((data) => setCommands(data.commands || [])) @@ -156,7 +156,12 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => { ) .catch(console.error); } - }); + }; + RCInstance.auth.onAuthChange(onAuthChange); + + return () => { + RCInstance.auth.removeAuthListener(onAuthChange); + }; }, [RCInstance, isChannelPrivate, setMembersHandler]); useEffect(() => { @@ -545,8 +550,8 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => { editMessage.msg || editMessage.attachments ? 'Editing Message' : isChannelReadOnly - ? 'This room is read only' - : undefined + ? 'This room is read only' + : undefined } iconName={ editMessage.msg || editMessage.attachments ? 'edit' : undefined @@ -611,8 +616,8 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => { ? isChannelArchived ? 'Room archived' : canSendMsg - ? `Message #${channelInfo.name}` - : 'This room is read only' + ? `Message #${channelInfo.name}` + : 'This room is read only' : 'Sign in to chat' } css={css` diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js index f3b94c7b48..70dc3e0914 100644 --- a/packages/react/src/views/EmbeddedChat.js +++ b/packages/react/src/views/EmbeddedChat.js @@ -34,7 +34,7 @@ const EmbeddedChat = (props) => { const { isClosable = false, - setClosableState = () => {}, + setClosableState = () => { }, width = '100%', height = '95vh', host = 'http://localhost:3000', @@ -134,7 +134,7 @@ const EmbeddedChat = (props) => { }, [RCInstance, auth, setIsLoginIn]); useEffect(() => { - RCInstance.auth.onAuthChange((user) => { + const onAuthChange = (user) => { if (user) { RCInstance.connect() .then(() => { @@ -151,7 +151,12 @@ const EmbeddedChat = (props) => { } else { setIsUserAuthenticated(false); } - }); + }; + RCInstance.auth.onAuthChange(onAuthChange); + + return () => { + RCInstance.auth.removeAuthListener(onAuthChange); + }; }, [ RCInstance, setAuthenticatedName,