chore: start to dev

backend/server/src/index.ts

@@ -143,8 +143,6 @@ io.on("connection", async (socket) => {
       isOwner: boolean;
     };
 
-    console.log("user:",data)
-
     if (data.isOwner) {
       isOwnerConnected = true;
       connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
@@ -185,7 +183,6 @@ io.on("connection", async (socket) => {
     fixPermissions();
 
     socket.emit("loaded", sandboxFiles.files);
-    console.log("files got", sandboxFiles.files)
 
     socket.on("getFile", (fileId: string, callback) => {
       console.log(fileId);

frontend/app/layout.tsx

@@ -7,8 +7,7 @@ import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
 import { TerminalProvider } from '@/context/TerminalContext';
-import { PreviewProvider } from "@/context/PreviewContext";
-import { SocketProvider } from '@/context/SocketContext'
+import { PreviewProvider } from "@/context/PreviewContext"
 
 export const metadata: Metadata = {
   title: "Sandbox",
@@ -16,7 +15,7 @@ export const metadata: Metadata = {
 }
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
@@ -30,13 +29,11 @@ export default function RootLayout({
             forcedTheme="dark"
             disableTransitionOnChange
           >
-            <SocketProvider>
             <PreviewProvider>
             <TerminalProvider>
             {children}
             </TerminalProvider>
             </PreviewProvider>
-            </SocketProvider>
             <Analytics />
             <Toaster position="bottom-left" richColors />
           </ThemeProvider>

frontend/components/dashboard/index.tsx

@@ -50,9 +50,9 @@ export default function Dashboard({
   const router = useRouter()
 
   useEffect(() => {
-    // if (!sandboxes) {
-      router.refresh() // fix: update the dashboard to show the new project
-    // }
+    if (!sandboxes) {
+      router.refresh()
+    }
   }, [sandboxes])
 
   return (

frontend/components/editor/index.tsx

@@ -3,6 +3,7 @@
 import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
 import monaco from "monaco-editor"
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
+import { Socket, io } from "socket.io-client"
 import { toast } from "sonner"
 import { useClerk } from "@clerk/nextjs"
 
@@ -31,7 +32,7 @@ import PreviewWindow from "./preview"
 import Terminals from "./terminals"
 import { ImperativePanelHandle } from "react-resizable-panels"
 import { PreviewProvider, usePreview } from '@/context/PreviewContext';
-import { useSocket } from "@/context/SocketContext"
+import { useTerminal } from '@/context/TerminalContext'; 
 
 export default function CodeEditor({
   userData,
@@ -40,22 +41,24 @@ export default function CodeEditor({
   userData: User
   sandboxData: Sandbox
 }) {
+  const socketRef = useRef<Socket | null>(null);
 
-  //SocketContext functions and effects
-  const { socket, setUserAndSandboxId } = useSocket();
+  // Initialize socket connection if it doesn't exist
+  if (!socketRef.current) {
+    socketRef.current = io(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+      {
+        timeout: 2000,
+      }
+    );
+  }
+
+  //Terminalcontext functionsand effects
+  const { setUserAndSandboxId } = useTerminal();
 
   useEffect(() => {
-    console.log('Effect triggered:', { socket, userData, sandboxData });
-    // Ensure userData.id and sandboxData.id are available before attempting to connect
-    if (userData.id && sandboxData.id) {
-      // Check if the socket is not initialized or not connected
-      if (!socket || (socket && !socket.connected)) {
-        // Initialize socket connection
-        console.log('Initializing socket...');
-        setUserAndSandboxId(userData.id, sandboxData.id);
-      }
-    }
-  }, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
+    setUserAndSandboxId(userData.id, sandboxData.id);
+  }, [userData.id, sandboxData.id, setUserAndSandboxId]);
 
   //Preview Button state
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
@@ -330,9 +333,9 @@ export default function CodeEditor({
       );
       console.log(`Saving file...${activeFileId}`);
       console.log(`Saving file...${value}`);
-      socket?.emit("saveFile", activeFileId, value);
+      socketRef.current?.emit("saveFile", activeFileId, value);
     }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
-    [socket]
+    [socketRef]
   );
 
   useEffect(() => {
@@ -429,9 +432,9 @@ export default function CodeEditor({
 
   // Connection/disconnection effect
   useEffect(() => {
-    socket?.connect()
+    socketRef.current?.connect()
     return () => {
-      socket?.disconnect()
+      socketRef.current?.disconnect()
     }
   }, [])
 
@@ -445,7 +448,6 @@ export default function CodeEditor({
 
     const onLoadedEvent = (files: (TFolder | TFile)[]) => {
       setFiles(files)
-      console.log("loaded", files)
     }
 
     const onError = (message: string) => {
@@ -467,25 +469,25 @@ export default function CodeEditor({
         })
     }
 
-    socket?.on("connect", onConnect)
-    socket?.on("disconnect", onDisconnect)
-    socket?.on("loaded", onLoadedEvent)
-    socket?.on("error", onError)
-    socket?.on("terminalResponse", onTerminalResponse)
-    socket?.on("disableAccess", onDisableAccess)
-    socket?.on("previewURL", loadPreviewURL)
+    socketRef.current?.on("connect", onConnect)
+    socketRef.current?.on("disconnect", onDisconnect)
+    socketRef.current?.on("loaded", onLoadedEvent)
+    socketRef.current?.on("error", onError)
+    socketRef.current?.on("terminalResponse", onTerminalResponse)
+    socketRef.current?.on("disableAccess", onDisableAccess)
+    socketRef.current?.on("previewURL", loadPreviewURL)
 
     return () => {
-      socket?.off("connect", onConnect)
-      socket?.off("disconnect", onDisconnect)
-      socket?.off("loaded", onLoadedEvent)
-      socket?.off("error", onError)
-      socket?.off("terminalResponse", onTerminalResponse)
-      socket?.off("disableAccess", onDisableAccess)
-      socket?.off("previewURL", loadPreviewURL)
+      socketRef.current?.off("connect", onConnect)
+      socketRef.current?.off("disconnect", onDisconnect)
+      socketRef.current?.off("loaded", onLoadedEvent)
+      socketRef.current?.off("error", onError)
+      socketRef.current?.off("terminalResponse", onTerminalResponse)
+      socketRef.current?.off("disableAccess", onDisableAccess)
+      socketRef.current?.off("previewURL", loadPreviewURL)
     }
     // }, []);
-  }, [socket, terminals, setTerminals, setFiles, toast, setDisableAccess, isOwner, loadPreviewURL]);
+  }, [terminals])
 
   // Helper functions for tabs:
 
@@ -497,7 +499,7 @@ export default function CodeEditor({
   // Debounced function to get file content
   const debouncedGetFile = useCallback(
     debounce((tabId, callback) => {
-      socket?.emit('getFile', tabId, callback);
+      socketRef.current?.emit('getFile', tabId, callback);
     }, 300), // 300ms debounce delay, adjust as needed
     []
   );
@@ -601,7 +603,7 @@ export default function CodeEditor({
       return false
     }
 
-    socket?.emit("renameFile", id, newName)
+    socketRef.current?.emit("renameFile", id, newName)
     setTabs((prev) =>
       prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
     )
@@ -610,7 +612,7 @@ export default function CodeEditor({
   }
 
   const handleDeleteFile = (file: TFile) => {
-    socket?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
+    socketRef.current?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
       setFiles(response)
     })
     closeTab(file.id)
@@ -620,11 +622,11 @@ export default function CodeEditor({
     setDeletingFolderId(folder.id)
     console.log("deleting folder", folder.id)
 
-    socket?.emit("getFolder", folder.id, (response: string[]) =>
+    socketRef.current?.emit("getFolder", folder.id, (response: string[]) =>
       closeTabs(response)
     )
 
-    socket?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
+    socketRef.current?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
       setFiles(response)
       setDeletingFolderId("")
     })
@@ -652,7 +654,7 @@ export default function CodeEditor({
           {generate.show && ai ? (
             <GenerateInput
               user={userData}
-              socket={socket!}
+              socket={socketRef.current}
               width={generate.width - 90}
               data={{
                 fileName: tabs.find((t) => t.id === activeFileId)?.name ?? "",
@@ -712,7 +714,7 @@ export default function CodeEditor({
           handleRename={handleRename}
           handleDeleteFile={handleDeleteFile}
           handleDeleteFolder={handleDeleteFolder}
-          socket={socket!}
+          socket={socketRef.current}
           setFiles={setFiles}
           addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
           deletingFolderId={deletingFolderId}
@@ -830,7 +832,7 @@ export default function CodeEditor({
                   open={() => {
                     usePreview().previewPanelRef.current?.expand()
                     setIsPreviewCollapsed(false)
-                  }} collapsed={isPreviewCollapsed} src={previewURL} ref={previewWindowRef} />
+                  } } collapsed={isPreviewCollapsed} src={previewURL} ref={previewWindowRef} />
               </ResizablePanel>
               <ResizableHandle />
               <ResizablePanel

frontend/components/editor/terminals/index.tsx

@@ -8,15 +8,12 @@ import { toast } from "sonner";
 import EditorTerminal from "./terminal";
 import { useTerminal } from "@/context/TerminalContext";
 import { useEffect } from "react";
-import { useSocket } from "@/context/SocketContext"
 
 export default function Terminals() {
-
-  const { socket } = useSocket();
-
   const {
     terminals,
     setTerminals,
+    socket,
     createNewTerminal,
     closeTerminal,
     activeTerminalId,

frontend/context/SocketContext.tsx

@@ -1,63 +0,0 @@
-"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,11 +1,12 @@
 "use client";
 
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { io, Socket } from 'socket.io-client';
 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;
@@ -14,16 +15,41 @@ 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 } = useSocket();
+  const [socket, setSocket] = useState<Socket | null>(null);
   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;
@@ -59,6 +85,11 @@ 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...")
@@ -68,6 +99,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   }
 
   const value = {
+    socket,
     terminals,
     setTerminals,
     activeTerminalId,
@@ -76,6 +108,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     setCreatingTerminal,
     createNewTerminal,
     closeTerminal,
+    setUserAndSandboxId,
     deploy
   };