add file fetching data to the ws server

backend/server/dist/getSandboxFiles.js

@@ -13,10 +13,13 @@ 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();
     const paths = sandboxData.objects.map((obj) => obj.key);
-    return processFiles(paths, id);
+    const processedFiles = yield processFiles(paths, id);
+    // console.log("processedFiles.fileData:", processedFiles.fileData)
+    return processedFiles;
 });
-const processFiles = (paths, id) => {
+const processFiles = (paths, id) => __awaiter(void 0, void 0, void 0, function* () {
     const root = { id: "/", type: "folder", name: "/", children: [] };
+    const fileData = [];
     paths.forEach((path) => {
         const allParts = path.split("/");
         if (allParts[1] !== id) {
@@ -38,6 +41,7 @@ const processFiles = (paths, id) => {
                 if (isFile) {
                     const file = { id: path, type: "file", name: part };
                     current.children.push(file);
+                    fileData.push({ id: path, data: "" });
                 }
                 else {
                     const folder = {
@@ -52,6 +56,23 @@ const processFiles = (paths, id) => {
             }
         }
     });
-    return root.children;
+    yield Promise.all(fileData.map((file) => __awaiter(void 0, void 0, void 0, function* () {
+        const data = yield fetchFileContent(file.id);
+        file.data = data;
+    })));
+    return {
+        files: root.children,
+        fileData,
     };
+});
+const fetchFileContent = (fileId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const fileRes = yield fetch(`https://storage.ishaan1013.workers.dev/api?fileId=${fileId}`);
+        return yield fileRes.text();
+    }
+    catch (error) {
+        console.error("ERROR fetching file:", error);
+        return "";
+    }
+});
 exports.default = getSandboxFiles;

backend/server/dist/index.js

@@ -31,7 +31,6 @@ const io = new socket_io_1.Server(httpServer, {
 const handshakeSchema = zod_1.z.object({
     userId: zod_1.z.string(),
     sandboxId: zod_1.z.string(),
-    type: zod_1.z.enum(["node", "react"]),
     EIO: zod_1.z.string(),
     transport: zod_1.z.string(),
 });
@@ -44,7 +43,7 @@ io.use((socket, next) => __awaiter(void 0, void 0, void 0, function* () {
         next(new Error("Invalid request."));
         return;
     }
-    const { sandboxId, userId, type } = parseQuery.data;
+    const { sandboxId, userId } = parseQuery.data;
     const dbUser = yield fetch(`http://localhost:8787/api/user?id=${userId}`);
     const dbUserJSON = (yield dbUser.json());
     console.log("dbUserJSON:", dbUserJSON);
@@ -61,7 +60,6 @@ io.use((socket, next) => __awaiter(void 0, void 0, void 0, function* () {
     }
     socket.data = {
         id: sandboxId,
-        type,
         userId,
     };
     next();
@@ -69,11 +67,7 @@ io.use((socket, next) => __awaiter(void 0, void 0, void 0, function* () {
 io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
     const data = socket.data;
     const sandboxFiles = yield (0, getSandboxFiles_1.default)(data.id);
-    // fetch all file data TODO
+    socket.emit("loaded", sandboxFiles.files);
-    // socket.emit("loaded", {
-    //     rootContent: await fetchDir("/workspace", "")
-    // });
-    // initHandlers(socket, replId);
 }));
 httpServer.listen(port, () => {
     console.log(`Server running on port ${port}`);

backend/server/src/getSandboxFiles.ts

@@ -1,4 +1,12 @@
-import { R2Files, Sandbox, TFile, TFolder, User } from "./types"
+import {
+  R2FileBody,
+  R2Files,
+  Sandbox,
+  TFile,
+  TFileData,
+  TFolder,
+  User,
+} from "./types"
 
 const getSandboxFiles = async (id: string) => {
   const sandboxRes = await fetch(
@@ -7,11 +15,14 @@ const getSandboxFiles = async (id: string) => {
   const sandboxData: R2Files = await sandboxRes.json()
 
   const paths = sandboxData.objects.map((obj) => obj.key)
-  return processFiles(paths, id)
+  const processedFiles = await processFiles(paths, id)
+  // console.log("processedFiles.fileData:", processedFiles.fileData)
+  return processedFiles
 }
 
-const processFiles = (paths: string[], id: string): (TFile | TFolder)[] => {
+const processFiles = async (paths: string[], id: string) => {
   const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
+  const fileData: TFileData[] = []
 
   paths.forEach((path) => {
     const allParts = path.split("/")
@@ -36,6 +47,7 @@ const processFiles = (paths: string[], id: string): (TFile | TFolder)[] => {
         if (isFile) {
           const file: TFile = { id: path, type: "file", name: part }
           current.children.push(file)
+          fileData.push({ id: path, data: "" })
         } else {
           const folder: TFolder = {
             id: path,
@@ -50,7 +62,29 @@ const processFiles = (paths: string[], id: string): (TFile | TFolder)[] => {
     }
   })
 
-  return root.children
+  await Promise.all(
+    fileData.map(async (file) => {
+      const data = await fetchFileContent(file.id)
+      file.data = data
+    })
+  )
+
+  return {
+    files: root.children,
+    fileData,
+  }
+}
+
+const fetchFileContent = async (fileId: string): Promise<string> => {
+  try {
+    const fileRes = await fetch(
+      `https://storage.ishaan1013.workers.dev/api?fileId=${fileId}`
+    )
+    return await fileRes.text()
+  } catch (error) {
+    console.error("ERROR fetching file:", error)
+    return ""
+  }
 }
 
 export default getSandboxFiles

backend/server/src/index.ts

@@ -22,7 +22,6 @@ const io = new Server(httpServer, {
 const handshakeSchema = z.object({
   userId: z.string(),
   sandboxId: z.string(),
-  type: z.enum(["node", "react"]),
   EIO: z.string(),
   transport: z.string(),
 })
@@ -40,7 +39,7 @@ io.use(async (socket, next) => {
     return
   }
 
-  const { sandboxId, userId, type } = parseQuery.data
+  const { sandboxId, userId } = parseQuery.data
 
   const dbUser = await fetch(`http://localhost:8787/api/user?id=${userId}`)
   const dbUserJSON = (await dbUser.json()) as User
@@ -63,7 +62,6 @@ io.use(async (socket, next) => {
 
   socket.data = {
     id: sandboxId,
-    type,
     userId,
   }
 
@@ -74,18 +72,11 @@ io.on("connection", async (socket) => {
   const data = socket.data as {
     userId: string
     id: string
-    type: "node" | "react"
   }
 
   const sandboxFiles = await getSandboxFiles(data.id)
 
-  // fetch all file data TODO
+  socket.emit("loaded", sandboxFiles.files)
-
-  // socket.emit("loaded", {
-  //     rootContent: await fetchDir("/workspace", "")
-  // });
-
-  // initHandlers(socket, replId);
 })
 
 httpServer.listen(port, () => {

backend/server/src/types.ts

@@ -27,6 +27,11 @@ export type TFile = {
   name: string
 }
 
+export type TFileData = {
+  id: string
+  data: string
+}
+
 export type R2Files = {
   objects: R2FileData[]
   truncated: boolean
@@ -43,3 +48,12 @@ export type R2FileData = {
   version: string
   key: string
 }
+
+export type R2FileBody = R2FileData & {
+  body: ReadableStream
+  bodyUsed: boolean
+  arrayBuffer: Promise<ArrayBuffer>
+  text: Promise<string>
+  json: Promise<any>
+  blob: Promise<Blob>
+}

backend/storage/src/index.ts

@@ -20,11 +20,26 @@ export default {
 			if (method === 'GET') {
 				const params = url.searchParams;
 				const sandboxId = params.get('sandboxId');
-				if (!sandboxId) {
+				const fileId = params.get('fileId');
-					return invalidRequest;
+
-				}
+				if (sandboxId) {
 					const res = await env.R2.list({ prefix: `projects/${sandboxId}` });
 					return new Response(JSON.stringify(res), { status: 200 });
+				} else if (fileId) {
+					const obj = await env.R2.get(fileId);
+					if (obj === null) {
+						return new Response(`${fileId} not found`, { status: 404 });
+					}
+					const headers = new Headers();
+					headers.set('etag', obj.httpEtag);
+					obj.writeHttpMetadata(headers);
+
+					const text = await obj.text();
+
+					return new Response(text, {
+						headers,
+					});
+				} else return invalidRequest;
 			} else if (method === 'POST') {
 				return new Response('Hello, world!');
 			} else return methodNotAllowed;