From 0d2b18217d00ee32b9bb1a0ea1fc9b1f8c2b2d34 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Wed, 20 Nov 2024 22:50:17 -0500
Subject: [PATCH] Update participants page UI

---
 src/app/api/participants/[id]/route.ts  |   6 +-
 src/app/dashboard/participants/page.tsx | 126 +++++++++++++++++-------
 2 files changed, 96 insertions(+), 36 deletions(-)

diff --git a/src/app/api/participants/[id]/route.ts b/src/app/api/participants/[id]/route.ts
index 3dc79c5..2cc878f 100644
--- a/src/app/api/participants/[id]/route.ts
+++ b/src/app/api/participants/[id]/route.ts
@@ -4,15 +4,15 @@ import { auth } from "@clerk/nextjs/server";
 import { db } from "~/db";
 import { participants } from "~/db/schema";
 
-export async function DELETE(request: Request, { params }: { params: { id: string } }) {
+
+export async function DELETE(request: Request, { params }: any) {
     const { userId } = await auth();
 
     if (!userId) {
         return new NextResponse("Unauthorized", { status: 401 });
     }
 
-    const { id } = await params;
-    const participantId = parseInt(id);
+    const participantId = parseInt(params.id);
 
     try {
         const result = await db
diff --git a/src/app/dashboard/participants/page.tsx b/src/app/dashboard/participants/page.tsx
index a22c635..5dbab1d 100644
--- a/src/app/dashboard/participants/page.tsx
+++ b/src/app/dashboard/participants/page.tsx
@@ -1,18 +1,24 @@
 'use client';
 
+import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "~/components/ui/card";
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription,
+  CardFooter 
+} from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
-import { PlusIcon, Trash2Icon } from "lucide-react";
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectItem,
-  SelectLabel,
+  SelectTrigger,
+  SelectValue
 } from "~/components/ui/select";
 
 interface Study {
@@ -51,7 +57,13 @@ export default function Participants() {
 
   const fetchParticipants = async (studyId: number) => {
     try {
+      console.log(`Fetching participants for studyId: ${studyId}`);
       const response = await fetch(`/api/participants?studyId=${studyId}`);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
       const data = await response.json();
       setParticipants(data);
     } catch (error) {
@@ -115,26 +127,42 @@ export default function Participants() {
 
   return (
     <div className="max-w-4xl mx-auto">
-      <h1 className="text-3xl font-bold mb-4">Manage Participants</h1>
-      <div className="mb-4">
-        <Label htmlFor="study">Select Study</Label>
-        <Select onValueChange={handleStudyChange}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select a study" />
-          </SelectTrigger>
-          <SelectContent>
-            {studies.map((study) => (
-              <SelectItem key={study.id} value={study.id.toString()}>
-                {study.title}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold">Participants</h1>
       </div>
 
-      <Card>
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle>Study Selection</CardTitle>
+          <CardDescription>
+            Select a study to manage its participants
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <Label htmlFor="study">Select Study</Label>
+            <Select onValueChange={handleStudyChange}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a study" />
+              </SelectTrigger>
+              <SelectContent>
+                {studies.map((study) => (
+                  <SelectItem key={study.id} value={study.id.toString()}>
+                    {study.title}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-8">
         <CardHeader>
           <CardTitle>Add New Participant</CardTitle>
+          <CardDescription>
+            Add a new participant to the selected study
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={addParticipant} className="space-y-4">
@@ -156,18 +184,50 @@ export default function Participants() {
         </CardContent>
       </Card>
 
-      <div className="mt-4">
-        <h2 className="text-xl font-semibold">Participant List</h2>
-        <ul>
-          {participants.map((participant) => (
-            <li key={participant.id} className="flex justify-between items-center">
-              <span>{participant.name}</span>
-              <Button onClick={() => deleteParticipant(participant.id)} variant="destructive">
-                <Trash2Icon className="w-4 h-4" />
-              </Button>
-            </li>
-          ))}
-        </ul>
+      <div className="grid gap-4">
+        {participants.map((participant) => (
+          <Card key={participant.id}>
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle>{participant.name}</CardTitle>
+                  <CardDescription className="mt-1.5">
+                    Participant ID: {participant.id}
+                  </CardDescription>
+                </div>
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  className="text-destructive"
+                  onClick={() => deleteParticipant(participant.id)}
+                >
+                  <Trash2Icon className="w-4 h-4" />
+                </Button>
+              </div>
+            </CardHeader>
+            <CardFooter className="text-sm text-muted-foreground">
+              Study ID: {participant.studyId}
+            </CardFooter>
+          </Card>
+        ))}
+        {participants.length === 0 && selectedStudyId && (
+          <Card>
+            <CardContent className="py-8">
+              <p className="text-center text-muted-foreground">
+                No participants found for this study. Add one above to get started.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+        {!selectedStudyId && (
+          <Card>
+            <CardContent className="py-8">
+              <p className="text-center text-muted-foreground">
+                Please select a study to view its participants.
+              </p>
+            </CardContent>
+          </Card>
+        )}
       </div>
     </div>
   );