patch: remove excess code

backend/database/src/index.ts

@@ -110,12 +110,17 @@ export default {
 				const body = await request.json()
 				const { type, name, userId, visibility } = initSchema.parse(body)
 
-				const allSandboxes = await db.select().from(sandbox).all()
-				if (allSandboxes.length >= 8) {
-					return new Response("You reached the maximum # of sandboxes.", {
-						status: 400,
-					})
-				}
+				const userSandboxes = await db
+				.select()
+				.from(sandbox)
+				.where(eq(sandbox.userId, userId))
+				.all();
+			
+			if (userSandboxes.length >= 8) {
+				return new Response("You reached the maximum # of sandboxes.", {
+					status: 400,
+				});
+			}
 
 				const sb = await db
 					.insert(sandbox)

backend/database/src/schema.ts

@@ -31,8 +31,8 @@ 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/src/index.ts

@@ -1,4 +1,3 @@
-import fs from "fs";
 import os from "os";
 import path from "path";
 import cors from "cors";
@@ -19,7 +18,7 @@ import {
   saveFile,
 } from "./fileoperations";
 import { LockManager } from "./utils";
-import { Sandbox, Terminal } from "e2b";
+import { Sandbox, Terminal, FilesystemManager } from "e2b";
 import {
   MAX_BODY_SIZE,
   createFileRL,
@@ -45,9 +44,16 @@ let inactivityTimeout: NodeJS.Timeout | null = null;
 let isOwnerConnected = false;
 
 const containers: Record<string, Sandbox> = {};
+const connections: Record<string, number> = {};
 const terminals: Record<string, Terminal> = {};
 
-const dirName = path.join(__dirname, "..");
+const dirName = "/home/user";
+
+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,6 +119,7 @@ io.on("connection", async (socket) => {
 
   if (data.isOwner) {
     isOwnerConnected = true;
+    connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
   } else {
     if (!isOwnerConnected) {
       socket.emit("disableAccess", "The sandbox owner is not connected.");
@@ -125,20 +132,27 @@ 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));
       }
     } catch (error) {
       console.error("Error creating container ", data.sandboxId, error);
     }
   });
 
+  // Change the owner of the project directory to user
+  const fixPermissions = async () => {
+    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((file) => {
+  sandboxFiles.fileData.forEach(async (file) => {
     const filePath = path.join(dirName, file.id);
-    fs.mkdirSync(path.dirname(filePath), { recursive: true });
-    fs.writeFile(filePath, file.data, function (err) {
-      if (err) throw err;
-    });
+    await containers[data.sandboxId].filesystem.makeDir(path.dirname(filePath));
+    await containers[data.sandboxId].filesystem.write(filePath, file.data);
   });
+  fixPermissions();
 
   socket.emit("loaded", sandboxFiles.files);
 
@@ -171,9 +185,8 @@ io.on("connection", async (socket) => {
       if (!file) return;
       file.data = body;
 
-      fs.writeFile(path.join(dirName, file.id), body, function (err) {
-        if (err) throw err;
-      });
+      await containers[data.sandboxId].filesystem.write(path.join(dirName, file.id), body);
+      fixPermissions();
       await saveFile(fileId, body);
     } catch (e) {
       io.emit("rateLimit", "Rate limited: file saving. Please slow down.");
@@ -187,13 +200,12 @@ io.on("connection", async (socket) => {
     const parts = fileId.split("/");
     const newFileId = folderId + "/" + parts.pop();
 
-    fs.rename(
+    await moveFile(
+      containers[data.sandboxId].filesystem,
       path.join(dirName, fileId),
-      path.join(dirName, newFileId),
-      function (err) {
-        if (err) throw err;
-      }
-    );
+      path.join(dirName, newFileId)
+    )
+    fixPermissions();
 
     file.id = newFileId;
 
@@ -219,9 +231,8 @@ io.on("connection", async (socket) => {
 
       const id = `projects/${data.sandboxId}/${name}`;
 
-      fs.writeFile(path.join(dirName, id), "", function (err) {
-        if (err) throw err;
-      });
+      await containers[data.sandboxId].filesystem.write(path.join(dirName, id), "");
+      fixPermissions();
 
       sandboxFiles.files.push({
         id,
@@ -248,9 +259,7 @@ io.on("connection", async (socket) => {
 
       const id = `projects/${data.sandboxId}/${name}`;
 
-      fs.mkdir(path.join(dirName, id), { recursive: true }, function (err) {
-        if (err) throw err;
-      });
+      await containers[data.sandboxId].filesystem.makeDir(path.join(dirName, id));
 
       callback();
     } catch (e) {
@@ -270,13 +279,13 @@ io.on("connection", async (socket) => {
       const newFileId =
         parts.slice(0, parts.length - 1).join("/") + "/" + newName;
 
-      fs.rename(
+
+      await moveFile(
+        containers[data.sandboxId].filesystem,
         path.join(dirName, fileId),
-        path.join(dirName, newFileId),
-        function (err) {
-          if (err) throw err;
-        }
-      );
+        path.join(dirName, newFileId)
+      )
+      fixPermissions();
       await renameFile(fileId, newFileId, file.data);
     } catch (e) {
       io.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
@@ -290,9 +299,7 @@ io.on("connection", async (socket) => {
       const file = sandboxFiles.fileData.find((f) => f.id === fileId);
       if (!file) return;
 
-      fs.unlink(path.join(dirName, fileId), function (err) {
-        if (err) throw err;
-      });
+      await containers[data.sandboxId].filesystem.remove(path.join(dirName, fileId));
       sandboxFiles.fileData = sandboxFiles.fileData.filter(
         (f) => f.id !== fileId
       );
@@ -315,9 +322,7 @@ io.on("connection", async (socket) => {
 
     await Promise.all(
       files.map(async (file) => {
-        fs.unlink(path.join(dirName, file), function (err) {
-          if (err) throw err;
-        });
+        await containers[data.sandboxId].filesystem.remove(path.join(dirName, file));
 
         sandboxFiles.fileData = sandboxFiles.fileData.filter(
           (f) => f.id !== file
@@ -346,6 +351,7 @@ 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("export PS1='user> '\rclear\r");
         console.log("Created terminal", id);
       } catch (error) {
@@ -432,11 +438,16 @@ io.on("connection", async (socket) => {
 
   socket.on("disconnect", async () => {
     if (data.isOwner) {
-      Object.entries(terminals).forEach((t) => {
-        const terminal = t[1];
-        terminal.kill();
-        delete terminals[t[0]];
-      });
+      connections[data.sandboxId]--;
+    }
+
+    if (data.isOwner && connections[data.sandboxId] <= 0) {
+      await Promise.all(
+        Object.entries(terminals).map(async ([key, terminal]) => {
+          await terminal.kill();
+          delete terminals[key];
+        })
+      );
 
       await lockManager.acquireLock(data.sandboxId, async () => {
         try {

frontend/components/editor/index.tsx

@@ -3,7 +3,7 @@
 import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
 import monaco from "monaco-editor"
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
-import { io } from "socket.io-client"
+import { Socket, io } from "socket.io-client"
 import { toast } from "sonner"
 import { useClerk } from "@clerk/nextjs"
 
@@ -41,12 +41,16 @@ export default function CodeEditor({
   sandboxData: Sandbox
   reactDefinitionFile: string
 }) {
-  const socket = io(
-    `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
-    {
-      timeout: 2000,
-    }
-  )
+  const socketRef = useRef<Socket | null>(null);
+
+  // Initialize socket connection if it doesn't exist
+  if (!socketRef.current) {
+    socketRef.current = io(
+      `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+      {
+        timeout: 2000,
+      }
+    );}
 
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
   const [disableAccess, setDisableAccess] = useState({
@@ -90,6 +94,9 @@ export default function CodeEditor({
     }[]
   >([])
 
+  // Preview state
+  const [previewURL, setPreviewURL] = useState<string>("");
+
   const isOwner = sandboxData.userId === userData.id
   const clerk = useClerk()
 
@@ -298,9 +305,10 @@ export default function CodeEditor({
         )
       );
       console.log(`Saving file...${activeFileId}`);
-      socket.emit("saveFile", activeFileId, value);
+      console.log(`Saving file...${value}`);
+      socketRef.current?.emit("saveFile", activeFileId, value);
     }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY)||1000),
-    [socket]
+    [socketRef]
   );
 
   useEffect(() => {
@@ -364,10 +372,10 @@ export default function CodeEditor({
 
   // Connection/disconnection effect
   useEffect(() => {
-    socket.connect()
-
+    socketRef.current?.connect()
+    
     return () => {
-      socket.disconnect()
+      socketRef.current?.disconnect()
     }
   }, [])
 
@@ -402,20 +410,22 @@ export default function CodeEditor({
         })
     }
 
-    socket.on("connect", onConnect)
-    socket.on("disconnect", onDisconnect)
-    socket.on("loaded", onLoadedEvent)
-    socket.on("rateLimit", onRateLimit)
-    socket.on("terminalResponse", onTerminalResponse)
-    socket.on("disableAccess", onDisableAccess)
+    socketRef.current?.on("connect", onConnect)
+    socketRef.current?.on("disconnect", onDisconnect)
+    socketRef.current?.on("loaded", onLoadedEvent)
+    socketRef.current?.on("rateLimit", onRateLimit)
+    socketRef.current?.on("terminalResponse", onTerminalResponse)
+    socketRef.current?.on("disableAccess", onDisableAccess)
+    socketRef.current?.on("previewURL", setPreviewURL)
 
     return () => {
-      socket.off("connect", onConnect)
-      socket.off("disconnect", onDisconnect)
-      socket.off("loaded", onLoadedEvent)
-      socket.off("rateLimit", onRateLimit)
-      socket.off("terminalResponse", onTerminalResponse)
-      socket.off("disableAccess", onDisableAccess)
+      socketRef.current?.off("connect", onConnect)
+      socketRef.current?.off("disconnect", onDisconnect)
+      socketRef.current?.off("loaded", onLoadedEvent)
+      socketRef.current?.off("rateLimit", onRateLimit)
+      socketRef.current?.off("terminalResponse", onTerminalResponse)
+      socketRef.current?.off("disableAccess", onDisableAccess)
+      socketRef.current?.off("previewURL", setPreviewURL)
     }
     // }, []);
   }, [terminals])
@@ -430,7 +440,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
     []
   );
@@ -534,7 +544,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))
     )
@@ -543,7 +553,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)
@@ -553,11 +563,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("")
     })
@@ -584,7 +594,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 ?? "",
@@ -644,7 +654,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}
@@ -764,6 +774,7 @@ export default function CodeEditor({
                   previewPanelRef.current?.expand()
                   setIsPreviewCollapsed(false)
                 }}
+                src={previewURL}
               />
             </ResizablePanel>
             <ResizableHandle />
@@ -776,7 +787,7 @@ export default function CodeEditor({
                 <Terminals
                   terminals={terminals}
                   setTerminals={setTerminals}
-                  socket={socket}
+                  socket={socketRef.current}
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">

frontend/components/editor/preview/index.tsx

@@ -15,9 +15,11 @@ import { toast } from "sonner"
 export default function PreviewWindow({
   collapsed,
   open,
+  src
 }: {
   collapsed: boolean
   open: () => void
+  src: string
 }) {
   const ref = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
@@ -45,7 +47,7 @@ export default function PreviewWindow({
 
                 <PreviewButton
                   onClick={() => {
-                    navigator.clipboard.writeText(`http://localhost:5173`)
+                    navigator.clipboard.writeText(src)
                     toast.info("Copied preview link to clipboard")
                   }}
                 >
@@ -73,7 +75,7 @@ export default function PreviewWindow({
             ref={ref}
             width={"100%"}
             height={"100%"}
-            src={`http://localhost:5173`}
+            src={src}
           />
         </div>
       )}