refactor: Include avatar in User model and update related components

auth.config.mjs

@@ -29,6 +29,7 @@ export default defineConfig({
                         id: profile.sub,
                         username: user.name.toLowerCase(),
                         displayName: profile.preferred_username,
+                        avatar: profile.picture,
                         twitchTier: tier,
                     })
 

db/config.ts

@@ -5,6 +5,7 @@ const User = defineTable({
     id: column.text({ primaryKey: true, unique: true }),
     username: column.text({ unique: true }),
     displayName: column.text(),
+    avatar: column.text({ optional: true }),
     twitchTier: column.number({ optional: true }),
   }
 })

src/components/SharedMemberCard.tsx

@@ -0,0 +1,30 @@
+import { useState } from "preact/hooks"
+import { Container3D } from "./Container3D"
+import { MemberCard } from "./MemberCard"
+
+export const SharedMemberCard = ({ stickers = [], number, avatar, username }: { stickers: string[], number: number, avatar: string, username: string }) => {
+    const [selectedStickers, setSelectedStickers] = useState(() => {
+        const stickersList = new Array(3).fill(null)
+        stickers.forEach((sticker, index) => {
+            stickersList[index] = sticker
+        })
+        return {
+            limit: 3,
+            list: stickersList,
+        }
+    })
+
+    return (
+        <Container3D>
+            <MemberCard
+                className="max-w-[400px] md:max-w-[700px] mx-auto"
+                number={number}
+                selectedStickers={selectedStickers}
+                user={{
+                    avatar,
+                    username,
+                }}
+            />
+        </Container3D>
+    )
+}

src/pages/member-card.astro

@@ -1,42 +1,51 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import type { Session } from "@auth/core/types";
-import { Container3D } from "@components/Container3D";
 import { getSession } from "auth-astro/server";
-import { MemberCard as MemberCardComponent } from "@components/MemberCard";
 import { MyMemberCard } from "@components/MyMemberCard";
 import { getMemberCardData, getUserTier } from "@/utils/users";
+import { SharedMemberCard } from "@components/SharedMemberCard";
+
+const { memberId } = Object.fromEntries(Astro.url.searchParams)
 
-const { memberId } = Astro.params
 
 const isSharedMemberCard = memberId !== undefined
 
 let session: Session | null = null
 let stickers : string[] = []
 let tier: number | null = null
+let dbMemberCard: any = null
 
 if (!isSharedMemberCard) {
     session = await getSession(Astro.request)
     if(!session) {
         return new Response(null, { status: 404 })
     }
 
-    let dbMemberCard = await getMemberCardData(parseInt(session?.user?.id as string))
+    dbMemberCard = await getMemberCardData(parseInt(session?.user?.id as string))
     tier = await getUserTier(session?.user?.id as string)
     stickers = dbMemberCard?.stickers as string[]
+} else {
+    dbMemberCard = await getMemberCardData(parseInt(memberId as string))
+    if (!dbMemberCard) {
+        return new Response(null, { status: 404 })
+    }
+    tier = await getUserTier(memberId as string)
+    stickers = dbMemberCard?.stickers as string[]
 }
 
+const computedTitle = isSharedMemberCard ? `Member card of ${dbMemberCard.User.displayName} - The Tangerine Club` : "Member Card - The Tangerine Club"
 
 ---
 
 <Layout
-    title="Member Card - The Tangerine Club"
+    title={computedTitle}
     description="">
 
     <section class="max-w-screen-xl m-auto mt-40 pb-20 gap-8 px-4 flex flex-col lg:grid grid-cols-[auto_1fr] items-center">
 
         {
-            session && (
+            session && !isSharedMemberCard && (
                     <MyMemberCard session={session} 
                     stickers={stickers}
                     tier={tier}
@@ -45,6 +54,18 @@ if (!isSharedMemberCard) {
 
             )
         }
+
+        {
+            isSharedMemberCard && dbMemberCard && (
+                <SharedMemberCard
+                    number={parseInt(memberId as string)}
+                    stickers={dbMemberCard.MemberCards.stickers}
+                    username={dbMemberCard.User.displayName}
+                    avatar={dbMemberCard.User.avatar}
+                    client:only
+                    />
+            )
+        }
     </section>
 
 </Layout>

src/utils/users.ts

@@ -8,18 +8,20 @@ export const isAdmin = (username: string) => ADMINS.includes(username)
     Admins can approve messages on the Tangerine Board
 */
 
-export const createOrUpdateUser = async ({ id, username, displayName, twitchTier }: { id: string, username: string, displayName: string, twitchTier: number }) => {
+export const createOrUpdateUser = async ({ id, username, displayName, twitchTier, avatar }: { id: string, username: string, displayName: string, twitchTier: number, avatar: string }) => {
     try {
         await db.insert(User).values({
             id,
             username,
             displayName,
+            avatar,
             twitchTier
         }).onConflictDoUpdate({
             target: [User.id],
             set: {
                 username,
                 displayName,
+                avatar,
                 twitchTier
             }
         })
@@ -29,7 +31,11 @@ export const createOrUpdateUser = async ({ id, username, displayName, twitchTier
 }
 
 export const getMemberCardData = async (memberId: number) => {
-    const card = await db.select().from(MemberCards).where(eq(MemberCards.userId, memberId.toString())).limit(1)
+    const card = await db.select()
+        .from(MemberCards)
+        .where(eq(MemberCards.userId, memberId.toString()))
+        .innerJoin(User, eq(User.id, MemberCards.userId))
+        .limit(1)
 
     if (card.length === 0) {
         return null