Refactor event listeners

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,
 };

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 (
         <JitsiMeeting
             domain={JITSI_DOMAIN}
@@ -53,7 +47,7 @@ function JitsiEntrypoint({
                 );
                 externalApi.addEventListener(
                     "displayNameChange",
-                    curry(displayNameChangeListener)(setDisplayNameChangeEvent)
+                    curry(displayNameChangeListenerWrapper)(setDisplayNameChangeEvent)
                 );
             }}
             getIFrameRef={(iframeRef) => {

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(
+  useEffect(() => {
-    () =>
+    onMessage((messageString) => {
-      onMessage((messageString) => {
+      console.log("[Rooms] message from ws", messageString);
-        console.log("[Rooms] message from ws", messageString);
+      const messageObject = JSON.parse(messageString);
-        const messageObject = JSON.parse(messageString);
 
-        !!messageObject.roomsData && setRoomData(messageObject);
+      !!messageObject.roomsData && setRoomData(messageObject);
-      }),
+      return disconnect;
-    [onMessage, setRoomData]
+    });
-  );
+  }, [onMessage, setRoomData, disconnect]);
 
   return { roomData, sendMessage };
 }

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: "" });
   };

frontend/src/hooks/useJitsiEventCapture.tsx

@@ -4,8 +4,6 @@ import { DisplayNameChangeEvent } from "../background/jitsi/eventListeners";
 function useJitsiEventCapture(displayNameChangeHandler: Function) {
   const [displayNameChangeEvent, setDisplayNameChangeEventLocal] =
     useState<DisplayNameChangeEvent>();
-  // const [displayNameChangeHandler, setDisplayNameChangeHandler] =
-  //   useState<Function>();
 
   const setDisplayNameChangeEvent = useCallback(
     (newValue: DisplayNameChangeEvent) => {

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;