Refactor guests API

app/api/guests.tsx

@@ -18,17 +18,16 @@ export function loadGuests(onLoad?: (guests: Guest[]) => void) {
     });
 };
 
-export function updateGuestStatus(id: string, status: string) {
-  fetch("/api/guests/bulk_update.json",
+export function updateGuest(guest: Guest) {
+  fetch(`/api/guests/${guest.id}`,
     {
-      method: 'POST',
-      body: JSON.stringify({ properties: { status: status }, guest_ids: [id] }),
+      method: 'PUT',
+      body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
       headers: {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
       }
     })
-    .then(() => loadGuests((guests) => null))
     .catch((error) => console.error(error));
 }
 

app/dashboard/guests/page.tsx

@@ -10,7 +10,7 @@ import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Suspense, useState } from 'react';
-import { loadGuests, updateGuestStatus } from '@/app/api/guests';
+import { loadGuests } from '@/app/api/guests';
 import { loadGroups } from '@/app/api/groups';
 
 export default function Page() {
@@ -46,7 +46,7 @@ export default function Page() {
           <div className="flex flex-col w-full items-center justify-between">
             <CreationDialog groups={groups} onCreate={refreshGuests} />
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable guests={guests} updateGuestStatus={updateGuestStatus} />
+              <GuestsTable guests={guests} />
             </Suspense>
           </div>
         </ TabPanel>

app/lib/definitions.ts

@@ -18,12 +18,13 @@ export type Customer = {
   image_url: string;
 };
 
+export type GuestStatus = 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
 export type Guest = {
   id: string;
   name: string;
   group_name?: string;
   color?: string;
-  status?: 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
+  status?: GuestStatus
 }
 
 export type Expense = {

app/ui/guests/table.tsx

@@ -2,38 +2,18 @@
 
 'use client';
 
-import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
+import { updateGuest } from '@/app/api/guests';
+import { Guest, GuestStatus } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import clsx from 'clsx';
-import React from 'react';
 import InlineTextField from '../components/form/inlineTextField';
 import TableOfContents from '../components/table-of-contents';
 
-export default function guestsTable({ guests, updateGuestStatus }: { guests: Guest[], updateGuestStatus: (id: string, status: string) => void }) {
-  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
-  const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
-  const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
-  const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
-
-  const handleGuestUpdate = (guest: Guest) => {
-    fetch(`/api/guests/${guest.id}`,
-      {
-        method: 'PUT',
-        body: JSON.stringify({ guest: { name: guest.name } }),
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-TOKEN': getCsrfToken(),
+export default function guestsTable({ guests }: { guests: Guest[] }) {
+  const handleGuestChange = (guest: Guest, status: GuestStatus) => {
+    guest.status = status;
+    updateGuest(guest);
   }
-      })
-      .catch((error) => console.error(error));
-  }
-
-
-  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status: string) => {
-    updateGuestStatus(e.currentTarget.getAttribute('data-guest-id') || '', status);
-  }
-
 
   return (
     <TableOfContents
@@ -43,7 +23,7 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
       rowRender={(guest) => (
         <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
           <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; handleGuestUpdate(guest) }} />
+            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; updateGuest(guest) }} />
           </td>
           <td className="px-6 py-4">
             {guest.group_name}
@@ -65,14 +45,14 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
             </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={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
               Invite
             </button>)}
             {(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>}
-                <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
+                <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>
               </>
             )}
           </td>