fix db relations + display sandboxes on dash

frontend/app/(app)/dashboard/page.tsx

@@ -2,6 +2,7 @@ import { UserButton, currentUser } from "@clerk/nextjs"
 import { redirect } from "next/navigation"
 import Dashboard from "@/components/dashboard"
 import Navbar from "@/components/dashboard/navbar"
+import { Sandbox } from "@/lib/types"
 
 export default async function DashboardPage() {
   const user = await currentUser()
@@ -10,10 +11,17 @@ export default async function DashboardPage() {
     redirect("/")
   }
 
+  const res = await fetch(
+    `http://localhost:8787/api/user/sandbox?id=${user.id}`
+  )
+  const data = (await res.json()).sandbox as Sandbox[]
+
+  console.log(data)
+
   return (
     <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
       <Navbar />
-      <Dashboard />
+      <Dashboard sandboxes={data} />
     </div>
   )
 }

frontend/app/(app)/layout.tsx

@@ -27,6 +27,8 @@ export default async function AppAuthLayout({
         email: user.emailAddresses[0].emailAddress,
       }),
     })
+
+    console.log(res)
   } else {
     // user already exists in db
   }

frontend/components/dashboard/index.tsx

@@ -18,10 +18,11 @@ import {
 import { useState } from "react"
 import { Card } from "../ui/card"
 import ProjectCard from "./projectCard"
+import { Sandbox } from "@/lib/types"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
-export default function Dashboard() {
+export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
   const [screen, setScreen] = useState<TScreen>("projects")
 
   const activeScreen = (s: TScreen) => {
@@ -80,19 +81,21 @@ export default function Dashboard() {
         </div>
       </div>
       <div className="grow p-4 grid lg:grid-cols-4 xl:grid-cols-5 md:grid-cols-3 gap-4">
-        <ProjectCard>
-          <div className="font-medium flex items-center whitespace-nowrap w-full text-ellipsis overflow-hidden">
-            React Project 1
-          </div>
-          <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-            <div className="flex items-center">
-              <Globe className="w-3 h-3 mr-2" /> Public
+        {sandboxes.map((sandbox) => (
+          <ProjectCard key={sandbox.id}>
+            <div className="font-medium flex items-center whitespace-nowrap w-full text-ellipsis overflow-hidden">
+              {sandbox.name}
             </div>
-            <div className="flex items-center">
-              <Clock className="w-3 h-3 mr-2" /> 3d ago
+            <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+              <div className="flex items-center">
+                <Globe className="w-3 h-3 mr-2" /> Public
+              </div>
+              <div className="flex items-center">
+                <Clock className="w-3 h-3 mr-2" /> 3d ago
+              </div>
             </div>
-          </div>
-        </ProjectCard>
+          </ProjectCard>
+        ))}
       </div>
     </div>
   )

frontend/lib/types.ts

@@ -0,0 +1,15 @@
+// DB Types
+
+export type User = {
+  id: string
+  name: string
+  email: string
+}
+
+export type Sandbox = {
+  id: string
+  name: string
+  type: "react" | "node"
+  bucket: string | null
+  userId: string
+}