Showing rooms works

frontend/src/hooks/useBackendData.ts

@@ -1,20 +1,26 @@
+import { useEffect } from "react";
+import { UserInfo } from "../components/jitsi/types";
+import useRoomData from "./useRoomData";
 import useWebSocketConnection from "./useWebSocketConnection";
 
-function useBackendData() {
+function useBackendData(userInfo: UserInfo) {
+  console.log("[Rooms] useBackendData");
+  const { onMessage, sendMessage } = useWebSocketConnection(userInfo);
 
-  const { onMessage, sendMessage } = useWebSocketConnection();
+  const { roomData, setRoomData } = useRoomData();
 
-  const { roomData, setRoomData } = useRoomData()
-
-
-  onMessage(
-    (messageString) => {
-      const messageObject = JSON.parse(messageString)
-
-      !!messageObject.roomData && setRoomData(messageObject.roomData)
-
-    }
-  )
+  useEffect(
+    () =>
+      onMessage((messageString) => {
+        console.log("[Rooms] message from ws", messageString);
+        const messageObject = JSON.parse(messageString);
 
+        !!messageObject.roomsData && setRoomData(messageObject);
+      }),
+    [onMessage, setRoomData]
+  );
 
+  return { roomData, sendMessage };
 }
+
+export default useBackendData;

frontend/src/hooks/useConferenceData.ts

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { ConferenceData } from "../background/jitsi/eventListeners";
+import { UserInfo } from "../components/jitsi/types";
+
+function useConferenceData(
+  sendMessage: (message: string) => void,
+  setUserInfo: (newData: UserInfo) => void
+) {
+  const [conferenceData, setConferenceDataLocal] = useState<ConferenceData>();
+
+  const setConferenceData = (newData: ConferenceData) => {
+    console.log("[Rooms] set conferenceData");
+    sendMessage(JSON.stringify(newData));
+    setConferenceDataLocal(newData);
+    setUserInfo({ displayName: newData.displayName, email: "" });
+  };
+
+  return { conferenceData, setConferenceData };
+}
+
+export default useConferenceData;

frontend/src/hooks/useLocalUser.ts

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { USER_COOKIE_NAME } from "../background/constants";
+import { getCookie, setCookie } from "../background/cookies";
+import { UserInfo } from "../components/jitsi/types";
+
+function useLocalUser() {
+  const [userInfo, setUserInfoLocal] = useState<UserInfo>(() =>
+    getUserInfoFromCookie()
+  );
+
+  const setUserInfo = (newData: UserInfo) => {
+    storeUserInfoInCookie(newData);
+    setUserInfoLocal(newData);
+  };
+
+  return { userInfo, setUserInfo };
+}
+
+function getUserInfoFromCookie(): UserInfo {
+  let cookie = getCookie(USER_COOKIE_NAME);
+  console.log("[Rooms] getUserNameFromCookie 1", cookie);
+  if (cookie) return JSON.parse(cookie);
+  return {
+    displayName: "unknown traveller",
+    email: "",
+  };
+}
+
+function storeUserInfoInCookie(userInfo: UserInfo) {
+  setCookie(USER_COOKIE_NAME, JSON.stringify(userInfo));
+}
+
+export default useLocalUser;

frontend/src/hooks/useRoomData.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { UsersData } from "../background/types/roomData";
+
+function useRoomData() {
+  const [roomData, setRoomData] = useState<UsersData>();
+
+  return { roomData, setRoomData };
+}
+
+export default useRoomData;

frontend/src/hooks/useRoomName.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
 function useRoomName() {
-  const [roomName, setRoomName] = useState(getRoomNameFromUrl());
+  const [roomName, setRoomName] = useState(() => getRoomNameFromUrl());
 
   const updateRoomName = useCallback(
     (newName: string) => {
@@ -11,13 +11,10 @@ function useRoomName() {
     [setRoomName]
   );
 
-  const submitRoomName = useCallback(
-    () => {
-      setRoomNameInUrl(roomName);
-      setRoomNameInTitle(roomName);
-    },
-    [roomName]
-  );
+  const submitRoomName = useCallback(() => {
+    setRoomNameInUrl(roomName);
+    setRoomNameInTitle(roomName);
+  }, [roomName]);
 
   return { roomName, updateRoomName, submitRoomName };
 }

frontend/src/hooks/useWebSocketConnection.ts

@@ -1,34 +1,46 @@
 import { useCallback, useState } from "react";
 import { WEBSOCKET_URL } from "../background/constants";
+import { UserInfo } from "../components/jitsi/types";
 
-function useWebSocketConnection() {
+const createWebSocketConnection = (userInfo: UserInfo) => {
+  const webSocket = new WebSocket(WEBSOCKET_URL);
+  console.log("[Rooms] createWebSocketConnection");
+  webSocket.addEventListener("open", (_: Event) =>
+    webSocket.send(JSON.stringify(userInfo.displayName))
+  );
 
-  const createWebSocketConnection = () => {
-    const webSocket = new WebSocket(WEBSOCKET_URL);
-    return webSocket
-  }
+  return webSocket;
+};
 
-  const [webSocketConnection] = useState<WebSocket>(createWebSocketConnection())
+function useWebSocketConnection(userInfo: UserInfo) {
+  console.log("[Rooms] useWebSocketConnection");
 
-  const sendMessage = useCallback((message: string) => {
-    //if the socket's open, send a message:
-    if (webSocketConnection.readyState === WebSocket.OPEN) {
-      webSocketConnection.send(message);
-    }
-  },
+  const [webSocketConnection] = useState<WebSocket>(() =>
+    createWebSocketConnection(userInfo)
+  );
+
+  const sendMessage = useCallback(
+    (message: string) => {
+      //if the socket's open, send a message:
+      if (webSocketConnection.readyState === WebSocket.OPEN) {
+        console.log("[Rooms] sending to ws", message);
+        webSocketConnection.send(message);
+      }
+    },
     [webSocketConnection]
-  )
+  );
 
   const onMessage = useCallback(
     (messageHandler: (messageHandler: string) => void) => {
-      const wsMessageHandler = (ev: MessageEvent<any>) => { messageHandler(ev.data) }
-      webSocketConnection.addEventListener('message', wsMessageHandler)
+      const wsMessageHandler = (ev: MessageEvent<any>) => {
+        messageHandler(ev.data);
+      };
+      webSocketConnection.addEventListener("message", wsMessageHandler);
     },
     [webSocketConnection]
-  )
+  );
 
-  return { onMessage, sendMessage }
+  return { onMessage, sendMessage };
 }
 
 export default useWebSocketConnection;
-