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

Adapt the guests table to use the new API format #105

Merged
bustikiller merged 4 commits from guests-api-changes into main 2024-11-17 10:43:38 +00:00
Conversation 0 Commits 4 Files Changed 3 +33 -39
3 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/lib/definitions.ts
View File

@ -23,7 +23,7 @@ export type Guest = {
name: string;
group_name?: string;
color?: string;
status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
status?: 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
}
export type Expense = {

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

@ -17,12 +17,12 @@ export default function guestsTable() {
fetch("/api/guests.json")
.then((response) => response.json())
.then((data) => {
setGuests(data.data.map((record: any) => {
setGuests(data.map((record: any) => {
return ({
id: record.id,
name: record.attributes.name,
group_name: record.attributes.group_name,
status: record.attributes.status
name: record.name,
status: record.status,
group_name: record.group.name,
});
}));
}, (error) => {
@ -82,11 +82,11 @@ export default function guestsTable() {
<span className={clsx(
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
{
'bg-gray-400': guest.status === 'Considered',
'bg-blue-400': guest.status === 'Invited',
'bg-green-600': guest.status === 'Confirmed',
'bg-red-400': guest.status === 'Declined',
'bg-yellow-400': guest.status === 'Tentative',
'bg-gray-400': guest.status === 'considered',
'bg-blue-400': guest.status === 'invited',
'bg-green-600': guest.status === 'confirmed',
'bg-red-400': guest.status === 'declined',
'bg-yellow-400': guest.status === 'tentative',
}
)}>
</span>
@ -94,13 +94,13 @@ export default function guestsTable() {
</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={handleInviteGuest} className={classNames('blue')}>
Invite
</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>
{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={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
</>
)}

46
tests/guests.spec.ts
View File

@ -2,32 +2,26 @@ import { test, expect, Page } from '@playwright/test'
const mockGuestsAPI = ({ page }: { page: Page }) => {
page.route('*/**/api/guests.json', async route => {
const json = {
data: [
{
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
"type": "guest",
"attributes": {
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
"group_id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
"status": "Tentative",
"name": "Kristofer Rohan DVM",
"group_name": "Childhood friends"
}
},
{
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
"type": "guest",
"attributes": {
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
"group_id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
"status": "Invited",
"name": "Olevia Quigley Jr.",
"group_name": "Work"
}
},
]
};
const json = [
{
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
"status": "tentative",
"name": "Kristofer Rohan DVM",
"group": {
"id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
"name": "Childhood friends",
}
},
{
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
"status": "invited",
"name": "Olevia Quigley Jr.",
"group": {
"id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
"name": "Work",
}
},
];
await route.fulfill({ json })
})