pass data properly to userbutton

backend/database/src/index.ts

@@ -21,38 +21,11 @@ export default {
 
 		const db = drizzle(env.DB, { schema });
 
-		if (path.startsWith("/api/user")) {
+		if (path === "/api/user") {
-			if (path === "/api/user") {
+			if (method === "GET") {
-				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);
-						return json(res ?? {});
-					} else {
-						const res = await db.select().from(user).all();
-						return json(res ?? {});
-					}
-				} else if (method === "POST") {
-					const userSchema = z.object({
-						id: z.string(),
-						name: z.string(),
-						email: z.string().email(),
-					});
-
-					const body = await request.json();
-					const { id, name, email } = userSchema.parse(body);
-
-					const res = await db.insert(user).values({ id, name, email }).returning().get();
-					return json({ res });
-				} 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")) {
+
+				if (params.has("id")) {
 					const id = params.get("id") as string;
 					const res = await db.query.user.findFirst({
 						where: (user, { eq }) => eq(user.id, id),
@@ -62,10 +35,23 @@ export default {
 					});
 					return json(res ?? {});
 				} else {
-					return new Response("Method Not Allowed", { status: 405 });
+					const res = await db.select().from(user).all();
+					return json(res ?? {});
 				}
+			} else if (method === "POST") {
+				const userSchema = z.object({
+					id: z.string(),
+					name: z.string(),
+					email: z.string().email(),
+				});
+
+				const body = await request.json();
+				const { id, name, email } = userSchema.parse(body);
+
+				const res = await db.insert(user).values({ id, name, email }).returning().get();
+				return json({ res });
 			} else {
-				return new Response("Not Found", { status: 404 });
+				return new Response("Method Not Allowed", { status: 405 });
 			}
 		} 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(
+  const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
-    `http://localhost:8787/api/user/sandbox?id=${user.id}`
+  const userData = (await userRes.json()) as User
-  )
-  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 userId={user.id} />
+      <Navbar userData={userData} />
-      <Dashboard sandboxes={data} />
+      <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 = {