diff --git a/app/api/guests.tsx b/app/api/guests.tsx index f9c1263..ce4f232 100644 --- a/app/api/guests.tsx +++ b/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(), diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts index 5511a46..45b5536 100644 --- a/app/lib/definitions.ts +++ b/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; diff --git a/app/ui/components/guest-form-dialog.tsx b/app/ui/components/guest-form-dialog.tsx index c9537ce..9da1ff9 100644 --- a/app/ui/components/guest-form-dialog.tsx +++ b/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'; @@ -11,7 +12,7 @@ import { FloatLabel } from 'primereact/floatlabel'; import { InputText } from 'primereact/inputtext'; import { useState } from 'react'; -export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible}: { +export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: { groups: Group[], onCreate?: () => void, onHide: () => void, @@ -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(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 } /> - diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index a18dc9a..304c357 100644 --- a/app/ui/guests/table.tsx +++ b/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 (
- {guest.status === 'considered' && ()} - {(guest.status === 'invited' || guest.status === 'tentative') && ( - <> - - {guest.status != 'tentative' && } - - - )} { destroyGuest(guest, () => onUpdate()) }} /> onEdit(guest)} />