From 8c82cd81bdb3e650d66aef731101cf5ee2448b63 Mon Sep 17 00:00:00 2001
From: qvalentin <valentin.theodor@web.de>
Date: Wed, 9 Aug 2023 16:54:04 +0200
Subject: [PATCH] Revert "Revert "Use jotai for websocket""

This reverts commit 66d70cbfe49d746da1b5d2a34b10408e8a6edf9e.
---
 frontend/src/hooks/useRoomName.ts            |  2 +-
 frontend/src/hooks/useWebSocketConnection.ts | 23 +++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/hooks/useRoomName.ts b/frontend/src/hooks/useRoomName.ts
index 1cf2422..14e3c1f 100644
--- a/frontend/src/hooks/useRoomName.ts
+++ b/frontend/src/hooks/useRoomName.ts
@@ -1,5 +1,5 @@
 import { atom, useAtom } from 'jotai'
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 
 const roomNameAtom = atom(getRoomNameFromUrl())
 
diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts
index 3fbb7bb..33ba89c 100644
--- a/frontend/src/hooks/useWebSocketConnection.ts
+++ b/frontend/src/hooks/useWebSocketConnection.ts
@@ -1,19 +1,19 @@
-import { useCallback, useState } from 'react'
+import { atom, useAtom } from 'jotai'
+import { useCallback, useEffect } from 'react'
 import { WEBSOCKET_URL } from '../background/constants'
 import { UserInfo } from '../components/jitsi/types'
 
-const createWebSocketConnection = (userInfo: UserInfo) => {
-  const webSocket = new WebSocket(WEBSOCKET_URL)
-  console.log('[Rooms] createWebSocketConnection')
-  webSocket.addEventListener('open', (_: Event) => webSocket.send(JSON.stringify(userInfo)))
 
-  return webSocket
-}
+const webSocket = new WebSocket(WEBSOCKET_URL)
+const webSocketConnectionAtom = atom(webSocket)
 
 function useWebSocketConnection(userInfo: UserInfo) {
   console.log('[Rooms] useWebSocketConnection')
 
-  const [webSocketConnection] = useState<WebSocket>(() => createWebSocketConnection(userInfo))
+  const [webSocketConnection] = useAtom(webSocketConnectionAtom)
+  useEffect(() => {
+    sendMessageNowOrLater(webSocketConnection, JSON.stringify(userInfo))
+  }, [webSocketConnection, userInfo]);
 
   const sendMessage = useCallback(
     (message: string) => {
@@ -45,4 +45,11 @@ function useWebSocketConnection(userInfo: UserInfo) {
   return { onMessage, cleanUpOnMessage, sendMessage, disconnect }
 }
 
+const sendMessageNowOrLater = (webSocket: WebSocket, message: string) => {
+  if (webSocket.readyState !== WebSocket.OPEN) {
+    return webSocket.addEventListener('open', (_: Event) => webSocket.send(message))
+  }
+  webSocket.send(message)
+}
+
 export default useWebSocketConnection