app/ui/invitations/board.tsx

@@ -4,11 +4,17 @@ import { AbstractApi } from "@/app/api/abstract-api";
 import { Guest } from "@/app/lib/guest";
 import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { TrashIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef } from "react";
 import { useState } from "react";
 
-function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {
-
+function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
+  invitation: Invitation,
+  allGuests: Guest[],
+  onGuestAdded: (guest: Guest) => void,
+  onDestroy: (invitation: Invitation) => void
+}
+) {
   const [guests, setGuests] = useState<Guest[]>(invitation.guests);
 
   const ref = useRef<HTMLDivElement | null>(null);
@@ -42,9 +48,18 @@ function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: I
     <div
       key={invitation.id}
       ref={ref}
-      className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+      className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
       style={{ aspectRatio: "1.618 / 1" }}
     >
+      <TrashIcon
+        className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
+        onClick={() => {
+          api.destroy(serializer, invitation, () => {
+            onDestroy(invitation);
+          });
+        }}
+      />
+
       {guests.length === 0 ? (
         <p className="text-center text-yellow-500 text-lg italic">
           (empty invitation)
@@ -149,6 +164,13 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
               onGuestAdded={(guestAdded: Guest) => {
                 setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
               }}
+              onDestroy={(invitationToDestroy: Invitation) => {
+                setInvitations((prevInvitations) => prevInvitations.filter(i => i.id !== invitationToDestroy.id));
+                setUnassignedGuests((prevUnassignedGuests) => [
+                  ...prevUnassignedGuests,
+                  ...invitationToDestroy.guests
+                ]);
+              }}
             />
           ))}
         </div>