From 279d7ea50290403b76640ce67ef27e237d0d8d8b Mon Sep 17 00:00:00 2001
From: qvalentin <valentin.theodor@web.de>
Date: Sat, 21 Jan 2023 11:18:41 +0100
Subject: [PATCH] Start with websocket backend connection

---
 frontend/src/background/constants.ts         |  3 +-
 frontend/src/hooks/useBackendData.ts         | 20 ++++++++++++
 frontend/src/hooks/useRoomData.ts            |  0
 frontend/src/hooks/useWebSocketConnection.ts | 34 ++++++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/hooks/useBackendData.ts
 create mode 100644 frontend/src/hooks/useRoomData.ts
 create mode 100644 frontend/src/hooks/useWebSocketConnection.ts

diff --git a/frontend/src/background/constants.ts b/frontend/src/background/constants.ts
index 34ed72d..30ea1c9 100644
--- a/frontend/src/background/constants.ts
+++ b/frontend/src/background/constants.ts
@@ -1,3 +1,4 @@
 const JITSI_DOMAIN = "thisisnotajitsi.filefighter.de";
+const WEBSOCKET_URL = "ws" + (window.location.protocol == "https:" ? "s" : "") + "://" + window.location.host + "/ws"
 
-export { JITSI_DOMAIN };
+export { JITSI_DOMAIN, WEBSOCKET_URL };
diff --git a/frontend/src/hooks/useBackendData.ts b/frontend/src/hooks/useBackendData.ts
new file mode 100644
index 0000000..ffd0640
--- /dev/null
+++ b/frontend/src/hooks/useBackendData.ts
@@ -0,0 +1,20 @@
+import useWebSocketConnection from "./useWebSocketConnection";
+
+function useBackendData() {
+
+  const { onMessage, sendMessage } = useWebSocketConnection();
+
+  const { roomData, setRoomData } = useRoomData()
+
+
+  onMessage(
+    (messageString) => {
+      const messageObject = JSON.parse(messageString)
+
+      !!messageObject.roomData && setRoomData(messageObject.roomData)
+
+    }
+  )
+
+
+}
diff --git a/frontend/src/hooks/useRoomData.ts b/frontend/src/hooks/useRoomData.ts
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts
new file mode 100644
index 0000000..57f3811
--- /dev/null
+++ b/frontend/src/hooks/useWebSocketConnection.ts
@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { WEBSOCKET_URL } from "../background/constants";
+
+function useWebSocketConnection() {
+
+  const createWebSocketConnection = () => {
+    const webSocket = new WebSocket(WEBSOCKET_URL);
+    return webSocket
+  }
+
+  const [webSocketConnection] = useState<WebSocket>(createWebSocketConnection())
+
+  const sendMessage = useCallback((message: string) => {
+    //if the socket's open, send a message:
+    if (webSocketConnection.readyState === WebSocket.OPEN) {
+      webSocketConnection.send(message);
+    }
+  },
+    [webSocketConnection]
+  )
+
+  const onMessage = useCallback(
+    (messageHandler: (messageHandler: string) => void) => {
+      const wsMessageHandler = (ev: MessageEvent<any>) => { messageHandler(ev.data) }
+      webSocketConnection.addEventListener('message', wsMessageHandler)
+    },
+    [webSocketConnection]
+  )
+
+  return { onMessage, sendMessage }
+}
+
+export default useWebSocketConnection;
+