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

WIP load guests from API

Browse Source
This commit is contained in:
Manuel Bustillo 2024-08-11 14:38:49 +02:00
parent 8c6b19a96e
commit 231e33f76c
1 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,29 @@
import Image from 'next/image'; 'use client'
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import gueststatus from '@/app/ui/guests/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { Guest } from '@/app/lib/definitions';
export default async function guestsTable() { import { Guest } from '@/app/lib/definitions';
const guests: Guest[] = [ import { useState, Suspense } from 'react';
{
id: '1', export default function guestsTable() {
name: 'John Doe',
email: 'foo@bar.com' const url = "http://localhost:3001/guests.json";
},
{ const getData = (): Guest[] => {
id: '2', var guests: Guest[] = [];
name: 'Jane Doe', fetch(url)
email: 'jane@bar.com', .then((response) => response.json())
}, .then((data) => {
{ data.data.map((record: any) => {
id: '3', guests.push({
name: 'John Doe', id: record.id,
email: 'foo@bar.com' name: record.attributes.name,
}, email: record.attributes.email,
{ });
id: '4', });
name: 'Jane Doe', });
email: 'jane@bar.com', return guests;
}, }
];
const [guests, setGuests] = useState<Guest[]>(getData());
return ( return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg"> <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@ -45,6 +42,7 @@ export default async function guestsTable() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<Suspense fallback="<tr><td colspan=3> Loading data</td></tr>">
{guests.map((guest) => ( {guests.map((guest) => (
<tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800"> <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"> <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
@ -58,6 +56,7 @@ export default async function guestsTable() {
</td> </td>
</tr> </tr>
))} ))}
</Suspense>
</tbody> </tbody>
</table> </table>
</div> </div>