Implement participant unregistration feature with UI updates and tests

Author: makinsc

requirements.txt

@@ -1,2 +1,5 @@
+pytest
+httpx
+pytest-asyncio
 fastapi
 uvicorn

src/app.py

@@ -1,3 +1,4 @@
+
 """
 High School Management System API
 
@@ -87,6 +88,16 @@ def root():
 def get_activities():
     return activities
 
+@app.post("/activities/{activity_name}/unregister")
+def unregister_participant(activity_name: str, email: str):
+    """Remove a participant from an activity"""
+    if activity_name not in activities:
+        raise HTTPException(status_code=404, detail="Activity not found")
+    activity = activities[activity_name]
+    if email not in activity["participants"]:
+        raise HTTPException(status_code=404, detail="Participant not found in this activity")
+    activity["participants"].remove(email)
+    return {"message": f"Removed {email} from {activity_name}"}
 
 @app.post("/activities/{activity_name}/signup")
 def signup_for_activity(activity_name: str, email: str):

src/static/app.js

@@ -20,14 +20,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
         const spotsLeft = details.max_participants - details.participants.length;
 
-        // Create participants list HTML
+        // Create participants list HTML with delete icon to the left
         let participantsHTML = "";
         if (details.participants.length > 0) {
           participantsHTML = `
             <div class="participants-section">
               <strong>Participants:</strong>
               <ul class="participants-list">
-                ${details.participants.map(email => `<li>${email}</li>`).join("")}
+                ${details.participants.map(email => `
+                  <li>
+                    <span class="delete-participant" title="Remove participant" data-activity="${encodeURIComponent(name)}" data-email="${encodeURIComponent(email)}">&#128465;</span>
+                    <span class="participant-email">${email}</span>
+                  </li>
+                `).join("")}
               </ul>
             </div>
           `;
@@ -56,6 +61,29 @@ document.addEventListener("DOMContentLoaded", () => {
         option.textContent = name;
         activitySelect.appendChild(option);
       });
+
+      // Add event listeners for delete icons
+      document.querySelectorAll(".delete-participant").forEach(icon => {
+        icon.addEventListener("click", async (e) => {
+          const activity = decodeURIComponent(icon.getAttribute("data-activity"));
+          const email = decodeURIComponent(icon.getAttribute("data-email"));
+          if (confirm(`Remove ${email} from ${activity}?`)) {
+            try {
+              const response = await fetch(`/activities/${encodeURIComponent(activity)}/unregister?email=${encodeURIComponent(email)}`, {
+                method: "POST"
+              });
+              const result = await response.json();
+              if (response.ok) {
+                fetchActivities();
+              } else {
+                alert(result.detail || "Failed to remove participant.");
+              }
+            } catch (err) {
+              alert("Failed to remove participant.");
+            }
+          }
+        });
+      });
     } catch (error) {
       activitiesList.innerHTML = "<p>Failed to load activities. Please try again later.</p>";
       console.error("Error fetching activities:", error);

src/static/styles.css

@@ -159,11 +159,24 @@ footer {
 }
 
 .participants-list {
-  list-style-type: disc;
-  margin-left: 20px;
+  list-style-type: none;
+  margin-left: 0;
   margin-bottom: 0;
   color: #333;
   font-size: 15px;
+  padding-left: 0;
+}
+
+.delete-participant {
+  color: #c00;
+  cursor: pointer;
+  margin-left: 0.5em;
+  font-size: 1.1em;
+  vertical-align: middle;
+  transition: color 0.2s;
+}
+.delete-participant:hover {
+  color: #f33;
 }
 
 .no-participants {

tests/test_app.py

@@ -0,0 +1,39 @@
+import pytest
+from fastapi.testclient import TestClient
+from src.app import app
+
+client = TestClient(app)
+
+def test_get_activities():
+    response = client.get("/activities")
+    assert response.status_code == 200
+    data = response.json()
+    assert isinstance(data, dict)
+    assert "Chess Club" in data
+    assert "participants" in data["Chess Club"]
+
+def test_signup_for_activity():
+    email = "testuser@mergington.edu"
+    activity = "Chess Club"
+    # Remove if already present
+    client.post(f"/activities/{activity}/unregister?email={email}")
+    response = client.post(f"/activities/{activity}/signup?email={email}")
+    assert response.status_code == 200
+    assert f"Signed up {email} for {activity}" in response.json()["message"]
+    # Try duplicate signup
+    response2 = client.post(f"/activities/{activity}/signup?email={email}")
+    assert response2.status_code == 400
+    # Clean up
+    client.post(f"/activities/{activity}/unregister?email={email}")
+
+def test_unregister_participant():
+    email = "removeuser@mergington.edu"
+    activity = "Programming Class"
+    # Ensure user is signed up
+    client.post(f"/activities/{activity}/signup?email={email}")
+    response = client.post(f"/activities/{activity}/unregister?email={email}")
+    assert response.status_code == 200
+    assert f"Removed {email} from {activity}" in response.json()["message"]
+    # Try removing again
+    response2 = client.post(f"/activities/{activity}/unregister?email={email}")
+    assert response2.status_code == 404