Merge pull request 'Adapt the guests table to use the new API format' (#105) from guests-api-changes into main

Reviewed-on: #105

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 = {

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>
               </>
             )}

tests/guests.spec.ts

@@ -2,32 +2,26 @@ import { test, expect, Page } from '@playwright/test'
 
 const mockGuestsAPI = ({ page }: { page: Page }) => {
   page.route('*/**/api/guests.json', async route => {
-    const json = {
-      data: [
-        {
-          "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
-          "type": "guest",
-          "attributes": {
-            "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
-            "group_id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
-            "status": "Tentative",
-            "name": "Kristofer Rohan DVM",
-            "group_name": "Childhood friends"
-          }
-        },
-        {
-          "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
-          "type": "guest",
-          "attributes": {
-            "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
-            "group_id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
-            "status": "Invited",
-            "name": "Olevia Quigley Jr.",
-            "group_name": "Work"
-          }
-        },
-      ]
-    };
+    const json = [
+      {
+        "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
+        "status": "tentative",
+        "name": "Kristofer Rohan DVM",
+        "group": {
+          "id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
+          "name": "Childhood friends",
+        }
+      },
+      {
+        "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
+        "status": "invited",
+        "name": "Olevia Quigley Jr.",
+        "group": {
+          "id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
+          "name": "Work",
+        }
+      },
+    ];
 
     await route.fulfill({ json })
   })