Refactor event listeners

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

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;