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<Guest[]>([]);
-
-  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 (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -53,7 +45,7 @@ export default function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          <Suspense>
+          <Suspense fallback="<tr><td colspan=4> Loading content</td></tr>">
             {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">