app/api/guests.tsx

@@ -48,3 +48,17 @@ export function createGuest(name: string, group_id: string, onCreate?: () => voi
     })
     .catch((error) => console.error(error));
 }
+
+export function destroyGuest(guest: Guest, onDestroy?: () => void) {
+  fetch(`/api/guests/${guest.id}`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      onDestroy && onDestroy();
+    })
+    .catch((error) => console.error(error));
+}

app/ui/guests/table.tsx

@@ -2,12 +2,13 @@
 
 'use client';
 
-import { updateGuest } from '@/app/api/guests';
+import { destroyGuest, updateGuest } from '@/app/api/guests';
 import { Guest, GuestStatus } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import clsx from 'clsx';
 import InlineTextField from '../components/form/inlineTextField';
 import TableOfContents from '../components/table-of-contents';
+import { TrashIcon } from '@heroicons/react/24/outline';
 
 export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onUpdate: () => void }) {
   const handleGuestChange = (guest: Guest, status: GuestStatus) => {
@@ -45,6 +46,7 @@ export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onU
             </span>
           </td>
           <td>
+            <div className="flex flex-row items-center">
               {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
                 Invite
               </button>)}
@@ -55,6 +57,8 @@ export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onU
                   <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
                 </>
               )}
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
+            </div>
           </td>
         </tr>
       )}