From 368f246701e3e884f3d74495bcfbba4c4f7e09ae Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Tue, 18 Jun 2024 15:19:16 +0530
Subject: [PATCH] feat: user profile dropdown & settings

---
 next.config.js            | 19 +++++++++-----
 src/app/actions.ts        | 12 ++++++---
 src/app/setup/page.tsx    |  1 -
 src/components/topnav.tsx | 52 +++++++++++++++++++++++++++++++++++++--
 4 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/next.config.js b/next.config.js
index 41cc5e8..07d270c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,12 +6,19 @@ await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
 const config = {
-    typescript: {
-        ignoreBuildErrors: true,
-    },
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        hostname: "img.clerk.com",
+      },
+    ],
+  },
 };
 
 export default config;
diff --git a/src/app/actions.ts b/src/app/actions.ts
index 4323746..6a31c59 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -2,6 +2,7 @@
 
 import { db } from "@/server/db";
 import { users } from "@/server/db/schema";
+import { currentUser } from "@clerk/nextjs/server";
 
 export async function setFullUserName(name: string, userId: string) {
   try {
@@ -22,7 +23,7 @@ export async function setPaperlessURL(url: string, userId: string) {
       .onConflictDoUpdate({ target: users.userId, set: { paperlessURL: url } });
   } catch {
     throw new Error("Database error");
-  } 
+  }
 }
 
 export async function setPaperlessToken(token: string, userId: string) {
@@ -30,8 +31,11 @@ export async function setPaperlessToken(token: string, userId: string) {
     await db
       .insert(users)
       .values({ paperlessToken: token, userId: userId })
-      .onConflictDoUpdate({ target: users.userId, set: { paperlessToken: token } });
+      .onConflictDoUpdate({
+        target: users.userId,
+        set: { paperlessToken: token },
+      });
   } catch {
     throw new Error("Database error");
-  } 
-}
\ No newline at end of file
+  }
+}
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index 7ef733c..c4d174d 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -25,7 +25,6 @@ import {
 } from "../actions";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
-import { Check } from "lucide-react";
 
 function FullName({
   setActiveTab,
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index d13f416..acba025 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -1,11 +1,59 @@
 "use client";
 
-import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useClerk } from "@clerk/nextjs";
 import Link from "next/link";
 import { Button, buttonVariants } from "@/components/ui/button";
 import Tooltip from "@/components/tooltip";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Separator } from "@/components/ui/separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Image from "next/image";
+import { useUser } from "@clerk/nextjs";
+import { User } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+function UserSettings() {
+  const { user } = useUser();
+  const { openUserProfile } = useClerk();
+  const router = useRouter();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="size-8" asChild>
+        {user ? (
+          <Image
+            src={user.imageUrl}
+            width={32}
+            height={32}
+            alt="Avatar"
+            className="mt-1 overflow-hidden rounded-full"
+          />
+        ) : (
+          <User className="h-6 w-8" />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => openUserProfile()}>
+          Manage Account
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push("/settings")}>
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 
 export function TopNav() {
   return (
@@ -46,7 +94,7 @@ export function TopNav() {
                 <SignInButton />
               </SignedOut>
               <SignedIn>
-                <UserButton />
+                <UserSettings />
               </SignedIn>
             </div>
           </div>