From a1cb1a30d9ab2acd13bba5272f3a6c8b4c0a1714 Mon Sep 17 00:00:00 2001 From: qvalentin Date: Sat, 1 Apr 2023 17:46:33 +0200 Subject: [PATCH] Refactor event listeners --- .../src/background/jitsi/eventListeners.ts | 6 +++--- .../src/components/jitsi/JitsiEntrypoint.tsx | 12 +++-------- frontend/src/hooks/useBackendData.ts | 20 +++++++++---------- frontend/src/hooks/useConferenceData.ts | 9 ++++++++- frontend/src/hooks/useJitsiEventCapture.tsx | 2 -- frontend/src/hooks/useWebSocketConnection.ts | 8 ++++++-- 6 files changed, 30 insertions(+), 27 deletions(-) diff --git a/frontend/src/background/jitsi/eventListeners.ts b/frontend/src/background/jitsi/eventListeners.ts index 46f42c1..0194efe 100644 --- a/frontend/src/background/jitsi/eventListeners.ts +++ b/frontend/src/background/jitsi/eventListeners.ts @@ -18,14 +18,14 @@ function videoConferenceJoinedListener( setConferenceData(videoConferenceJoinedEvent); } -function displayNameChangeListener( +function displayNameChangeListenerWrapper( setDisplayNameChangedEvent: (newData: DisplayNameChangeEvent) => void, displayNameChangeEvent: DisplayNameChangeEvent ) { setDisplayNameChangedEvent(displayNameChangeEvent); } -function displayNameChangeListenerA( +function displayNameChangeListener( conferenceData: ConferenceData | undefined, setConferenceData: (newData: ConferenceData) => void, displayNameChangeEvent: DisplayNameChangeEvent @@ -44,6 +44,6 @@ function displayNameChangeListenerA( export { videoConferenceJoinedListener, + displayNameChangeListenerWrapper, displayNameChangeListener, - displayNameChangeListenerA, }; diff --git a/frontend/src/components/jitsi/JitsiEntrypoint.tsx b/frontend/src/components/jitsi/JitsiEntrypoint.tsx index f2951a1..a2230d1 100644 --- a/frontend/src/components/jitsi/JitsiEntrypoint.tsx +++ b/frontend/src/components/jitsi/JitsiEntrypoint.tsx @@ -4,12 +4,10 @@ import { UserInfo } from "./types"; import curry from "just-curry-it"; import { ConferenceData, - DisplayNameChangeEvent, displayNameChangeListener, - displayNameChangeListenerA, + displayNameChangeListenerWrapper, videoConferenceJoinedListener, } from "../../background/jitsi/eventListeners"; -import { useCallback } from "react"; import useJitsiEventCapture from "../../hooks/useJitsiEventCapture"; interface Props { @@ -26,13 +24,9 @@ function JitsiEntrypoint({ setConferenceData, }: Props) { const { setDisplayNameChangeEvent } = useJitsiEventCapture( - curry(displayNameChangeListenerA)(conferenceData)(setConferenceData) + curry(displayNameChangeListener)(conferenceData)(setConferenceData) ); - // const displayNameChangeEventListenerCallback = useCallback(() => { - // - // }, [conferenceData, setConferenceData]); - return ( { diff --git a/frontend/src/hooks/useBackendData.ts b/frontend/src/hooks/useBackendData.ts index e348ca8..4befc80 100644 --- a/frontend/src/hooks/useBackendData.ts +++ b/frontend/src/hooks/useBackendData.ts @@ -5,20 +5,20 @@ import useWebSocketConnection from "./useWebSocketConnection"; function useBackendData(userInfo: UserInfo) { console.log("[Rooms] useBackendData"); - const { onMessage, sendMessage } = useWebSocketConnection(userInfo); + const { onMessage, sendMessage, disconnect } = + useWebSocketConnection(userInfo); const { roomData, setRoomData } = useRoomData(); - useEffect( - () => - onMessage((messageString) => { - console.log("[Rooms] message from ws", messageString); - const messageObject = JSON.parse(messageString); + useEffect(() => { + onMessage((messageString) => { + console.log("[Rooms] message from ws", messageString); + const messageObject = JSON.parse(messageString); - !!messageObject.roomsData && setRoomData(messageObject); - }), - [onMessage, setRoomData] - ); + !!messageObject.roomsData && setRoomData(messageObject); + return disconnect; + }); + }, [onMessage, setRoomData, disconnect]); return { roomData, sendMessage }; } diff --git a/frontend/src/hooks/useConferenceData.ts b/frontend/src/hooks/useConferenceData.ts index 867cda6..b4a9370 100644 --- a/frontend/src/hooks/useConferenceData.ts +++ b/frontend/src/hooks/useConferenceData.ts @@ -10,7 +10,14 @@ function useConferenceData( const setConferenceData = (newData: ConferenceData) => { console.log("[Rooms] set conferenceData", conferenceData); - sendMessage(JSON.stringify(newData)); + if (conferenceData?.roomName !== newData.roomName) { + // We joined a meeting + sendMessage(JSON.stringify({ roomName: newData.roomName })); + } + if (conferenceData?.displayName !== newData.displayName) { + // We updated the username + sendMessage(JSON.stringify({ displayName: newData.displayName })); + } setConferenceDataLocal(newData); setUserInfo({ displayName: newData.displayName, email: "" }); }; diff --git a/frontend/src/hooks/useJitsiEventCapture.tsx b/frontend/src/hooks/useJitsiEventCapture.tsx index eaf4417..4d97248 100644 --- a/frontend/src/hooks/useJitsiEventCapture.tsx +++ b/frontend/src/hooks/useJitsiEventCapture.tsx @@ -4,8 +4,6 @@ import { DisplayNameChangeEvent } from "../background/jitsi/eventListeners"; function useJitsiEventCapture(displayNameChangeHandler: Function) { const [displayNameChangeEvent, setDisplayNameChangeEventLocal] = useState(); - // const [displayNameChangeHandler, setDisplayNameChangeHandler] = - // useState(); const setDisplayNameChangeEvent = useCallback( (newValue: DisplayNameChangeEvent) => { diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts index 6e13725..0e21a1b 100644 --- a/frontend/src/hooks/useWebSocketConnection.ts +++ b/frontend/src/hooks/useWebSocketConnection.ts @@ -6,7 +6,7 @@ const createWebSocketConnection = (userInfo: UserInfo) => { const webSocket = new WebSocket(WEBSOCKET_URL); console.log("[Rooms] createWebSocketConnection"); webSocket.addEventListener("open", (_: Event) => - webSocket.send(JSON.stringify(userInfo.displayName)) + webSocket.send(JSON.stringify(userInfo)) ); return webSocket; @@ -40,7 +40,11 @@ function useWebSocketConnection(userInfo: UserInfo) { [webSocketConnection] ); - return { onMessage, sendMessage }; + const disconnect = useCallback(webSocketConnection.close, [ + webSocketConnection, + ]); + + return { onMessage, sendMessage, disconnect }; } export default useWebSocketConnection;