From 567ce207cf9028e6aff3ffc82357af0d08d987ff Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sat, 16 Nov 2024 00:45:45 +0100
Subject: [PATCH] Adapt the guests table to use the new API format

---
 app/lib/definitions.ts  |  2 +-
 app/ui/guests/table.tsx | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
index 572914b..f1d3641 100644
--- a/app/lib/definitions.ts
+++ b/app/lib/definitions.ts
@@ -23,7 +23,7 @@ export type Guest = {
   name: string;
   group_name?: string;
   color?: string;
-  status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+  status?: 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
 }
 
 export type Expense = {
diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 6e8d5ad..6d93e3b 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -17,12 +17,12 @@ export default function guestsTable() {
     fetch("/api/guests.json")
       .then((response) => response.json())
       .then((data) => {
-        setGuests(data.data.map((record: any) => {
+        setGuests(data.map((record: any) => {
           return ({
             id: record.id,
-            name: record.attributes.name,
-            group_name: record.attributes.group_name,
-            status: record.attributes.status
+            name: record.name,
+            status: record.status,
+            group_name: record.group.name,
           });
         }));
       }, (error) => {
@@ -82,11 +82,11 @@ export default function guestsTable() {
               <span className={clsx(
                 'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
                 {
-                  'bg-gray-400': guest.status === 'Considered',
-                  'bg-blue-400': guest.status === 'Invited',
-                  'bg-green-600': guest.status === 'Confirmed',
-                  'bg-red-400': guest.status === 'Declined',
-                  'bg-yellow-400': guest.status === 'Tentative',
+                  'bg-gray-400': guest.status === 'considered',
+                  'bg-blue-400': guest.status === 'invited',
+                  'bg-green-600': guest.status === 'confirmed',
+                  'bg-red-400': guest.status === 'declined',
+                  'bg-yellow-400': guest.status === 'tentative',
                 }
               )}>
               </span>
@@ -94,13 +94,13 @@ export default function guestsTable() {
             </span>
           </td>
           <td>
-            {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
+            {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
               Invite
             </button>)}
-            {(guest.status === 'Invited' || guest.status === 'Tentative') && (
+            {(guest.status === 'invited' || guest.status === 'tentative') && (
               <>
                 <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
-                {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
+                {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
                 <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
               </>
             )}