add file fetching data to the ws server

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", {
-  //     rootContent: await fetchDir("/workspace", "")
-  // });
-
-  // initHandlers(socket, replId);
+  socket.emit("loaded", sandboxFiles.files)
 })
 
 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>
+}