participants can be printed

Author: phillipnguyenn

client/src/pages/events/[id].tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 
 import { Button } from "@/components/ui/button";
 import TagList from "@/components/ui/tag-list";
-import { useEvent } from "@/hooks/event";
+import { useEvent } from "@/hooks/events";
 
 import ActionLayout from "../layouts/actionlayout";
 

client/src/pages/events/[id]/participants.tsx

@@ -2,11 +2,15 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { Button } from "@/components/ui/button";
+import { useEvent } from "@/hooks/events";
 import ActionLayout from "@/pages/layouts/actionlayout";
 
 export default function ParticipantsPage() {
   const router = useRouter();
   const { id } = router.query;
+  const eventId = Number(id);
+
+  const { data: event, isLoading } = useEvent(eventId);
 
   return (
     <>
@@ -21,12 +25,25 @@ export default function ParticipantsPage() {
           </Button>
         }
         primaryAction={
-          <Link href={"/events/" + id + "/participants"} className="flex-1">
+          <Link
+            href={"/events/" + eventId + "/participants"}
+            className="flex-1"
+          >
             <Button className="w-full rounded-full">Unused Button</Button>
           </Link>
         }
       >
-        <div>Participants for event {id}</div>
+        {!isLoading && event?.participants && event.participants.length > 0 && (
+          <div>
+            {event.participants.map((p) => (
+              <p key={p.id}>{p.username}</p>
+            ))}
+          </div>
+        )}
+
+        {!isLoading && event?.participants?.length === 0 && (
+          <p>No participants yet.</p>
+        )}
       </ActionLayout>
     </>
   );