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) {
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));
}

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 { 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>

3
app/lib/definitions.ts
View File

@ -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 = {

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

@ -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>