add button to guests to be able to be removed (#9)

Author: kmordan24

app/assets/stylesheets/application.css

@@ -152,6 +152,7 @@ input[type="submit"] {
   position: relative;
   display: flex;
   margin-bottom: 0.5rem;
+  width: 50%;
 
   label {
     visibility: hidden;
@@ -166,6 +167,15 @@ input[type="submit"] {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
   }
+
+  button {
+    flex: 1 0 auto;
+    width: 100px;
+  }
+
+  .guest-item-remove {
+    background-color: #3A3B3C;
+  }
 }
 
 .guest-item-error {

app/javascript/event_guests_manager/components/GuestManager.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { addGuest, getGuestList } from "../utils";
+import { addGuest, getGuestList, removeGuest } from "../utils";
 
 export const GuestManager = () => {
   const [guests, setGuests] = useState([]);
@@ -46,6 +46,19 @@ export const GuestManager = () => {
     [newGuest],
   );
 
+  const handleRemoveGuest = useCallback(
+    (guestId) => async () => {
+      try {
+        await removeGuest(guestId);
+        const nextGuestList = await getGuestList();
+        setGuests(nextGuestList);
+      } catch (e) {
+        setError("An error occurred while removing the guest.");
+      }
+    },
+    [],
+  );
+
   return (
     <form aria-labelledby="guest-manager-heading" onSubmit={handleAddGuest}>
       {error && <div className="guest-item-error">{error}</div>}
@@ -71,6 +84,13 @@ export const GuestManager = () => {
             disabled
             readOnly
           />
+          <button
+            type="button"
+            onClick={handleRemoveGuest(guest.id)}
+            className="guest-item-remove"
+          >
+            Remove
+          </button>
         </div>
       ))}
       <div className="guest-item">

app/javascript/event_guests_manager/utils/GuestUtils.js

@@ -29,3 +29,20 @@ export const addGuest = async ({ name, email }) => {
     throw new Error("Failed to add guest");
   }
 };
+
+export const removeGuest = async (guestId) => {
+  try {
+    const response = await fetch(
+      `${window.location.pathname}/guests/${guestId}`,
+      {
+        method: "DELETE",
+      },
+    );
+    if (!response.ok) {
+      throw new Error("Failed to remove guest");
+    }
+  } catch (error) {
+    console.error("Error removing guest:", error);
+    throw new Error("Failed to remove guest");
+  }
+};