+
+
No room
+ {props.usersData.usersWithOutRoom.map((username) => (
+
{username}
+ ))}
+
+
+ {props.usersData.roomsData.map((roomData) => {
+ return (
+ <>
+
{roomData.roomName}
+ {roomData.participants.map((participant) => (
+
{participant.displayName}
+ ))}
+
+ );
+ })}
+
diff --git a/frontend/src/hooks/useBackendData.ts b/frontend/src/hooks/useBackendData.ts
index ffd0640..e348ca8 100644
--- a/frontend/src/hooks/useBackendData.ts
+++ b/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;
diff --git a/frontend/src/hooks/useConferenceData.ts b/frontend/src/hooks/useConferenceData.ts
new file mode 100644
index 0000000..aeb1cec
--- /dev/null
+++ b/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
();
+
+ 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;
diff --git a/frontend/src/hooks/useLocalUser.ts b/frontend/src/hooks/useLocalUser.ts
new file mode 100644
index 0000000..63cb14d
--- /dev/null
+++ b/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(() =>
+ 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;
diff --git a/frontend/src/hooks/useRoomData.ts b/frontend/src/hooks/useRoomData.ts
index e69de29..2709b93 100644
--- a/frontend/src/hooks/useRoomData.ts
+++ b/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();
+
+ return { roomData, setRoomData };
+}
+
+export default useRoomData;
diff --git a/frontend/src/hooks/useRoomName.ts b/frontend/src/hooks/useRoomName.ts
index 48f030a..2e352d9 100644
--- a/frontend/src/hooks/useRoomName.ts
+++ b/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 };
}
diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts
index 57f3811..6e13725 100644
--- a/frontend/src/hooks/useWebSocketConnection.ts
+++ b/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(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(() =>
+ 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) => { messageHandler(ev.data) }
- webSocketConnection.addEventListener('message', wsMessageHandler)
+ const wsMessageHandler = (ev: MessageEvent) => {
+ messageHandler(ev.data);
+ };
+ webSocketConnection.addEventListener("message", wsMessageHandler);
},
[webSocketConnection]
- )
+ );
- return { onMessage, sendMessage }
+ return { onMessage, sendMessage };
}
export default useWebSocketConnection;
-
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 43b95f8..08008e3 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -558,6 +558,11 @@ json5@^2.2.2:
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+just-curry-it@^5.3.0:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/just-curry-it/-/just-curry-it-5.3.0.tgz#1463602e932c5beb431a2a384dddcd48bb3c9c42"
+ integrity sha512-silMIRiFjUWlfaDhkgSzpuAyQ6EX/o09Eu8ZBfmFwQMbax7+LQzeIU2CBrICT6Ne4l86ITCGvUCBpCubWYy0Yw==
+
loose-envify@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"