From 6e598e537bd7112175d1723b31e765cb2021f585 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 17 Nov 2024 18:29:50 +0100
Subject: [PATCH] Allow removing a guest

---
 app/api/guests.tsx      | 14 ++++++++++++++
 app/ui/guests/table.tsx | 26 +++++++++++++++-----------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/api/guests.tsx b/app/api/guests.tsx
index 37d0126..77a6764 100644
--- a/app/api/guests.tsx
+++ b/app/api/guests.tsx
@@ -47,4 +47,18 @@ export function createGuest(name: string, group_id: string, onCreate?: () => voi
       onCreate && onCreate();
     })
     .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));
 }
\ No newline at end of file
diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 143147b..f7d0aa9 100644
--- a/app/ui/guests/table.tsx
+++ b/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,16 +46,19 @@ export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onU
             </span>
           </td>
           <td>
-            {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
-              Invite
-            </button>)}
-            {(guest.status === 'invited' || guest.status === 'tentative') && (
-              <>
-                <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
-                {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
-                <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
-              </>
-            )}
+            <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>)}
+              {(guest.status === 'invited' || guest.status === 'tentative') && (
+                <>
+                  <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
+                  {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
+                  <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>
       )}
-- 
2.47.1