Merge pull request 'Simplify guest edition by adding status to the dialog' (#112) from edit-guest-status into main

Reviewed-on: #112

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 } }),
+      body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
       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(name: string, group_id: string, onCreate?: () => void) {
+export function createGuest(guest: Guest, onCreate?: () => void) {
   fetch(`/api/${getSlug()}/guests`, {
     method: 'POST',
-    body: JSON.stringify({ name: name, group_id: group_id }),
+    body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
     headers: {
       'Content-Type': 'application/json',
       'X-CSRF-TOKEN': getCsrfToken(),

app/lib/definitions.ts

@@ -1,6 +1,12 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-export type GuestStatus = 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
+// This file contains type definitions for your data.
+// 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,7 +3,8 @@
 'use client';
 
 import { createGuest, updateGuest } from '@/app/api/guests';
-import { Group, Guest } from '@/app/lib/definitions';
+import { Group, Guest, GuestStatus, guestStatuses } 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';
@@ -21,26 +22,29 @@ 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)) {
+    if (!(name && group && status)) {
       return
     }
 
     if (guest?.id !== undefined) {
       guest.name = name;
       guest.groupId = group;
+      guest.status = status;
       updateGuest(guest).then(() => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      createGuest(name, group, () => {
+      guest && createGuest({name: name, groupId: group, status: status}, () => {
         resetForm();
         onCreate && onCreate();
       });
@@ -64,7 +68,15 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
             } />
             <label htmlFor="group">Group</label>
           </FloatLabel>
-          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group)}>
+          <FloatLabel>
+            <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,11 +14,6 @@ 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']}
@@ -50,16 +45,6 @@ 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>