app/api/guests.tsx

@@ -25,7 +25,7 @@ export function updateGuest(guest: Guest) {
   return fetch(`/api/${getSlug()}/guests/${guest.id}`,
     {
       method: 'PUT',
-      body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
+      body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
       headers: {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
@@ -34,10 +34,10 @@ export function updateGuest(guest: Guest) {
     .catch((error) => console.error(error));
 }
 
-export function createGuest(guest: Guest, onCreate?: () => void) {
+export function createGuest(name: string, group_id: string, onCreate?: () => void) {
   fetch(`/api/${getSlug()}/guests`, {
     method: 'POST',
-    body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
+    body: JSON.stringify({ name: name, group_id: group_id }),
     headers: {
       'Content-Type': 'application/json',
       'X-CSRF-TOKEN': getCsrfToken(),

app/lib/definitions.ts

@@ -1,12 +1,6 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-// This file contains type definitions for your data.
+export type GuestStatus = 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
-// It describes the shape of the data, and what data type each property should accept.
-// For simplicity of teaching, we're manually defining these types.
-// However, these types are generated automatically if you're using an ORM such as Prisma.
-
-export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
-export type GuestStatus = typeof guestStatuses[number];
 export type Guest = {
   id?: string;
   name?: string;

app/ui/components/guest-form-dialog.tsx

@@ -3,8 +3,7 @@
 'use client';
 
 import { createGuest, updateGuest } from '@/app/api/guests';
-import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
+import { Group, Guest } from '@/app/lib/definitions';
-import { capitalize } from '@/app/lib/utils';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
 import { Dropdown } from 'primereact/dropdown';
@@ -22,29 +21,26 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
 
   const [name, setName] = useState(guest?.name || '');
   const [group, setGroup] = useState(guest?.groupId || null);
-  const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
 
   function resetForm() {
     setName('');
     setGroup(null);
-    setStatus(null);
   }
 
   function submitGuest() {
-    if (!(name && group && status)) {
+    if (!(name && group)) {
       return
     }
 
     if (guest?.id !== undefined) {
       guest.name = name;
       guest.groupId = group;
-      guest.status = status;
       updateGuest(guest).then(() => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      guest && createGuest({name: name, groupId: group, status: status}, () => {
+      createGuest(name, group, () => {
         resetForm();
         onCreate && onCreate();
       });
@@ -68,15 +64,7 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
             } />
             <label htmlFor="group">Group</label>
           </FloatLabel>
-          <FloatLabel>
+          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group)}>
-            <Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
-              guestStatuses.map((status) => {
-                return { label: capitalize(status), value: status };
-              })
-            } />
-            <label htmlFor="status">Status</label>
-          </FloatLabel>
-          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
             {guest?.id !== undefined ? 'Update' : 'Create'}
           </button>
         </div>

app/ui/guests/table.tsx

@@ -14,6 +14,11 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
   onUpdate: () => void,
   onEdit: (guest: Guest) => void
 }) {
+  const handleGuestChange = (guest: Guest, status: GuestStatus) => {
+    guest.status = status;
+    updateGuest(guest).then(() => onUpdate());
+  }
+
   return (
     <TableOfContents
       headers={['Name', 'Group', 'Status', 'Actions']}
@@ -45,6 +50,16 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </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>)}
+              {(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()) }} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>