From 30c9da559f7dfd5c291e3247595a9b35497cdf10 Mon Sep 17 00:00:00 2001
From: Akhileshrangani4 <akhileshrangani4@gmail.com>
Date: Sun, 10 Nov 2024 23:40:10 -0500
Subject: [PATCH] feat: user avatar images

- added user avatars for each user
- it will fetch user images from github or google and if there is no image then it will show initials
---
 backend/database/drizzle/meta/_journal.json   | 14 +++++++++
 backend/database/src/index.ts                 |  1 +
 frontend/app/(app)/code/[id]/page.tsx         |  2 +-
 frontend/app/(app)/dashboard/page.tsx         |  1 +
 frontend/components/dashboard/shared.tsx      |  7 ++++-
 frontend/components/editor/navbar/index.tsx   |  2 +-
 frontend/components/editor/navbar/share.tsx   |  7 ++++-
 .../components/editor/navbar/sharedUser.tsx   |  4 +--
 frontend/components/ui/avatar.tsx             | 29 +++++++++++++++----
 frontend/components/ui/userButton.tsx         |  9 ++----
 frontend/next.config.mjs                      |  6 ++++
 11 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/backend/database/drizzle/meta/_journal.json b/backend/database/drizzle/meta/_journal.json
index 2023349..1f095d0 100644
--- a/backend/database/drizzle/meta/_journal.json
+++ b/backend/database/drizzle/meta/_journal.json
@@ -15,6 +15,20 @@
       "when": 1731290863632,
       "tag": "0001_opposite_newton_destine",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "5",
+      "when": 1731296235880,
+      "tag": "0002_rainy_fantastic_four",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "5",
+      "when": 1731297339306,
+      "tag": "0003_lying_snowbird",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/backend/database/src/index.ts b/backend/database/src/index.ts
index 6442b4e..bba033d 100644
--- a/backend/database/src/index.ts
+++ b/backend/database/src/index.ts
@@ -169,6 +169,7 @@ export default {
 								name: sb.name,
 								type: sb.type,
 								author: sb.author.name,
+								authorAvatarUrl: sb.author.avatarUrl,
 								sharedOn: r.sharedOn,
 							}
 						})
diff --git a/frontend/app/(app)/code/[id]/page.tsx b/frontend/app/(app)/code/[id]/page.tsx
index d193d39..b4aa09d 100644
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@@ -51,7 +51,7 @@ const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
         }
       )
       const userData: User = await userRes.json()
-      return { id: userData.id, name: userData.name }
+      return { id: userData.id, name: userData.name, avatarUrl: userData.avatarUrl }
     })
   )
 
diff --git a/frontend/app/(app)/dashboard/page.tsx b/frontend/app/(app)/dashboard/page.tsx
index 52f8c3f..1433de1 100644
--- a/frontend/app/(app)/dashboard/page.tsx
+++ b/frontend/app/(app)/dashboard/page.tsx
@@ -35,6 +35,7 @@ export default async function DashboardPage() {
     type: "react" | "node"
     author: string
     sharedOn: Date
+    authorAvatarUrl: string
   }[]
 
   return (
diff --git a/frontend/components/dashboard/shared.tsx b/frontend/components/dashboard/shared.tsx
index d9d4d39..262d985 100644
--- a/frontend/components/dashboard/shared.tsx
+++ b/frontend/components/dashboard/shared.tsx
@@ -20,6 +20,7 @@ export default function DashboardSharedWithMe({
     name: string
     type: "react" | "node"
     author: string
+    authorAvatarUrl: string
     sharedOn: Date
   }[]
 }) {
@@ -58,7 +59,11 @@ export default function DashboardSharedWithMe({
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center">
-                      <Avatar name={sandbox.author} className="mr-2" />
+                      <Avatar 
+                        name={sandbox.author}
+                        avatarUrl={sandbox.authorAvatarUrl}
+                        className="mr-2"
+                      />
                       {sandbox.author}
                     </div>
                   </TableCell>
diff --git a/frontend/components/editor/navbar/index.tsx b/frontend/components/editor/navbar/index.tsx
index 16bb373..0033fba 100644
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@@ -23,7 +23,7 @@ export default function Navbar({
 }: {
   userData: User
   sandboxData: Sandbox
-  shared: { id: string; name: string }[]
+  shared: { id: string; name: string; avatarUrl: string }[]
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false)
   const [isShareOpen, setIsShareOpen] = useState(false)
diff --git a/frontend/components/editor/navbar/share.tsx b/frontend/components/editor/navbar/share.tsx
index 3d5991d..88a2854 100644
--- a/frontend/components/editor/navbar/share.tsx
+++ b/frontend/components/editor/navbar/share.tsx
@@ -43,6 +43,7 @@ export default function ShareSandboxModal({
   shared: {
     id: string
     name: string
+    avatarUrl: string
   }[]
 }) {
   const [loading, setLoading] = useState(false)
@@ -142,7 +143,11 @@ export default function ShareSandboxModal({
               </DialogHeader>
               <div className="space-y-2">
                 {shared.map((user) => (
-                  <SharedUser key={user.id} user={user} sandboxId={data.id} />
+                  <SharedUser
+                    key={user.id}
+                    user={user}
+                    sandboxId={data.id}
+                  />
                 ))}
               </div>
             </div>
diff --git a/frontend/components/editor/navbar/sharedUser.tsx b/frontend/components/editor/navbar/sharedUser.tsx
index 6f3c54b..feb2954 100644
--- a/frontend/components/editor/navbar/sharedUser.tsx
+++ b/frontend/components/editor/navbar/sharedUser.tsx
@@ -10,7 +10,7 @@ export default function SharedUser({
   user,
   sandboxId,
 }: {
-  user: { id: string; name: string }
+  user: { id: string; name: string; avatarUrl: string }
   sandboxId: string
 }) {
   const [loading, setLoading] = useState(false)
@@ -24,7 +24,7 @@ export default function SharedUser({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center">
-        <Avatar name={user.name} className="mr-2" />
+        <Avatar name={user.name} avatarUrl={user.avatarUrl} className="mr-2" />
         {user.name}
       </div>
       <Button
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
index 98767c8..32e09ff 100644
--- a/frontend/components/ui/avatar.tsx
+++ b/frontend/components/ui/avatar.tsx
@@ -1,23 +1,42 @@
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 export default function Avatar({
   name,
+  avatarUrl,
   className,
 }: {
   name: string
+  avatarUrl?: string | null
   className?: string
 }) {
+  // Generate initials from name if no avatarUrl is provided
+  const initials = name
+    ? name
+        .split(" ")
+        .slice(0, 2)
+        .map((letter) => letter[0].toUpperCase())
+        .join("")
+    : "?"
+
   return (
     <div
       className={cn(
         className,
-        "w-5 h-5 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-[0.5rem] font-medium"
+        "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"
       )}
     >
-      {name
-        .split(" ")
-        .slice(0, 2)
-        .map((letter) => letter[0].toUpperCase())}
+      {avatarUrl ? (
+        <Image
+          src={avatarUrl}
+          alt={name || "User"}
+          width={20}
+          height={20}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        initials
+      )}
     </div>
   )
 }
diff --git a/frontend/components/ui/userButton.tsx b/frontend/components/ui/userButton.tsx
index ba4eadf..7d56d87 100644
--- a/frontend/components/ui/userButton.tsx
+++ b/frontend/components/ui/userButton.tsx
@@ -11,6 +11,7 @@ import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import { LogOut, Sparkles } from "lucide-react"
 import { useRouter } from "next/navigation"
+import Avatar from "./avatar"
 
 export default function UserButton({ userData }: { userData: User }) {
   if (!userData) return null
@@ -21,13 +22,7 @@ export default function UserButton({ userData }: { userData: User }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <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 &&
-            userData.name
-              .split(" ")
-              .slice(0, 2)
-              .map((name) => name[0].toUpperCase())}
-        </div>
+        <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-48" align="end">
         <div className="py-1.5 px-2 w-full">
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index 57c7378..84e88f9 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -5,6 +5,12 @@ const nextConfig = {
       {
         hostname: "cdn.simpleicons.org",
       },
+      {
+        hostname: "img.clerk.com",
+      },
+      {
+        hostname: "images.clerk.dev",
+      },
     ],
   },
 }