fix: only one socket connection via socketcontext

frontend/context/SocketContext.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+interface SocketContextType {
+  socket: Socket | null;
+  setUserAndSandboxId: (userId: string, sandboxId: string) => void;
+}
+
+const SocketContext = createContext<SocketContextType | undefined>(undefined);
+
+export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [sandboxId, setSandboxId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (userId && sandboxId) {
+      console.log("Initializing socket connection...");
+      const newSocket = io(`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`);
+      console.log("Socket instance:", newSocket);
+      setSocket(newSocket);
+
+      newSocket.on('connect', () => {
+        console.log("Socket connected:", newSocket.id);
+      });
+
+      newSocket.on('disconnect', () => {
+        console.log("Socket disconnected");
+      });
+
+      return () => {
+        console.log("Disconnecting socket...");
+        newSocket.disconnect();
+      };
+    }
+  }, [userId, sandboxId]);
+
+  const setUserAndSandboxId = (newUserId: string, newSandboxId: string) => {
+    setUserId(newUserId);
+    setSandboxId(newSandboxId);
+  };
+
+  const value = {
+    socket,
+    setUserAndSandboxId,
+  };
+
+  return (
+    <SocketContext.Provider value={ value }>
+      {children}
+    </SocketContext.Provider>
+  );
+};
+
+export const useSocket = (): SocketContextType => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error('useSocket must be used within a SocketProvider');
+  }
+  return context;
+};

frontend/context/TerminalContext.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { io, Socket } from 'socket.io-client';
+import React, { createContext, useContext, useState } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal';
+import { useSocket } from '@/context/SocketContext';
 
 interface TerminalContextType {
-  socket: Socket | null;
   terminals: { id: string; terminal: Terminal | null }[];
   setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
   activeTerminalId: string;
@@ -15,41 +14,16 @@ interface TerminalContextType {
   setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
   createNewTerminal: (command?: string) => Promise<void>;
   closeTerminal: (id: string) => void;
-  setUserAndSandboxId: (userId: string, sandboxId: string) => void;
   deploy: (callback: () => void) => void;
 }
 
 const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
 
 export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [socket, setSocket] = useState<Socket | null>(null);
+  const { socket } = useSocket();
   const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
   const [activeTerminalId, setActiveTerminalId] = useState<string>('');
   const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false);
-  const [userId, setUserId] = useState<string | null>(null);
-  const [sandboxId, setSandboxId] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (userId && sandboxId) {
-      console.log("Initializing socket connection...");
-      const newSocket = io(`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`);
-      console.log("Socket instance:", newSocket);
-      setSocket(newSocket);
-
-      newSocket.on('connect', () => {
-        console.log("Socket connected:", newSocket.id);
-      });
-
-      newSocket.on('disconnect', () => {
-        console.log("Socket disconnected");
-      });
-
-      return () => {
-        console.log("Disconnecting socket...");
-        newSocket.disconnect();
-      };
-    }
-  }, [userId, sandboxId]);
 
   const createNewTerminal = async (command?: string): Promise<void> => {
     if (!socket) return;
@@ -85,11 +59,6 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     }
   };
 
-  const setUserAndSandboxId = (newUserId: string, newSandboxId: string) => {
-    setUserId(newUserId);
-    setSandboxId(newSandboxId);
-  };
-
   const deploy = (callback: () => void) => {
     if (!socket) console.error("Couldn't deploy: No socket");
     console.log("Deploying...")
@@ -99,7 +68,6 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   }
 
   const value = {
-    socket,
     terminals,
     setTerminals,
     activeTerminalId,
@@ -108,7 +76,6 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     setCreatingTerminal,
     createNewTerminal,
     closeTerminal,
-    setUserAndSandboxId,
     deploy
   };