pass data properly to userbutton

backend/database/src/index.ts

@@ -21,15 +21,18 @@ export default {
 
 		const db = drizzle(env.DB, { schema });
 
-		if (path.startsWith("/api/user")) {
 		if (path === "/api/user") {
 			if (method === "GET") {
 				const params = url.searchParams;
 
 				if (params.has("id")) {
 					const id = params.get("id") as string;
-						const res = await db.select().from(user).where(eq(user.id, id)).get();
-						console.log(res);
+					const res = await db.query.user.findFirst({
+						where: (user, { eq }) => eq(user.id, id),
+						with: {
+							sandbox: true,
+						},
+					});
 					return json(res ?? {});
 				} else {
 					const res = await db.select().from(user).all();
@@ -50,23 +53,6 @@ export default {
 			} else {
 				return new Response("Method Not Allowed", { status: 405 });
 			}
-			} else if (path === "/api/user/sandbox") {
-				const params = url.searchParams;
-				if (method === "GET" && params.has("id")) {
-					const id = params.get("id") as string;
-					const res = await db.query.user.findFirst({
-						where: (user, { eq }) => eq(user.id, id),
-						with: {
-							sandbox: true,
-						},
-					});
-					return json(res ?? {});
-				} else {
-					return new Response("Method Not Allowed", { status: 405 });
-				}
-			} else {
-				return new Response("Not Found", { status: 404 });
-			}
 		} else return new Response("Not Found", { status: 404 });
 	},
 };

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

@@ -2,7 +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"
+import { Sandbox, User } from "@/lib/types"
 
 export default async function DashboardPage() {
   const user = await currentUser()
@@ -11,17 +11,13 @@ 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)
+  const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
+  const userData = (await userRes.json()) as User
 
   return (
     <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
-      <Navbar userId={user.id} />
-      <Dashboard sandboxes={data} />
+      <Navbar userData={userData} />
+      <Dashboard sandboxes={userData.sandbox} />
     </div>
   )
 }

frontend/components/dashboard/navbar/index.tsx

@@ -1,12 +1,11 @@
-import { UserButton } from "@clerk/nextjs"
-import { dark } from "@clerk/themes"
 import Image from "next/image"
 import Link from "next/link"
 import Logo from "@/assets/logo.svg"
 import DashboardNavbarSearch from "./search"
 import DashboardUserButton from "./userButton"
+import { User } from "@/lib/types"
 
-export default function DashboardNavbar({ userId }: { userId: string }) {
+export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
     <div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
@@ -20,7 +19,7 @@ export default function DashboardNavbar({ userId }: { userId: string }) {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
-        <DashboardUserButton userId={userId} />
+        <DashboardUserButton userData={userData} />
       </div>
     </div>
   )

frontend/components/dashboard/navbar/userButton.tsx

@@ -8,18 +8,25 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { User } from "@/lib/types"
 import { LogOut, Pencil } from "lucide-react"
 
-export default function DashboardUserButton({ userId }: { userId: string }) {
+export default function DashboardUserButton({ userData }: { userData: User }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <div className="w-9 h-9 rounded-full overflow-hidden bg-red-500"></div>
+        <div className="w-9 h-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium">
+          {userData.name
+            .split(" ")
+            .slice(0, 2)
+            .map((name) => name[0].toUpperCase())}
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem className="cursor-pointer">
           <Pencil className="mr-2 h-4 w-4" />
           <span>Edit Profile</span>
+          {/* open modal with name and email (disabled) */}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem className="!text-destructive cursor-pointer">

frontend/lib/types.ts

@@ -4,6 +4,7 @@ export type User = {
   id: string
   name: string
   email: string
+  sandbox: Sandbox[]
 }
 
 export type Sandbox = {