From c4e1a894c36c270107e663057804a9b492d15f3e Mon Sep 17 00:00:00 2001 From: Ishaan Dey Date: Sat, 27 Apr 2024 19:12:25 -0400 Subject: [PATCH] file saving --- backend/server/dist/index.js | 18 ++++++++++-------- backend/server/dist/utils.js | 15 +++++++++++++-- backend/server/src/index.ts | 23 ++++++++++++++--------- backend/server/src/utils.ts | 13 ++++++++++++- backend/storage/src/index.ts | 12 ++++++++++++ frontend/components/editor/index.tsx | 9 +-------- 6 files changed, 62 insertions(+), 28 deletions(-) diff --git a/backend/server/dist/index.js b/backend/server/dist/index.js index 2754d1e..d0f86cb 100644 --- a/backend/server/dist/index.js +++ b/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) => { - // const file = sandboxFiles.fileData.find((f) => f.id === fileId) - // if (!file) return - // console.log("file " + file.id + ": ", file.data) - // callback(file.data) - }); + // todo: send diffs + debounce for efficiency + socket.on("saveFile", (fileId, body) => __awaiter(void 0, void 0, void 0, function* () { + const file = sandboxFiles.fileData.find((f) => f.id === fileId); + if (!file) + 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, () => { diff --git a/backend/server/dist/utils.js b/backend/server/dist/utils.js index 3566509..982bbc6 100644 --- a/backend/server/dist/utils.js +++ b/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; diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts index 4864971..2a8d72b 100644 --- a/backend/server/src/index.ts +++ b/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) - // if (!file) return - // console.log("file " + file.id + ": ", file.data) - // callback(file.data) + + // todo: send diffs + debounce for efficiency + socket.on("saveFile", async (fileId: string, body: string) => { + const file = sandboxFiles.fileData.find((f) => f.id === fileId) + 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) }) }) diff --git a/backend/server/src/utils.ts b/backend/server/src/utils.ts index 4cdd679..314ee0a 100644 --- a/backend/server/src/utils.ts +++ b/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 +} diff --git a/backend/storage/src/index.ts b/backend/storage/src/index.ts index af5fbe9..5054a6e 100644 --- a/backend/storage/src/index.ts +++ b/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({ diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index bf1d42b..68f842f 100644 --- a/frontend/components/editor/index.tsx +++ b/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) } }, [])