refactor: client for server side sandbox handling

Author: ben-fornefeld

src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx

@@ -1,23 +1,38 @@
-'use client'
-
-import { LOCAL_STORAGE_KEYS } from '@/configs/keys'
 import { SandboxInspectProvider } from '@/features/dashboard/sandbox/inspect/context'
 import SandboxInspectFilesystem from '@/features/dashboard/sandbox/inspect/filesystem'
 import SandboxInspectHeader from '@/features/dashboard/sandbox/inspect/header'
-import { useLocalStorage } from 'usehooks-ts'
+import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
+import { getSandboxRoot } from '@/server/sandboxes/get-sandbox-root'
+import { notFound } from 'next/navigation'
 
-export default function SandboxInspectPage() {
-  const [rootPath, setRootPath] = useLocalStorage(
-    LOCAL_STORAGE_KEYS.SANDBOX_INSPECT_ROOT_PATH,
-    '/'
-  )
+export default async function SandboxInspectPage({
+  params,
+}: {
+  params: Promise<{ teamIdOrSlug: string; sandboxId: string }>
+}) {
+  const rootPath = '/home/user'
+
+  const { teamIdOrSlug, sandboxId } = await params
+
+  const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
+
+  const res = await getSandboxRoot({
+    teamId,
+    sandboxId,
+    rootPath,
+  })
+
+  if (!res?.data) {
+    throw notFound()
+  }
 
   return (
-    <SandboxInspectProvider rootPath={rootPath}>
-      <SandboxInspectHeader
-        rootPath={rootPath}
-        onRootPathChange={setRootPath}
-      />
+    <SandboxInspectProvider
+      teamId={teamId}
+      rootPath={rootPath}
+      seedEntries={res.data.entries}
+    >
+      <SandboxInspectHeader />
       <SandboxInspectFilesystem />
     </SandboxInspectProvider>
   )

src/features/dashboard/sandbox/inspect/dir.tsx

@@ -1,6 +1,5 @@
-import { FileType } from 'e2b'
 import { FilesystemNode } from './filesystem/types'
-import { ChevronRight, FolderOpenIcon } from 'lucide-react'
+import { ChevronRight } from 'lucide-react'
 import SandboxInspectNode from './node'
 import { useDirectory } from './hooks/use-directory'
 import { cn } from '@/lib/utils'
@@ -10,7 +9,7 @@ import { motion } from 'motion/react'
 
 interface SandboxInspectDirProps {
   dir: FilesystemNode & {
-    type: FileType.DIR
+    type: 'dir'
   }
 }
 

src/features/dashboard/sandbox/inspect/file.tsx

@@ -4,7 +4,7 @@ import { DataTableRow } from '@/ui/data-table'
 
 interface SandboxInspectFileProps {
   file: FilesystemNode & {
-    type: FileType.FILE
+    type: 'file'
   }
 }
 

src/features/dashboard/sandbox/inspect/header.tsx

@@ -1,22 +1,9 @@
 import { Input } from '@/ui/primitives/input'
 
-interface SandboxInspectHeaderProps {
-  rootPath: string
-  onRootPathChange: (path: string) => void
-}
-
-export default function SandboxInspectHeader({
-  rootPath,
-  onRootPathChange,
-}: SandboxInspectHeaderProps) {
+export default function SandboxInspectHeader() {
   return (
     <div className="flex items-center gap-2 p-8">
-      <Input
-        className="w-55"
-        placeholder="Root Path"
-        value={rootPath}
-        onChange={(e) => onRootPathChange(e.target.value)}
-      />
+      <Input className="w-55" placeholder="Root Path" />
     </div>
   )
 }

src/features/dashboard/sandbox/inspect/node.tsx

@@ -1,4 +1,3 @@
-import { FileType } from 'e2b'
 import SandboxInspectDir from './dir'
 import { useFilesystemNode } from './hooks/use-node'
 import SandboxInspectFile from './file'
@@ -11,9 +10,9 @@ export default function SandboxInspectNode({ path }: SandboxInspectDirProps) {
   const node = useFilesystemNode(path)!
 
   switch (node.type) {
-    case FileType.DIR:
+    case 'dir':
       return <SandboxInspectDir dir={node} />
-    case FileType.FILE:
+    case 'file':
       return <SandboxInspectFile file={node} />
   }
 }