dynamic file display + tab state

2024-04-26 00:10:53 -04:00 · 2024-04-26 00:10:53 -04:00 · a49de2294d
commit a49de2294d
parent 432133f64f
7 changed files with 207 additions and 119 deletions
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@ -1,28 +1,87 @@
 import Navbar from "@/components/editor/navbar"
-import { User } from "@/lib/types"
+import { TFile, TFolder } from "@/components/editor/sidebar/types"
+import { R2Files, User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
-import { redirect } from "next/navigation"
+import { notFound, redirect } from "next/navigation"

 const CodeEditor = dynamic(() => import("@/components/editor"), {
  ssr: false,
 })

-export default async function CodePage() {
+const getUserData = async (id: string) => {
+  const userRes = await fetch(`http://localhost:8787/api/user?id=${id}`)
+  const userData: User = await userRes.json()
+  return userData
+}
+
+const getSandboxFiles = async (id: string) => {
+  const sandboxRes = await fetch(
+    `https://storage.ishaan1013.workers.dev/api?sandboxId=${id}`
+  )
+  const sandboxData: R2Files = await sandboxRes.json()
+
+  if (sandboxData.objects.length === 0) return notFound()
+  const paths = sandboxData.objects.map((obj) => obj.key)
+  return processFiles(paths, id)
+}
+
+const processFiles = (paths: string[], id: string): (TFile | TFolder)[] => {
+  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
+
+  paths.forEach((path) => {
+    const allParts = path.split("/")
+    if (allParts[1] !== id) return notFound()
+
+    const parts = allParts.slice(2)
+    let current: TFolder = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1 && part.includes(".")
+      const existing = current.children.find((child) => child.name === part)
+
+      if (existing) {
+        if (!isFile) {
+          current = existing as TFolder
+        }
+      } else {
+        if (isFile) {
+          const file: TFile = { id: path, type: "file", name: part }
+          current.children.push(file)
+        } else {
+          const folder: TFolder = {
+            id: path,
+            type: "folder",
+            name: part,
+            children: [],
+          }
+          current.children.push(folder)
+          current = folder
+        }
+      }
+    }
+  })
+
+  return root.children
+}
+
+export default async function CodePage({ params }: { params: { id: string } }) {
  const user = await currentUser()
+  const sandboxId = params.id

  if (!user) {
    redirect("/")
  }

-  const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
-  const userData = (await userRes.json()) as User
+  const userData = await getUserData(user.id)
+  const sandboxFiles = await getSandboxFiles(sandboxId)

  return (
    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
      <Navbar userData={userData} />
      <div className="w-screen flex grow">
-        <CodeEditor />
+        <CodeEditor files={sandboxFiles} />
      </div>
    </div>
  )
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -3,55 +3,26 @@
 import Editor, { OnMount } from "@monaco-editor/react"
 import monaco from "monaco-editor"
 import { useRef, useState } from "react"
-import theme from "./theme.json"
+// import theme from "./theme.json"

 import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { Button } from "../ui/button"
 import {
  ChevronLeft,
  ChevronRight,
-  RotateCcw,
  RotateCw,
-  Terminal,
  TerminalSquare,
-  X,
 } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import { useClerk } from "@clerk/nextjs"
+import { TFile, TFolder } from "./sidebar/types"

-export default function CodeEditor() {
-  const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
-  const [code, setCode] = useState([
-    {
-      language: "css",
-      name: "style.css",
-      value: `body { background-color: #282c34; color: white; }`,
-    },
-    {
-      language: "html",
-      name: "index.html",
-      value: `<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-  <h1>Hello, world!</h1>
-  <script src="script.js"></script>
-</body>
-</html>`,
-    },
-    {
-      language: "javascript",
-      name: "script.js",
-      value: `console.log("Hello, world!")`,
-    },
-  ])
+export default function CodeEditor({ files }: { files: (TFile | TFolder)[] }) {
+  // const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)

  // const handleEditorMount: OnMount = (editor, monaco) => {
  //   editorRef.current = editor
@ -59,9 +30,42 @@ export default function CodeEditor() {

  const clerk = useClerk()

+  const [tabs, setTabs] = useState<TFile[]>([])
+  const [activeId, setActiveId] = useState<string | null>(null)
+
+  const selectFile = (tab: TFile) => {
+    setTabs((prev) => {
+      const exists = prev.find((t) => t.id === tab.id)
+      if (exists) {
+        setActiveId(exists.id)
+        return prev
+      }
+      return [...prev, tab]
+    })
+    setActiveId(tab.id)
+  }
+
+  const closeTab = (tab: TFile) => {
+    const numTabs = tabs.length
+    const index = tabs.findIndex((t) => t.id === tab.id)
+    setActiveId((prev) => {
+      const next =
+        prev === tab.id
+          ? numTabs === 1
+            ? null
+            : index < numTabs - 1
+            ? tabs[index + 1].id
+            : tabs[index - 1].id
+          : prev
+
+      return next
+    })
+    setTabs((prev) => prev.filter((t) => t.id !== tab.id))
+  }
+
  return (
    <>
-      <Sidebar />
+      <Sidebar files={files} selectFile={selectFile} />
      <ResizablePanelGroup direction="horizontal">
        <ResizablePanel
          className="p-2 flex flex-col"
@ -70,11 +74,25 @@ export default function CodeEditor() {
          defaultSize={60}
        >
          <div className="h-10 w-full flex gap-2">
-            <Tab selected>index.html</Tab>
-            <Tab>style.css</Tab>
+            {tabs.map((tab) => (
+              <Tab
+                key={tab.id}
+                selected={activeId === tab.id}
+                onClick={() => setActiveId(tab.id)}
+                onClose={() => closeTab(tab)}
+              >
+                {tab.name}
+              </Tab>
+            ))}
          </div>
          <div className="grow w-full overflow-hidden rounded-md">
-            {clerk.loaded ? (
+            {activeId === null ? (
+              <>
+                <div className="w-full h-full flex items-center justify-center text-xl font-medium text-secondary select-none">
+                  No file selected.
+                </div>
+              </>
+            ) : clerk.loaded ? (
              <Editor
                height="100%"
                defaultLanguage="typescript"
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/frontend/components/editor/sidebar/file.tsx
@ -3,18 +3,31 @@
 import Image from "next/image"
 import { getIconForFile } from "vscode-icons-js"
 import { TFile } from "./types"
+import { useEffect, useState } from "react"
+
+export default function SidebarFile({
+  data,
+  selectFile,
+}: {
+  data: TFile
+  selectFile: (file: TFile) => void
+}) {
+  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)

-export default function SidebarFile({ data }: { data: TFile }) {
  return (
-    <div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
+    <button
+      onClick={() => selectFile(data)}
+      className="w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+    >
      <Image
-        src={`/icons/${getIconForFile(data.name)}`}
+        src={imgSrc}
        alt="File Icon"
        width={18}
        height={18}
        className="mr-2"
+        onError={() => setImgSrc("/icons/default_file.svg")}
      />
      {data.name}
-    </div>
+    </button>
  )
 }
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/frontend/components/editor/sidebar/folder.tsx
@ -3,10 +3,16 @@
 import Image from "next/image"
 import { useState } from "react"
 import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFolder } from "./types"
+import { TFile, TFolder } from "./types"
 import SidebarFile from "./file"

-export default function SidebarFolder({ data }: { data: TFolder }) {
+export default function SidebarFolder({
+  data,
+  selectFile,
+}: {
+  data: TFolder
+  selectFile: (file: TFile) => void
+}) {
  const [isOpen, setIsOpen] = useState(false)
  const folder = isOpen
    ? getIconForOpenFolder(data.name)
@ -33,9 +39,17 @@ export default function SidebarFolder({ data }: { data: TFolder }) {
          <div className="flex flex-col grow">
            {data.children.map((child) =>
              child.type === "file" ? (
-                <SidebarFile key={child.id} data={child} />
+                <SidebarFile
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                />
              ) : (
-                <SidebarFolder key={child.id} data={child} />
+                <SidebarFolder
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                />
              )
            )}
          </div>
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -1,72 +1,26 @@
+"use client"
+
 import { FilePlus, FolderPlus, Search } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder } from "./types"

-const data: (TFile | TFolder)[] = [
-  {
-    id: "index.tsx",
-    type: "file",
-    name: "index.tsx",
-  },
-  {
-    id: "components",
-    type: "folder",
-    name: "components",
-    children: [
-      {
-        id: "navbar.tsx",
-        type: "file",
-        name: "navbar.tsx",
-      },
-      {
-        id: "ui",
-        type: "folder",
-        name: "ui",
-        children: [
-          {
-            id: "Button.tsx",
-            type: "file",
-            name: "Button.tsx",
-          },
-          {
-            id: "Input.tsx",
-            type: "file",
-            name: "Input.tsx",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "App.tsx",
-    type: "file",
-    name: "App.tsx",
-  },
-  {
-    id: "styles",
-    type: "folder",
-    name: "styles",
-    children: [
-      {
-        id: "style.css",
-        type: "file",
-        name: "style.css",
-      },
-      {
-        id: "index.css",
-        type: "file",
-        name: "index.css",
-      },
-    ],
-  },
-]
+// Note: add renaming validation:
+// In general: must not contain / or \ or whitespace, not empty, no duplicates
+// Files: must contain dot
+// Folders: must not contain dot

-export default function Sidebar() {
+export default function Sidebar({
+  files,
+  selectFile,
+}: {
+  files: (TFile | TFolder)[]
+  selectFile: (tab: TFile) => void
+}) {
  return (
    <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
      <div className="flex w-full items-center justify-between h-8 mb-1 ">
-        <div className="text-muted-foreground">EXPLORER</div>
+        <div className="text-muted-foreground">Explorer</div>
        <div className="flex space-x-1">
          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
            <FilePlus className="w-4 h-4" />
@ -80,13 +34,15 @@ export default function Sidebar() {
        </div>
      </div>
      <div className="w-full mt-1 flex flex-col">
-        {/* <SidebarFile name="index.tsx" />
-        <SidebarFolder name="styles" /> */}
-        {data.map((child) =>
+        {files.map((child) =>
          child.type === "file" ? (
-            <SidebarFile key={child.id} data={child} />
+            <SidebarFile key={child.id} data={child} selectFile={selectFile} />
          ) : (
-            <SidebarFolder key={child.id} data={child} />
+            <SidebarFolder
+              key={child.id}
+              data={child}
+              selectFile={selectFile}
+            />
          )
        )}
      </div>
--- a/frontend/components/ui/tab.tsx
+++ b/frontend/components/ui/tab.tsx
@ -2,6 +2,7 @@

 import { X } from "lucide-react"
 import { Button } from "./button"
+import { useEffect } from "react"

 export default function Tab({
  children,
@ -19,13 +20,23 @@ export default function Tab({
      onClick={onClick ?? undefined}
      size="sm"
      variant={"secondary"}
-      className={`group select-none ${
-        selected ? "bg-neutral-700 hover:bg-neutral-600" : ""
+      className={`group font-normal select-none ${
+        selected
+          ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
+          : "text-muted-foreground"
      }`}
    >
      {children}
      <div
-        onClick={onClose ?? undefined}
+        onClick={
+          onClose
+            ? (e) => {
+                e.stopPropagation()
+                e.preventDefault()
+                onClose()
+              }
+            : undefined
+        }
        className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
      >
        <X className="w-3 h-3" />
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@ -15,3 +15,20 @@ export type Sandbox = {
  bucket: string | null
  userId: string
 }
+
+export type R2Files = {
+  objects: R2FileData[]
+  truncated: boolean
+  delimitedPrefixes: any[]
+}
+
+export type R2FileData = {
+  storageClass: string
+  uploaded: string
+  checksums: any
+  httpEtag: string
+  etag: string
+  size: number
+  version: string
+  key: string
+}