bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Refactor guests API

Browse Source
This commit is contained in:
Manuel Bustillo 2024-11-17 16:59:16 +01:00 committed by bustikiller
parent 28abb23a77
commit 671bfce34f
4 changed files with 19 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/api/guests.tsx
View File

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

4
app/dashboard/guests/page.tsx
View File

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

3
app/lib/definitions.ts
View File

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

42
app/ui/guests/table.tsx
View File

@ -2,39 +2,19 @@
'use client'; 'use client';
import { Guest } from '@/app/lib/definitions'; import { updateGuest } from '@/app/api/guests';
import { getCsrfToken } from '@/app/lib/utils'; import { Guest, GuestStatus } from '@/app/lib/definitions';
import { classNames } from '@/app/ui/components/button'; import { classNames } from '@/app/ui/components/button';
import clsx from 'clsx'; import clsx from 'clsx';
import React from 'react';
import InlineTextField from '../components/form/inlineTextField'; import InlineTextField from '../components/form/inlineTextField';
import TableOfContents from '../components/table-of-contents'; import TableOfContents from '../components/table-of-contents';
export default function guestsTable({ guests, updateGuestStatus }: { guests: Guest[], updateGuestStatus: (id: string, status: string) => void }) { export default function guestsTable({ guests }: { guests: Guest[] }) {
const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited'); const handleGuestChange = (guest: Guest, status: GuestStatus) => {
const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed'); guest.status = status;
const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined'); updateGuest(guest);
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(),
}
})
.catch((error) => console.error(error));
} }
const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status: string) => {
updateGuestStatus(e.currentTarget.getAttribute('data-guest-id') || '', status);
}
return ( return (
<TableOfContents <TableOfContents
headers={['Name', 'Group', 'Status', 'Actions']} headers={['Name', 'Group', 'Status', 'Actions']}
@ -43,7 +23,7 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
rowRender={(guest) => ( 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"> <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"> <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>
<td className="px-6 py-4"> <td className="px-6 py-4">
{guest.group_name} {guest.group_name}
@ -65,14 +45,14 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
</span> </span>
</td> </td>
<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 Invite
</button>)} </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> <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={handleTentativeGuest} className={classNames('yellow')}>Tentative</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={handleDeclineGuest} className={classNames('red')}>Decline</button> <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
</> </>
)} )}
</td> </td>