From 63d44208067731390b39cd3c1188b66a579d776f Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 27 Oct 2024 11:52:42 +0100
Subject: [PATCH] Restore usage of client component and remove explicit async

---
 app/ui/guests/table.tsx | 42 ++++++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index d113e15..f9094ec 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -1,23 +1,31 @@
-import { Guest } from '@/app/lib/definitions';
+'use client';
+
 import clsx from 'clsx';
+import React, { useState, useEffect } from 'react';
+import { Guest } from '@/app/lib/definitions';	
 
-export default async function guestsTable() {
-
-  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
-        });
+export default function guestsTable() {
+  function loadGuests() {
+    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 [];
       });
-    }, (error) => {
-      return [];
-    });
+  }
+
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+
+  guests.length === 0 && loadGuests();
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">