breaking changes: move from writing from scratch api gateway to the n…

…ginx (im actually confused writing wrtc proxy from scratch)
elskow · Oct 20, 2024 · cad4343 · cad4343
1 parent 1792e51
commit cad4343
Show file tree

Hide file tree

Showing 12 changed files with 362 additions and 613 deletions.
diff --git a/client-cp/src/handler/useEditorPeer.ts b/client-cp/src/handler/useEditorPeer.ts
@@ -1,18 +1,18 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from "react";
 
 const useEditorPeer = (url: string, roomId: string) => {
   const [ws, setWs] = useState<WebSocket | null>(null);
-  const [code, setCode] = useState('// Start coding...');
-  const [language, setLanguage] = useState('javascript');
+  const [code, setCode] = useState("// Start coding...");
+  const [language, setLanguage] = useState("javascript");
   const prevCodeRef = useRef(code);
 
   useEffect(() => {
-    const socket = new WebSocket(`${url}/ws/${roomId}`);
+    const socket = new WebSocket(`${url}/${roomId}`);
     setWs(socket);
 
     socket.onmessage = (event) => {
       const message = JSON.parse(event.data);
-      if (message.type === 'code') {
+      if (message.type === "code") {
         setCode(message.code);
         setLanguage(message.language);
       }
@@ -28,34 +28,45 @@ const useEditorPeer = (url: string, roomId: string) => {
     };
   }, [url, roomId]);
 
-  const sendUpdate = useCallback((newCode: string, newLanguage: string) => {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({
-        type: 'code',
-        code: newCode,
-        language: newLanguage,
-        roomId: roomId
-      }));
-    }
-  }, [ws, roomId]);
-
-  const handleEditorChange = useCallback((value: string | undefined) => {
-    if (value !== undefined) {
-      setCode(value);
-      if (value !== prevCodeRef.current) {
-        sendUpdate(value, language);
-        prevCodeRef.current = value;
+  const sendUpdate = useCallback(
+    (newCode: string, newLanguage: string) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(
+          JSON.stringify({
+            type: "code",
+            code: newCode,
+            language: newLanguage,
+            roomId: roomId,
+          }),
+        );
       }
-    }
-  }, [language, sendUpdate]);
+    },
+    [ws, roomId],
+  );
 
-  const handleLanguageChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newLanguage = event.target.value;
-    setLanguage(newLanguage);
-    sendUpdate(code, newLanguage);
-  }, [code, sendUpdate]);
+  const handleEditorChange = useCallback(
+    (value: string | undefined) => {
+      if (value !== undefined) {
+        setCode(value);
+        if (value !== prevCodeRef.current) {
+          sendUpdate(value, language);
+          prevCodeRef.current = value;
+        }
+      }
+    },
+    [language, sendUpdate],
+  );
+
+  const handleLanguageChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const newLanguage = event.target.value;
+      setLanguage(newLanguage);
+      sendUpdate(code, newLanguage);
+    },
+    [code, sendUpdate],
+  );
 
   return { code, language, handleEditorChange, handleLanguageChange };
 };
 
-export default useEditorPeer;
+export default useEditorPeer;