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

Merge pull request 'Adapt the guests table to use the new API format' (#105) from guests-api-changes into main
All checks were successful
Check usage of free licenses / build-static-assets (push) Successful in 1m46s
Details
Playwright Tests / test (push) Successful in 3m44s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 9m17s
Details

Browse Source 
Reviewed-on: #105
This commit is contained in:
bustikiller 2024-11-17 10:43:37 +00:00
commit 71d9a91d18
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; name: string;
group_name?: string; group_name?: string;
color?: string; color?: string;
status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative'; status?: 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
} }
export type Expense = { export type Expense = {

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

@ -17,12 +17,12 @@ export default function guestsTable() {
fetch("/api/guests.json") fetch("/api/guests.json")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
setGuests(data.data.map((record: any) => { setGuests(data.map((record: any) => {
return ({ return ({
id: record.id, id: record.id,
name: record.attributes.name, name: record.name,
group_name: record.attributes.group_name, status: record.status,
status: record.attributes.status group_name: record.group.name,
}); });
})); }));
}, (error) => { }, (error) => {
@ -82,11 +82,11 @@ export default function guestsTable() {
<span className={clsx( <span className={clsx(
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0', 'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
{ {
'bg-gray-400': guest.status === 'Considered', 'bg-gray-400': guest.status === 'considered',
'bg-blue-400': guest.status === 'Invited', 'bg-blue-400': guest.status === 'invited',
'bg-green-600': guest.status === 'Confirmed', 'bg-green-600': guest.status === 'confirmed',
'bg-red-400': guest.status === 'Declined', 'bg-red-400': guest.status === 'declined',
'bg-yellow-400': guest.status === 'Tentative', 'bg-yellow-400': guest.status === 'tentative',
} }
)}> )}>
</span> </span>
@ -94,13 +94,13 @@ export default function guestsTable() {
</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={handleInviteGuest} 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={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> <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 }) => { const mockGuestsAPI = ({ page }: { page: Page }) => {
page.route('*/**/api/guests.json', async route => { page.route('*/**/api/guests.json', async route => {
const json = { const json = [
data: [ {
{ "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6", "status": "tentative",
"type": "guest", "name": "Kristofer Rohan DVM",
"attributes": { "group": {
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6", "id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
"group_id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14", "name": "Childhood friends",
"status": "Tentative", }
"name": "Kristofer Rohan DVM", },
"group_name": "Childhood friends" {
} "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
}, "status": "invited",
{ "name": "Olevia Quigley Jr.",
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18", "group": {
"type": "guest", "id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
"attributes": { "name": "Work",
"id": "bd585c40-0937-4cde-960a-bb23acfd6f18", }
"group_id": "da8edf26-3e1e-4cbb-b985-450c49fffe01", },
"status": "Invited", ];
"name": "Olevia Quigley Jr.",
"group_name": "Work"
}
},
]
};
await route.fulfill({ json }) await route.fulfill({ json })
}) })