file saving

backend/server/dist/index.js

@@ -70,21 +70,23 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
         const file = sandboxFiles.fileData.find((f) => f.id === fileId);
         if (!file)
             return;
-        console.log("file " + file.id + ": ", file.data);
         callback(file.data);
     });
-    socket.on("saveFile", (activeId, body, callback) => {
+    // todo: send diffs + debounce for efficiency
-        // const file = sandboxFiles.fileData.find((f) => f.id === fileId)
+    socket.on("saveFile", (fileId, body) => __awaiter(void 0, void 0, void 0, function* () {
-        // if (!file) return
+        const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-        // console.log("file " + file.id + ": ", file.data)
+        if (!file)
-        // callback(file.data)
+            return;
-    });
+        file.data = body;
+        console.log("save file " + file.id + ": ", file.data);
+        yield (0, utils_1.saveFile)(fileId, body);
+    }));
     socket.on("renameFile", (fileId, newName) => __awaiter(void 0, void 0, void 0, function* () {
         const file = sandboxFiles.fileData.find((f) => f.id === fileId);
         if (!file)
             return;
-        yield (0, utils_1.renameFile)(fileId, newName, file.data);
         file.id = newName;
+        yield (0, utils_1.renameFile)(fileId, newName, file.data);
     }));
 }));
 httpServer.listen(port, () => {

backend/server/dist/utils.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renameFile = exports.getSandboxFiles = void 0;
+exports.saveFile = exports.renameFile = exports.getSandboxFiles = void 0;
 const getSandboxFiles = (id) => __awaiter(void 0, void 0, void 0, function* () {
     const sandboxRes = yield fetch(`https://storage.ishaan1013.workers.dev/api?sandboxId=${id}`);
     const sandboxData = yield sandboxRes.json();
@@ -47,7 +47,7 @@ const processFiles = (paths, id) => __awaiter(void 0, void 0, void 0, function*
                 }
                 else {
                     const folder = {
-                        id: path, // issue todo: for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
+                        id: path, // todo: wrong id. for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
                         type: "folder",
                         name: part,
                         children: [],
@@ -90,3 +90,14 @@ const renameFile = (fileId, newName, data) => __awaiter(void 0, void 0, void 0,
     return res.ok;
 });
 exports.renameFile = renameFile;
+const saveFile = (fileId, data) => __awaiter(void 0, void 0, void 0, function* () {
+    const res = yield fetch(`https://storage.ishaan1013.workers.dev/api/save`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ fileId, data }),
+    });
+    return res.ok;
+});
+exports.saveFile = saveFile;

backend/server/src/index.ts

@@ -5,7 +5,7 @@ import { Server } from "socket.io"
 
 import { z } from "zod"
 import { User } from "./types"
-import { getSandboxFiles, renameFile } from "./utils"
+import { getSandboxFiles, renameFile, saveFile } from "./utils"
 
 dotenv.config()
 
@@ -71,25 +71,30 @@ io.on("connection", async (socket) => {
   const sandboxFiles = await getSandboxFiles(data.id)
 
   socket.emit("loaded", sandboxFiles.files)
+
   socket.on("getFile", (fileId: string, callback) => {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId)
     if (!file) return
 
-    console.log("file " + file.id + ": ", file.data)
     callback(file.data)
   })
-  socket.on("saveFile", (activeId: string, body: string, callback) => {
+
-    // const file = sandboxFiles.fileData.find((f) => f.id === fileId)
+  // todo: send diffs + debounce for efficiency
-    // if (!file) return
+  socket.on("saveFile", async (fileId: string, body: string) => {
-    // console.log("file " + file.id + ": ", file.data)
+    const file = sandboxFiles.fileData.find((f) => f.id === fileId)
-    // callback(file.data)
+    if (!file) return
+    file.data = body
+
+    console.log("save file " + file.id + ": ", file.data)
+    await saveFile(fileId, body)
   })
+
   socket.on("renameFile", async (fileId: string, newName: string) => {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId)
     if (!file) return
-    await renameFile(fileId, newName, file.data)
-
     file.id = newName
+
+    await renameFile(fileId, newName, file.data)
   })
 })
 

backend/server/src/utils.ts

@@ -50,7 +50,7 @@ const processFiles = async (paths: string[], id: string) => {
           fileData.push({ id: path, data: "" })
         } else {
           const folder: TFolder = {
-            id: path, // issue todo: for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
+            id: path, // todo: wrong id. for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
             type: "folder",
             name: part,
             children: [],
@@ -104,3 +104,14 @@ export const renameFile = async (
   })
   return res.ok
 }
+
+export const saveFile = async (fileId: string, data: string) => {
+  const res = await fetch(`https://storage.ishaan1013.workers.dev/api/save`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ fileId, data }),
+  })
+  return res.ok
+}

backend/storage/src/index.ts

@@ -56,6 +56,18 @@ export default {
 			await env.R2.delete(fileId);
 			await env.R2.put(newFileId, data);
 
+			return success;
+		} else if (path === '/api/save' && method === 'POST') {
+			const renameSchema = z.object({
+				fileId: z.string(),
+				data: z.string(),
+			});
+
+			const body = await request.json();
+			const { fileId, data } = renameSchema.parse(body);
+
+			await env.R2.put(fileId, data);
+
 			return success;
 		} else if (path === '/api/init' && method === 'POST') {
 			const initSchema = z.object({

frontend/components/editor/index.tsx

@@ -55,7 +55,7 @@ export default function CodeEditor({
         e.preventDefault()
 
         const activeTab = tabs.find((t) => t.id === activeId)
-        console.log("saving " + activeTab?.name)
+        console.log("saving:", activeTab?.name, editorRef.current?.getValue())
 
         setTabs((prev) =>
           prev.map((tab) =>
@@ -91,17 +91,10 @@ export default function CodeEditor({
       setFiles(files)
     }
 
-    function onFileEvent() {
-      console.log("onFileEvent")
-      // setActiveFile(file)
-    }
-
     socket.on("loaded", onLoadedEvent)
-    socket.on("file", onFileEvent)
 
     return () => {
       socket.off("loaded", onLoadedEvent)
-      socket.off("file", onFileEvent)
     }
   }, [])