patch: remove excess code

README.md

@@ -29,9 +29,7 @@ npm run dev
 
 ### Backend
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
-
-You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
+The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker.
 
 #### Socket.io server
 
@@ -183,4 +181,3 @@ It should be in the form `category(scope or module): message` in your commit mes
 - [Express](https://expressjs.com/)
 - [Socket.io](https://socket.io/)
 - [Drizzle ORM](https://orm.drizzle.team/)
-- [E2B](https://e2b.dev/)

backend/database/src/index.ts

@@ -114,12 +114,12 @@ export default {
 				.select()
 				.from(sandbox)
 				.where(eq(sandbox.userId, userId))
-					.all()
+				.all();
 			
 			if (userSandboxes.length >= 8) {
 				return new Response("You reached the maximum # of sandboxes.", {
 					status: 400,
-					})
+				});
 			}
 
 				const sb = await db

backend/database/src/schema.ts

@@ -31,7 +31,7 @@ export const sandbox = sqliteTable("sandbox", {
 	createdAt: integer("createdAt", { mode: "timestamp_ms" }),
 	userId: text("user_id")
 		.notNull()
-		.references(() => user.id),
+		.references(() => user.id, { onDelete: "cascade" }),
 	});
 
 export type Sandbox = typeof sandbox.$inferSelect;

backend/server/.env.example

@@ -5,4 +5,3 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
-E2B_API_KEY=

backend/server/src/index.ts

@@ -49,15 +49,11 @@ const terminals: Record<string, Terminal> = {};
 
 const dirName = "/home/user";
 
-const moveFile = async (
-  filesystem: FilesystemManager,
-  filePath: string,
-  newFilePath: string
-) => {
-  const fileContents = await filesystem.readBytes(filePath);
+const moveFile = async (filesystem: FilesystemManager, filePath: string, newFilePath: string) => {
+  const fileContents = await filesystem.readBytes(filePath)
   await filesystem.writeBytes(newFilePath, fileContents);
   await filesystem.remove(filePath);
-};
+}
 
 io.use(async (socket, next) => {
   const handshakeSchema = z.object({
@@ -113,7 +109,6 @@ io.use(async (socket, next) => {
 const lockManager = new LockManager();
 
 io.on("connection", async (socket) => {
-  try {
   if (inactivityTimeout) clearTimeout(inactivityTimeout);
 
   const data = socket.data as {
@@ -137,14 +132,10 @@ io.on("connection", async (socket) => {
       if (!containers[data.sandboxId]) {
         containers[data.sandboxId] = await Sandbox.create();
         console.log("Created container ", data.sandboxId);
-          io.emit(
-            "previewURL",
-            "https://" + containers[data.sandboxId].getHostname(5173)
-          );
+        io.emit("previewURL", "https://" + containers[data.sandboxId].getHostname(5173));
       }
-      } catch (e: any) {
-        console.error(`Error creating container ${data.sandboxId}:`, e);
-        io.emit("error", `Error: container creation. ${e.message ?? e}`);
+    } catch (error) {
+      console.error("Error creating container ", data.sandboxId, error);
     }
   });
 
@@ -153,14 +144,12 @@ io.on("connection", async (socket) => {
     await containers[data.sandboxId].process.startAndWait(
       `sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"`
     );
-    };
+  }
 
   const sandboxFiles = await getSandboxFiles(data.sandboxId);
   sandboxFiles.fileData.forEach(async (file) => {
     const filePath = path.join(dirName, file.id);
-      await containers[data.sandboxId].filesystem.makeDir(
-        path.dirname(filePath)
-      );
+    await containers[data.sandboxId].filesystem.makeDir(path.dirname(filePath));
     await containers[data.sandboxId].filesystem.write(filePath, file.data);
   });
   fixPermissions();
@@ -168,65 +157,43 @@ io.on("connection", async (socket) => {
   socket.emit("loaded", sandboxFiles.files);
 
   socket.on("getFile", (fileId: string, callback) => {
-      console.log(fileId);
-      try {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId);
     if (!file) return;
 
     callback(file.data);
-      } catch (e: any) {
-        console.error("Error getting file:", e);
-        io.emit("error", `Error: get file. ${e.message ?? e}`);
-      }
   });
 
   socket.on("getFolder", async (folderId: string, callback) => {
-      try {
     const files = await getFolder(folderId);
     callback(files);
-      } catch (e: any) {
-        console.error("Error getting folder:", e);
-        io.emit("error", `Error: get folder. ${e.message ?? e}`);
-      }
   });
 
   // todo: send diffs + debounce for efficiency
   socket.on("saveFile", async (fileId: string, body: string) => {
     try {
+      await saveFileRL.consume(data.userId, 1);
+
       if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
         socket.emit(
-            "error",
-            "Error: file size too large. Please reduce the file size."
+          "rateLimit",
+          "Rate limited: file size too large. Please reduce the file size."
         );
         return;
       }
-        try {
-          await saveFileRL.consume(data.userId, 1);
-          await saveFile(fileId, body);
-        } catch (e) {
-          io.emit("error", "Rate limited: file saving. Please slow down.");
-          return;
-        }
 
       const file = sandboxFiles.fileData.find((f) => f.id === fileId);
       if (!file) return;
       file.data = body;
 
-        await containers[data.sandboxId].filesystem.write(
-          path.join(dirName, file.id),
-          body
-        );
+      await containers[data.sandboxId].filesystem.write(path.join(dirName, file.id), body);
       fixPermissions();
-      } catch (e: any) {
-        console.error("Error saving file:", e);
-        io.emit("error", `Error: file saving. ${e.message ?? e}`);
+      await saveFile(fileId, body);
+    } catch (e) {
+      io.emit("rateLimit", "Rate limited: file saving. Please slow down.");
     }
   });
 
-    socket.on(
-      "moveFile",
-      async (fileId: string, folderId: string, callback) => {
-        try {
+  socket.on("moveFile", async (fileId: string, folderId: string, callback) => {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId);
     if (!file) return;
 
@@ -237,20 +204,16 @@ io.on("connection", async (socket) => {
       containers[data.sandboxId].filesystem,
       path.join(dirName, fileId),
       path.join(dirName, newFileId)
-          );
+    )
     fixPermissions();
 
     file.id = newFileId;
 
     await renameFile(fileId, newFileId, file.data);
     const newFiles = await getSandboxFiles(data.sandboxId);
+
     callback(newFiles.files);
-        } catch (e: any) {
-          console.error("Error moving file:", e);
-          io.emit("error", `Error: file moving. ${e.message ?? e}`);
-        }
-      }
-    );
+  });
 
   socket.on("createFile", async (name: string, callback) => {
     try {
@@ -258,26 +221,17 @@ io.on("connection", async (socket) => {
       // limit is 200mb
       if (size > 200 * 1024 * 1024) {
         io.emit(
-            "error",
+          "rateLimit",
           "Rate limited: project size exceeded. Please delete some files."
         );
         callback({ success: false });
-          return;
       }
 
-        try {
       await createFileRL.consume(data.userId, 1);
-        } catch (e) {
-          io.emit("error", "Rate limited: file creation. Please slow down.");
-          return;
-        }
 
       const id = `projects/${data.sandboxId}/${name}`;
 
-        await containers[data.sandboxId].filesystem.write(
-          path.join(dirName, id),
-          ""
-        );
+      await containers[data.sandboxId].filesystem.write(path.join(dirName, id), "");
       fixPermissions();
 
       sandboxFiles.files.push({
@@ -294,42 +248,28 @@ io.on("connection", async (socket) => {
       await createFile(id);
 
       callback({ success: true });
-      } catch (e: any) {
-        console.error("Error creating file:", e);
-        io.emit("error", `Error: file creation. ${e.message ?? e}`);
+    } catch (e) {
+      io.emit("rateLimit", "Rate limited: file creation. Please slow down.");
     }
   });
 
   socket.on("createFolder", async (name: string, callback) => {
-      try {
     try {
       await createFolderRL.consume(data.userId, 1);
-        } catch (e) {
-          io.emit("error", "Rate limited: folder creation. Please slow down.");
-          return;
-        }
 
       const id = `projects/${data.sandboxId}/${name}`;
 
-        await containers[data.sandboxId].filesystem.makeDir(
-          path.join(dirName, id)
-        );
+      await containers[data.sandboxId].filesystem.makeDir(path.join(dirName, id));
 
       callback();
-      } catch (e: any) {
-        console.error("Error creating folder:", e);
-        io.emit("error", `Error: folder creation. ${e.message ?? e}`);
+    } catch (e) {
+      io.emit("rateLimit", "Rate limited: folder creation. Please slow down.");
     }
   });
 
   socket.on("renameFile", async (fileId: string, newName: string) => {
-      try {
     try {
       await renameFileRL.consume(data.userId, 1);
-        } catch (e) {
-          io.emit("error", "Rate limited: file renaming. Please slow down.");
-          return;
-        }
 
       const file = sandboxFiles.fileData.find((f) => f.id === fileId);
       if (!file) return;
@@ -339,33 +279,27 @@ io.on("connection", async (socket) => {
       const newFileId =
         parts.slice(0, parts.length - 1).join("/") + "/" + newName;
 
+
       await moveFile(
         containers[data.sandboxId].filesystem,
         path.join(dirName, fileId),
         path.join(dirName, newFileId)
-        );
+      )
       fixPermissions();
       await renameFile(fileId, newFileId, file.data);
-      } catch (e: any) {
-        console.error("Error renaming folder:", e);
-        io.emit("error", `Error: folder renaming. ${e.message ?? e}`);
+    } catch (e) {
+      io.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
+      return;
     }
   });
 
   socket.on("deleteFile", async (fileId: string, callback) => {
-      try {
     try {
       await deleteFileRL.consume(data.userId, 1);
-        } catch (e) {
-          io.emit("error", "Rate limited: file deletion. Please slow down.");
-        }
-
       const file = sandboxFiles.fileData.find((f) => f.id === fileId);
       if (!file) return;
 
-        await containers[data.sandboxId].filesystem.remove(
-          path.join(dirName, fileId)
-        );
+      await containers[data.sandboxId].filesystem.remove(path.join(dirName, fileId));
       sandboxFiles.fileData = sandboxFiles.fileData.filter(
         (f) => f.id !== fileId
       );
@@ -374,9 +308,8 @@ io.on("connection", async (socket) => {
 
       const newFiles = await getSandboxFiles(data.sandboxId);
       callback(newFiles.files);
-      } catch (e: any) {
-        console.error("Error deleting file:", e);
-        io.emit("error", `Error: file deletion. ${e.message ?? e}`);
+    } catch (e) {
+      io.emit("rateLimit", "Rate limited: file deletion. Please slow down.");
     }
   });
 
@@ -385,14 +318,11 @@ io.on("connection", async (socket) => {
   // });
 
   socket.on("deleteFolder", async (folderId: string, callback) => {
-      try {
     const files = await getFolder(folderId);
 
     await Promise.all(
       files.map(async (file) => {
-            await containers[data.sandboxId].filesystem.remove(
-              path.join(dirName, file)
-            );
+        await containers[data.sandboxId].filesystem.remove(path.join(dirName, file));
 
         sandboxFiles.fileData = sandboxFiles.fileData.filter(
           (f) => f.id !== file
@@ -405,14 +335,9 @@ io.on("connection", async (socket) => {
     const newFiles = await getSandboxFiles(data.sandboxId);
 
     callback(newFiles.files);
-      } catch (e: any) {
-        console.error("Error deleting folder:", e);
-        io.emit("error", `Error: folder deletion. ${e.message ?? e}`);
-      }
   });
 
   socket.on("createTerminal", async (id: string, callback) => {
-      try {
     if (terminals[id] || Object.keys(terminals).length >= 4) {
       return;
     }
@@ -426,53 +351,36 @@ io.on("connection", async (socket) => {
           size: { cols: 80, rows: 20 },
           onExit: () => console.log("Terminal exited", id),
         });
-            await terminals[id].sendData(
-              `cd "${path.join(dirName, "projects", data.sandboxId)}"\r`
-            );
+        await terminals[id].sendData(`cd "${path.join(dirName, "projects", data.sandboxId)}"\r`)
         await terminals[id].sendData("export PS1='user> '\rclear\r");
         console.log("Created terminal", id);
-          } catch (e: any) {
-            console.error(`Error creating terminal ${id}:`, e);
-            io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
+      } catch (error) {
+        console.error("Error creating terminal ", id, error);
       }
     });
 
     callback();
-      } catch (e: any) {
-        console.error(`Error creating terminal ${id}:`, e);
-        io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
-      }
   });
 
-    socket.on(
-      "resizeTerminal",
-      (dimensions: { cols: number; rows: number }) => {
-        try {
+  socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }) => {
     Object.values(terminals).forEach((t) => {
       t.resize(dimensions);
     });
-        } catch (e: any) {
-          console.error("Error resizing terminal:", e);
-          io.emit("error", `Error: terminal resizing. ${e.message ?? e}`);
-        }
-      }
-    );
+  });
 
   socket.on("terminalData", (id: string, data: string) => {
-      try {
     if (!terminals[id]) {
       return;
     }
 
+    try {
       terminals[id].sendData(data);
-      } catch (e: any) {
-        console.error("Error writing to terminal:", e);
-        io.emit("error", `Error: writing to terminal. ${e.message ?? e}`);
+    } catch (e) {
+      console.log("Error writing to terminal", e);
     }
   });
 
   socket.on("closeTerminal", async (id: string, callback) => {
-      try {
     if (!terminals[id]) {
       return;
     }
@@ -481,10 +389,6 @@ io.on("connection", async (socket) => {
     delete terminals[id];
 
     callback();
-      } catch (e: any) {
-        console.error("Error closing terminal:", e);
-        io.emit("error", `Error: closing terminal. ${e.message ?? e}`);
-      }
   });
 
   socket.on(
@@ -496,7 +400,6 @@ io.on("connection", async (socket) => {
       instructions: string,
       callback
     ) => {
-        try {
       const fetchPromise = fetch(
         `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
         {
@@ -530,15 +433,10 @@ io.on("connection", async (socket) => {
       const json = await generateCodeResponse.json();
 
       callback({ response: json.response, success: true });
-        } catch (e: any) {
-          console.error("Error generating code:", e);
-          io.emit("error", `Error: code generation. ${e.message ?? e}`);
-        }
     }
   );
 
   socket.on("disconnect", async () => {
-      try {
     if (data.isOwner) {
       connections[data.sandboxId]--;
     }
@@ -585,15 +483,7 @@ io.on("connection", async (socket) => {
     // } else {
     //   console.log("number of sockets", sockets.length);
     // }
-      } catch (e: any) {
-        console.log("Error disconnecting:", e);
-        io.emit("error", `Error: disconnecting. ${e.message ?? e}`);
-      }
   });
-  } catch (e: any) {
-    console.error("Error connecting:", e);
-    io.emit("error", `Error: connection. ${e.message ?? e}`);
-  }
 });
 
 httpServer.listen(port, () => {

frontend/app/layout.tsx

@@ -6,7 +6,6 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
-import { TerminalProvider } from '@/context/TerminalContext';
 
 export const metadata: Metadata = {
   title: "Sandbox",
@@ -28,9 +27,7 @@ export default function RootLayout({
             forcedTheme="dark"
             disableTransitionOnChange
           >
-            <TerminalProvider>
             {children}
-            </TerminalProvider>
             <Analytics />
             <Toaster position="bottom-left" richColors />
           </ThemeProvider>

frontend/components/editor/index.tsx

@@ -46,7 +46,7 @@ export default function CodeEditor({
   // Initialize socket connection if it doesn't exist
   if (!socketRef.current) {
     socketRef.current = io(
-      `${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+      `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
       {
         timeout: 2000,
       }
@@ -326,29 +326,15 @@ export default function CodeEditor({
   }, [activeFileId, tabs, debouncedSaveData]);
 
   // Liveblocks live collaboration setup effect
-
-type ProviderData = {
-    provider: LiveblocksProvider<never, never, never, never>;
-    yDoc: Y.Doc;
-    yText: Y.Text;
-    binding?: MonacoBinding;
-    onSync: (isSynced: boolean) => void;
-  };
-  
-  const providersMap = useRef(new Map<string, ProviderData>());
-  
   useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeFileId);
-    const model = editorRef?.getModel();
+    const tab = tabs.find((t) => t.id === activeFileId)
+    const model = editorRef?.getModel()
 
-    if (!editorRef || !tab || !model) return;
+    if (!editorRef || !tab || !model) return
 
-    let providerData: ProviderData;
-  
-    if (!providersMap.current.has(tab.id)) {
-      const yDoc = new Y.Doc();
-      const yText = yDoc.getText(tab.id);
-      const yProvider = new LiveblocksProvider(room, yDoc);
+    const yDoc = new Y.Doc()
+    const yText = yDoc.getText(tab.id)
+    const yProvider: any = new LiveblocksProvider(room, yDoc)
 
     const onSync = (isSynced: boolean) => {
       if (isSynced) {
@@ -365,50 +351,24 @@ type ProviderData = {
       }
     }
 
-      yProvider.on("sync", onSync);
+    yProvider.on("sync", onSync)
 
-      providerData = { provider: yProvider, yDoc, yText, onSync };
-      providersMap.current.set(tab.id, providerData);
-    } else {
-      providerData = providersMap.current.get(tab.id)!;
-    }
+    setProvider(yProvider)
 
     const binding = new MonacoBinding(
-      providerData.yText,
+      yText,
       model,
       new Set([editorRef]),
-      providerData.provider.awareness as unknown as Awareness
-    );
-  
-    providerData.binding = binding;
-  
-    setProvider(providerData.provider);
+      yProvider.awareness as Awareness
+    )
 
     return () => {
-      // Cleanup logic
-      if (binding) {
-        binding.destroy();
+      yDoc.destroy()
+      yProvider.destroy()
+      binding.destroy()
+      yProvider.off("sync", onSync)
     }
-      if (providerData.binding) {
-        providerData.binding = undefined;
-      }
-    };
-  }, [editorRef, room, activeFileContent, activeFileId, tabs]);
-
-    // Added this effect to clean up when the component unmounts
-    useEffect(() => {
-      return () => {
-        // Clean up all providers when the component unmounts
-        providersMap.current.forEach((data) => {
-          if (data.binding) {
-            data.binding.destroy();
-          }
-          data.provider.disconnect();
-          data.yDoc.destroy();
-        });
-        providersMap.current.clear();
-      };
-    }, []);
+  }, [editorRef, room, activeFileContent])
 
   // Connection/disconnection effect
   useEffect(() => {
@@ -431,7 +391,7 @@ type ProviderData = {
       setFiles(files)
     }
 
-    const onError = (message: string) => {
+    const onRateLimit = (message: string) => {
       toast.error(message)
     }
 
@@ -453,7 +413,7 @@ type ProviderData = {
     socketRef.current?.on("connect", onConnect)
     socketRef.current?.on("disconnect", onDisconnect)
     socketRef.current?.on("loaded", onLoadedEvent)
-    socketRef.current?.on("error", onError)
+    socketRef.current?.on("rateLimit", onRateLimit)
     socketRef.current?.on("terminalResponse", onTerminalResponse)
     socketRef.current?.on("disableAccess", onDisableAccess)
     socketRef.current?.on("previewURL", setPreviewURL)
@@ -462,7 +422,7 @@ type ProviderData = {
       socketRef.current?.off("connect", onConnect)
       socketRef.current?.off("disconnect", onDisconnect)
       socketRef.current?.off("loaded", onLoadedEvent)
-      socketRef.current?.off("error", onError)
+      socketRef.current?.off("rateLimit", onRateLimit)
       socketRef.current?.off("terminalResponse", onTerminalResponse)
       socketRef.current?.off("disableAccess", onDisableAccess)
       socketRef.current?.off("previewURL", setPreviewURL)
@@ -490,8 +450,6 @@ type ProviderData = {
 
     setGenerate((prev) => ({ ...prev, show: false }));
 
-    //editor windows fix
-    function updateTabs(){
     const exists = tabs.find((t) => t.id === tab.id);
     setTabs((prev) => {
       if (exists) {
@@ -500,16 +458,13 @@ type ProviderData = {
       }
       return [...prev, tab];
     });
-    }
 
     if (fileCache.current.has(tab.id)) {
       setActiveFileContent(fileCache.current.get(tab.id));
-      updateTabs();
     } else {
       debouncedGetFile(tab.id, (response: SetStateAction<string>) => {
         fileCache.current.set(tab.id, response);
         setActiveFileContent(response);
-        updateTabs();
       });
     }
 
@@ -829,7 +784,11 @@ type ProviderData = {
               className="p-2 flex flex-col"
             >
               {isOwner ? (
-                <Terminals/>
+                <Terminals
+                  terminals={terminals}
+                  setTerminals={setTerminals}
+                  socket={socketRef.current}
+                />
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
                   <TerminalSquare className="w-4 h-4 mr-2" />

frontend/components/editor/navbar/index.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Logo from "@/assets/logo.svg";
-import { Pencil, Users, Play, StopCircle } from "lucide-react";
+import { Pencil, Users } from "lucide-react";
 import Link from "next/link";
 import { Sandbox, User } from "@/lib/types";
 import UserButton from "@/components/ui/userButton";
@@ -11,30 +11,23 @@ import { useState } from "react";
 import EditSandboxModal from "./edit";
 import ShareSandboxModal from "./share";
 import { Avatars } from "../live/avatars";
-import RunButtonModal from "./run";
-import { Terminal } from "@xterm/xterm";
-import { Socket } from "socket.io-client";
-import Terminals from "../terminals";
 
 export default function Navbar({
   userData,
   sandboxData,
   shared,
-  socket,
 }: {
   userData: User;
   sandboxData: Sandbox;
-  shared: { id: string; name: string }[];
-  socket: Socket;
+  shared: {
+    id: string;
+    name: string;
+  }[];
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isShareOpen, setIsShareOpen] = useState(false);
-  const [isRunning, setIsRunning] = useState(false);
-  const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
-  const [activeTerminalId, setActiveTerminalId] = useState("");
-  const [creatingTerminal, setCreatingTerminal] = useState(false);
 
-  const isOwner = sandboxData.userId === userData.id;;
+  const isOwner = sandboxData.userId === userData.id;
 
   return (
     <>
@@ -69,10 +62,6 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
-        <RunButtonModal
-          isRunning={isRunning}
-          setIsRunning={setIsRunning}
-        />
         <div className="flex items-center h-full space-x-4">
           <Avatars />
 

frontend/components/editor/navbar/run.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { Play, StopCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useTerminal } from "@/context/TerminalContext";
-import { closeTerminal } from "@/lib/terminal";
-
-export default function RunButtonModal({
-  isRunning,
-  setIsRunning,
-}: {
-  isRunning: boolean;
-  setIsRunning: (running: boolean) => void;
-}) {
-  const { createNewTerminal, terminals, setTerminals, socket, setActiveTerminalId } = useTerminal();
-
-  const handleRun = () => {
-    if (isRunning) {
-      console.log('Stopping sandbox...');
-      console.log('Closing Terminal');
-      console.log('Closing Preview Window');
-
-      // Close all terminals if needed
-      terminals.forEach(term => {
-        if (term.terminal) {
-          // Assuming you have a closeTerminal function similar to createTerminal
-          closeTerminal({
-            term,
-            terminals,
-            setTerminals,
-            setActiveTerminalId,
-            setClosingTerminal: () => { },
-            socket: socket!,
-            activeTerminalId: term.id,
-          });
-        }
-      });
-    } else {
-      console.log('Running sandbox...');
-      console.log('Opening Terminal');
-      console.log('Opening Preview Window');
-
-      if (terminals.length < 4) {
-        createNewTerminal();
-      } else {
-        console.error('Maximum number of terminals reached.');
-      }
-    }
-    setIsRunning(!isRunning);
-  };
-
-  return (
-    <>
-      <Button variant="outline" onClick={handleRun}>
-        {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
-        {isRunning ? 'Stop' : 'Run'}
-      </Button>
-    </>
-  );
-}

frontend/components/editor/terminals/index.tsx

@@ -2,16 +2,30 @@
 
 import { Button } from "@/components/ui/button";
 import Tab from "@/components/ui/tab";
-import { closeTerminal } from "@/lib/terminal";
+import { closeTerminal, createTerminal } from "@/lib/terminal";
 import { Terminal } from "@xterm/xterm";
 import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
+import { Socket } from "socket.io-client";
 import { toast } from "sonner";
 import EditorTerminal from "./terminal";
 import { useState } from "react";
-import { useTerminal } from "@/context/TerminalContext";
 
-export default function Terminals() {
-  const { terminals, setTerminals, socket, createNewTerminal } = useTerminal();
+export default function Terminals({
+  terminals,
+  setTerminals,
+  socket,
+}: {
+  terminals: { id: string; terminal: Terminal | null }[];
+  setTerminals: React.Dispatch<
+    React.SetStateAction<
+      {
+        id: string;
+        terminal: Terminal | null;
+      }[]
+    >
+  >;
+  socket: Socket;
+}) {
   const [activeTerminalId, setActiveTerminalId] = useState("");
   const [creatingTerminal, setCreatingTerminal] = useState(false);
   const [closingTerminal, setClosingTerminal] = useState("");
@@ -32,7 +46,7 @@ export default function Terminals() {
                 setTerminals,
                 setActiveTerminalId,
                 setClosingTerminal,
-                socket: socket!, 
+                socket,
                 activeTerminalId,
               })
             }
@@ -50,7 +64,12 @@ export default function Terminals() {
               toast.error("You reached the maximum # of terminals.");
               return;
             }
-            createNewTerminal();
+            createTerminal({
+              setTerminals,
+              setActiveTerminalId,
+              setCreatingTerminal,
+              socket,
+            });
           }}
           size="smIcon"
           variant={"secondary"}

frontend/context/TerminalContext.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { io, Socket } from 'socket.io-client';
-import { Terminal } from '@xterm/xterm';
-import { createId } from '@paralleldrive/cuid2';
-import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal'; // Adjust the import path as necessary
-
-interface TerminalContextType {
-  socket: Socket | null;
-  terminals: { id: string; terminal: Terminal | null }[];
-  setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
-  activeTerminalId: string;
-  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
-  creatingTerminal: boolean;
-  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
-  createNewTerminal: () => void;
-  closeTerminal: (id: string) => void;
-}
-
-const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
-
-export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  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);
-
-  useEffect(() => {
-    // Replace with your server URL
-    const socketIo = io(process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'); 
-    setSocket(socketIo);
-
-    // Log socket events
-    socketIo.on('connect', () => {
-      console.log('Socket connected:', socketIo.id);
-    });
-
-    socketIo.on('disconnect', () => {
-      console.log('Socket disconnected');
-    });
-
-    return () => {
-      socketIo.disconnect();
-    };
-  }, []);
-
-  const createNewTerminal = () => {
-    if (socket) {
-      createTerminalHelper({
-        setTerminals,
-        setActiveTerminalId,
-        setCreatingTerminal,
-        socket,
-      });
-    }
-  };
-
-  const closeTerminal = (id: string) => {
-    const terminalToClose = terminals.find(term => term.id === id);
-    if (terminalToClose && socket) {
-      closeTerminalHelper({
-        term: terminalToClose,
-        terminals,
-        setTerminals,
-        setActiveTerminalId,
-        setClosingTerminal: () => {}, // Implement if needed
-        socket,
-        activeTerminalId,
-      });
-    }
-  };
-
-  const value = {
-    socket,
-    terminals,
-    setTerminals,
-    activeTerminalId,
-    setActiveTerminalId,
-    creatingTerminal,
-    setCreatingTerminal,
-    createNewTerminal,
-    closeTerminal,
-  };
-
-  return (
-    <TerminalContext.Provider value={value}>
-      {children}
-    </TerminalContext.Provider>
-  );
-};
-
-export const useTerminal = (): TerminalContextType => {
-  const context = useContext(TerminalContext);
-  if (!context) {
-    throw new Error('useTerminal must be used within a TerminalProvider');
-  }
-  return context;
-};