Update dependency react to v19.0.0-rc-fb9a90fa48-20240614

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 React, { Suspense } from 'react';
-import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import { Tree } from 'primereact/tree';
+import React, { useState, useEffect } from 'react';
 
 
 
@@ -10,12 +10,10 @@ export default function Page() {
   return (
     <div className="w-full">
       <AffinityGroupsTree />
-
+      
       <h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
       <div className="flex w-full items-center justify-between">
-        <Suspense fallback={<SkeletonTable />}>
-          <GuestsTable />
-        </Suspense>
+        <GuestsTable />
       </div>
     </div>
   );

app/ui/guests/skeleton-row.tsx

@@ -1,34 +0,0 @@
-import Skeleton from '@/app/ui/skeleton';
-
-export function SkeletonRow() {
-    return (
-        <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
-            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
-            <td className="px-6 py-4">{<Skeleton className="w-[20ch] h-[1rem]" />}</td>
-            <td className="px-6 py-4">{<Skeleton className="w-[10ch] h-[1rem]" />}</td>
-        </tr>
-    );
-}
-
-export default function SkeletonTable() {
-    return (
-        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-                    Guests
-                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                        Loading the list of guests...
-                    </p>
-                </caption>
-                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                </thead>
-                <tbody>
-                    {[...Array(20)].map((e, i) => <SkeletonRow />)}
-                </tbody>
-            </table>
-        </div>
-
-    );
-}
-

app/ui/guests/table.tsx

@@ -1,31 +1,31 @@
 'use client'
 
 import { Guest } from '@/app/lib/definitions';
-import SkeletonRow from './skeleton-row';
-import { Suspense } from 'react';
+import { useState, Suspense, useEffect } from 'react';
 import clsx from 'clsx';
 
-export function TableHeader() {
-  
-}
+export default function guestsTable() {
 
-export default async function guestsTable() {
+  const [guests, setGuests] = useState<Guest[]>([]);
 
-  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
-        });
+  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
+          });
+        }))
       });
-    }, (error) => {
-      return [];
-    });
+  });
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -53,34 +53,37 @@ export default async function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          {guests.map((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">
-              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                {guest.name}
-              </th>
-              <td className="px-6 py-4">
-                {guest.email}
-              </td>
-              <td className="px-6 py-4">
-                {guest.group_name}
-              </td>
-              <td className="px-6 py-4">
-                <span className="flex items-center text-sm dark:text-white me-3">
-                  <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',
-                    }
-                  )}>
+          <Suspense>
+            {guests.map((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">
+                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                  {guest.name}
+                </th>
+                <td className="px-6 py-4">
+                  {guest.email}
+                </td>
+                <td className="px-6 py-4">
+                  {guest.group_name}
+                </td>
+                <td className="px-6 py-4">
+                  <span className="flex items-center text-sm dark:text-white me-3">
+                    <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',
+                      }
+                    )}>
+                      {/* <span className="flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0 bg-blue-600"> */}
+                    </span>
+                    {guest.status}
                   </span>
-                  {guest.status}
-                </span>
-              </td>
-            </tr>
-          ))}
+                </td>
+              </tr>
+            ))}
+          </Suspense>
         </tbody>
       </table>
     </div>

app/ui/skeleton.tsx

@@ -1,3 +0,0 @@
-export default function Skeleton({ className }: { className: string }) {
-    return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
-}