WIP load guests from API

app/ui/guests/table.tsx

@@ -1,33 +1,30 @@
-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';
+import { useState, Suspense } from 'react';
 
-export default async function guestsTable() {
+export default function guestsTable() {
-  const guests: Guest[] = [
-    {
-      id: '1',
-      name: 'John Doe',
-      email: 'foo@bar.com'
-    },
-    {
-      id: '2',
-      name: 'Jane Doe',
-      email: 'jane@bar.com',
-    },
-    {
-      id: '3',
-      name: 'John Doe',
-      email: 'foo@bar.com'
-    },
-    {
-      id: '4',
-      name: 'Jane Doe',
-      email: 'jane@bar.com',
-    },
-  ];
 
+  const url = "http://localhost:3001/guests.json";
+
+  const getData = (): Guest[] => {
+    var guests: Guest[] = [];
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        data.data.map((record: any) =>  {
+          guests.push({
+            id: record.id,
+            name: record.attributes.name,
+            email: record.attributes.email,
+          });
+        });
+      });
+      return guests;
+  }
+
+  const [guests, setGuests] = useState<Guest[]>(getData());
+  
   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">
@@ -45,19 +42,21 @@ export default async function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          {guests.map((guest) => (
+          <Suspense fallback="<tr><td colspan=3> Loading data</td></tr>">
-            <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+            {guests.map((guest) => (
-              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-                {guest.name}
+                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-              </th>
+                  {guest.name}
-              <td className="px-6 py-4">
+                </th>
-                {guest.email}
+                <td className="px-6 py-4">
-              </td>
+                  {guest.email}
-              <td className="px-6 py-4">
+                </td>
-                Confirmed
+                <td className="px-6 py-4">
-              </td>
+                  Confirmed
-            </tr>
+                </td>
-          ))}
+              </tr>
+            ))}
+          </Suspense>
         </tbody>
       </table>
     </div>