Fix double chat messages with useEffect cleanup

frontend/src/hooks/useBackendData.ts

@@ -7,20 +7,22 @@ import useWebSocketConnection from './useWebSocketConnection'
 function useBackendData(userInfo: UserInfo) {
   console.log('[Rooms] useBackendData')
 
-  const { onMessage, sendMessage, disconnect } = useWebSocketConnection(userInfo)
+  const { onMessage, cleanUpOnMessage, sendMessage, disconnect } = useWebSocketConnection(userInfo)
   const { roomData, setRoomData } = useRoomData()
   const { addChatMessage } = useAllChat()
 
   useEffect(() => {
     console.log('[Rooms] add onMessage Listener')
-    onMessage((messageString) => {
+    const messageCallback = (messageString: string) => {
       console.log('[Rooms] message from ws', messageString)
       const messageObject = JSON.parse(messageString)
 
       !!messageObject.roomsData && setRoomData(messageObject)
       !!messageObject.content && addChatMessage(messageObject)
       return disconnect
-    })
+    }
+    onMessage(messageCallback)
+    return () => cleanUpOnMessage(messageCallback)
   }, [])
 
   return { roomData, sendMessage }

frontend/src/hooks/useWebSocketConnection.ts

@@ -37,8 +37,12 @@ function useWebSocketConnection(userInfo: UserInfo) {
   )
 
   const disconnect = useCallback(webSocketConnection.close, [webSocketConnection])
+  const cleanUpOnMessage = useCallback((callbackToRemove: any) => {
+    console.log('[Rooms] cleanUpOnMessage')
+    webSocketConnection.removeEventListener('message', callbackToRemove)
+  }, [webSocketConnection])
 
-  return { onMessage, sendMessage, disconnect }
+  return { onMessage, cleanUpOnMessage, sendMessage, disconnect }
 }
 
 export default useWebSocketConnection