From b7eb2838a018d02a30aede1c1f44d5a0bf9667b4 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sun, 18 Aug 2024 17:46:37 +0200 Subject: [PATCH 1/5] Render table of guests as a server component --- app/ui/guests/table.tsx | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index 7cc49d5..495d430 100644 --- a/app/ui/guests/table.tsx +++ b/app/ui/guests/table.tsx @@ -1,31 +1,23 @@ -'use client' import { Guest } from '@/app/lib/definitions'; import { useState, Suspense, useEffect } from 'react'; import clsx from 'clsx'; -export default function guestsTable() { +export default async function guestsTable() { - const [guests, setGuests] = useState([]); - - useEffect(() => { - if (guests.length > 0) { - return; - } - fetch("http://localhost:3001/guests.json") - .then((response) => response.json()) - .then((data) => { - setGuests(data.data.map((record: any) => { - return ({ - id: record.id, - name: record.attributes.name, - email: record.attributes.email, - group_name: record.attributes.group_name, - status: record.attributes.status - }); - })) + let guests: Guest[] = await fetch("http://localhost:3001/guests.json") + .then((response) => response.json()) + .then((data) => { + return data.data.map((record: any) => { + return ({ + id: record.id, + name: record.attributes.name, + email: record.attributes.email, + group_name: record.attributes.group_name, + status: record.attributes.status + }); }); - }); + }); return (
@@ -53,7 +45,7 @@ export default function guestsTable() { - + {guests.map((guest) => ( -- 2.47.1 From 611b487db48f7f0c5ed3a04b1785ecac8e1639bf Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sun, 18 Aug 2024 18:09:09 +0200 Subject: [PATCH 2/5] Define skeletons for the guests table (not working yet) --- app/ui/guests/skeleton-row.tsx | 12 ++++++++++++ app/ui/guests/table.tsx | 7 +++---- app/ui/skeleton.tsx | 3 +++ 3 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 app/ui/guests/skeleton-row.tsx create mode 100644 app/ui/skeleton.tsx diff --git a/app/ui/guests/skeleton-row.tsx b/app/ui/guests/skeleton-row.tsx new file mode 100644 index 0000000..5cfe5b7 --- /dev/null +++ b/app/ui/guests/skeleton-row.tsx @@ -0,0 +1,12 @@ +import Skeleton from '@/app/ui/skeleton'; + +export default function SkeletonRow() { + return ( + + {} + {} + {} + {} + + ); +} \ No newline at end of file diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index 495d430..593b67f 100644 --- a/app/ui/guests/table.tsx +++ b/app/ui/guests/table.tsx @@ -1,6 +1,6 @@ - import { Guest } from '@/app/lib/definitions'; -import { useState, Suspense, useEffect } from 'react'; +import SkeletonRow from './skeleton-row'; +import { Suspense } from 'react'; import clsx from 'clsx'; export default async function guestsTable() { @@ -45,7 +45,7 @@ export default async function guestsTable() { - + )}> {guests.map((guest) => ( @@ -68,7 +68,6 @@ export default async function guestsTable() { 'bg-red-400': guest.status === 'Declined', } )}> - {/* */} {guest.status} diff --git a/app/ui/skeleton.tsx b/app/ui/skeleton.tsx new file mode 100644 index 0000000..590c507 --- /dev/null +++ b/app/ui/skeleton.tsx @@ -0,0 +1,3 @@ +export default function Skeleton({ className }: { className: string }) { + return
; +} \ No newline at end of file -- 2.47.1 From 4022928f1c706c7e08b2b32a4a2616040286a0f1 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sun, 18 Aug 2024 18:41:44 +0200 Subject: [PATCH 3/5] Display a skeleton while guests information is loading --- app/dashboard/guests/page.tsx | 10 +++--- app/ui/guests/skeleton-row.tsx | 26 +++++++++++++-- app/ui/guests/table.tsx | 60 ++++++++++++++++++---------------- 3 files changed, 61 insertions(+), 35 deletions(-) diff --git a/app/dashboard/guests/page.tsx b/app/dashboard/guests/page.tsx index f829606..40214be 100644 --- a/app/dashboard/guests/page.tsx +++ b/app/dashboard/guests/page.tsx @@ -1,8 +1,8 @@ import { lusitana } from '@/app/ui/fonts'; import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree'; import GuestsTable from '@/app/ui/guests/table'; -import { Tree } from 'primereact/tree'; -import React, { useState, useEffect } from 'react'; +import React, { Suspense } from 'react'; +import SkeletonTable from '@/app/ui/guests/skeleton-row'; @@ -10,10 +10,12 @@ export default function Page() { return (
- +

Guests

- + }> + +
); diff --git a/app/ui/guests/skeleton-row.tsx b/app/ui/guests/skeleton-row.tsx index 5cfe5b7..0b989e6 100644 --- a/app/ui/guests/skeleton-row.tsx +++ b/app/ui/guests/skeleton-row.tsx @@ -1,6 +1,6 @@ import Skeleton from '@/app/ui/skeleton'; -export default function SkeletonRow() { +export function SkeletonRow() { return ( {} @@ -9,4 +9,26 @@ export default function SkeletonRow() { {} ); -} \ No newline at end of file +} + +export default function SkeletonTable() { + return ( +
+ + + + + + {[...Array(20)].map((e, i) => )} + +
+ Guests +

+ Loading the list of guests... +

+
+
+ + ); +} + diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index 593b67f..6458d55 100644 --- a/app/ui/guests/table.tsx +++ b/app/ui/guests/table.tsx @@ -3,6 +3,10 @@ import SkeletonRow from './skeleton-row'; import { Suspense } from 'react'; import clsx from 'clsx'; +export function TableHeader() { + +} + export default async function guestsTable() { let guests: Guest[] = await fetch("http://localhost:3001/guests.json") @@ -45,36 +49,34 @@ export default async function guestsTable() { - )}> - {guests.map((guest) => ( - - - {guest.name} - - - {guest.email} - - - {guest.group_name} - - - - - - {guest.status} + {guests.map((guest) => ( + + + {guest.name} + + + {guest.email} + + + {guest.group_name} + + + + - - - ))} - + {guest.status} + + + + ))}
-- 2.47.1 From 628ddc8eb27df8d2166766570b9ec30c75800d43 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sun, 18 Aug 2024 19:18:00 +0200 Subject: [PATCH 4/5] Define table as a client component --- app/ui/guests/table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index 6458d55..d7a71ae 100644 --- a/app/ui/guests/table.tsx +++ b/app/ui/guests/table.tsx @@ -1,3 +1,5 @@ +'use client' + import { Guest } from '@/app/lib/definitions'; import SkeletonRow from './skeleton-row'; import { Suspense } from 'react'; -- 2.47.1 From 61df349ceed59bef2c96e3d00adf5901aa2fff28 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sun, 18 Aug 2024 20:01:17 +0200 Subject: [PATCH 5/5] Capture error in case the connection is not OK --- app/ui/guests/table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index d7a71ae..0f31a0c 100644 --- a/app/ui/guests/table.tsx +++ b/app/ui/guests/table.tsx @@ -23,6 +23,8 @@ export default async function guestsTable() { status: record.attributes.status }); }); + }, (error) => { + return []; }); return ( -- 2.47.1