feat: add registrants avatar

Author: Raphico

README.md

@@ -32,6 +32,7 @@ The architecture of this project revolves around a streamlined development and d
 - [x] Add auth with lucia
 - [x] Workshop creation
 - [x] Edit workshop
+- [x] Complete workshop page
 - [ ] Interactive workshop session(e.g video conferencing, live chat code editor)
 - [x] Delete workshop
 - [x] Participant registration

src/app/(app)/_components/user-dropdown.tsx

@@ -38,7 +38,7 @@ export function UserDropdown({ user }: UserDropdownProps) {
       <DropdownMenuTrigger asChild>
         <Button variant="secondary" className="size-8 rounded-full">
           <Avatar className="size-8">
-            <AvatarImage src={user.image} />
+            <AvatarImage src={user.image} alt={`@${user.username}`} />
             <AvatarFallback>{initial}</AvatarFallback>
           </Avatar>
         </Button>

src/app/(app)/workshop/[workshopId]/_components/workshop-registrants.tsx

@@ -1,21 +1,33 @@
-import { getWorkshopRegistrants } from "@/server/data/workshop"
+import { type getWorkshopRegistrants } from "@/server/data/registration"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
 interface WorkshopRegistrantsProps {
-  workshopId: string
+  registrants: Awaited<ReturnType<typeof getWorkshopRegistrants>>
 }
 
-export async function WorkshopRegistrants({
-  workshopId,
-}: WorkshopRegistrantsProps) {
-  const registrants = await getWorkshopRegistrants(workshopId)
+export function WorkshopRegistrants({ registrants }: WorkshopRegistrantsProps) {
+  const displayedRegistrants = registrants.slice(0, 4)
+  const extraRegistrantsCount = registrants.length - displayedRegistrants.length
 
-  if (!registrants.length) {
-    return
-  }
+  return (
+    <div className="flex -space-x-4 rtl:space-x-reverse">
+      {displayedRegistrants.map((registrant) => (
+        <Avatar key={registrant.id}>
+          <AvatarImage
+            src={registrant.image ?? ""}
+            alt={`@${registrant.username}`}
+          />
+          <AvatarFallback>
+            {registrant.username?.charAt(0) ?? "R"}
+          </AvatarFallback>
+        </Avatar>
+      ))}
 
-  if (registrants.length <= 3) {
-    return <></>
-  }
-
-  return <></>
+      {extraRegistrantsCount && (
+        <div className="z-50 flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-white">
+          +{extraRegistrantsCount}
+        </div>
+      )}
+    </div>
+  )
 }

src/app/(app)/workshop/[workshopId]/loading.tsx

@@ -32,6 +32,11 @@ export default function WorkshopLoading() {
           />
           <Skeleton className="h-5 w-10" />
         </div>
+        <div className="flex -space-x-4 rtl:space-x-reverse">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="size-10 rounded-full" />
+          ))}
+        </div>
       </div>
 
       <Separator />

src/app/(app)/workshop/[workshopId]/page.tsx

@@ -5,8 +5,9 @@ import { env } from "@/env"
 import { eq } from "drizzle-orm"
 
 import { redirects } from "@/config/constants"
+import { getWorkshopRegistrants } from "@/server/data/registration"
 import { getUserSession } from "@/server/data/user"
-import { getWorkshop, getWorkshopRegistrants } from "@/server/data/workshop"
+import { getWorkshop } from "@/server/data/workshop"
 import { db } from "@/server/db"
 import { workshops } from "@/server/db/schema"
 import { getExactScheduled } from "@/utils/format-scheduled-date"
@@ -113,9 +114,7 @@ export default async function WorkshopPage({ params }: WorkshopPageProps) {
           </p>
         </div>
 
-        <React.Suspense>
-          <WorkshopRegistrants workshopId={workshop.id} />
-        </React.Suspense>
+        <WorkshopRegistrants registrants={registrants} />
       </div>
 
       <Separator />

src/server/data/registration.ts

@@ -6,17 +6,18 @@ import { eq } from "drizzle-orm"
 import { db } from "../db"
 import { registrations, users } from "../db/schema"
 
-export async function getWorkshopRegistrants(workshopId: string) {
+export async function getWorkshopRegistrants(currentWorkshopId: string) {
   noStore()
   try {
-    await db
+    return await db
       .select({
         id: users.id,
+        username: users.username,
         image: users.image,
       })
       .from(registrations)
       .innerJoin(users, eq(registrations.registrantId, users.id))
-      .where(eq(registrations.workshopId, workshopId))
+      .where(eq(registrations.workshopId, currentWorkshopId))
   } catch (err) {
     return []
   }

src/server/data/workshop.ts

@@ -7,7 +7,7 @@ import {
 import { asc, eq } from "drizzle-orm"
 
 import { db } from "../db"
-import { registrations, users, workshops } from "../db/schema"
+import { users, workshops } from "../db/schema"
 
 export async function getWorkshop(workshopId: string) {
   try {
@@ -70,22 +70,6 @@ export async function getWorkshops() {
   }
 }
 
-export async function getWorkshopRegistrants(currentWorkshopId: string) {
-  noStore()
-  try {
-    return await db
-      .select({
-        id: users.id,
-        image: users.image,
-      })
-      .from(registrations)
-      .innerJoin(users, eq(registrations.registrantId, users.id))
-      .where(eq(registrations.workshopId, currentWorkshopId))
-  } catch (err) {
-    return []
-  }
-}
-
 export async function getWorkshopOrganizer(organizerId: string) {
   return await cache(async () => {
     return await db.query.users.findFirst({