From f10c246e1ab1e54df528414d3cdb70ccaa6fd2ab Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 11 Aug 2024 15:09:33 +0200
Subject: [PATCH] Display list of guests from the backend

---
 app/ui/guests/table.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 3f7d263..3d90381 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -1,32 +1,32 @@
 'use client'
 
 import { Guest } from '@/app/lib/definitions';
-import { useState, Suspense } from 'react';
+import { useState, Suspense, useEffect } from 'react';
 
 export default function guestsTable() {
 
-  const url = "http://localhost:3001/guests.json";
+  const [guests, setGuests] = useState<Guest[]>([]);
 
-  const getData = (): Guest[] => {
-    var guests: Guest[] = [];
-    fetch(url)
+  useEffect(() => {
+    if (guests.length > 0) {
+      return;
+    }
+    fetch("http://localhost:3001/guests.json")
       .then((response) => response.json())
       .then((data) => {
-        data.data.map((record: any) =>  {
-          guests.push({
+        setGuests(data.data.map((record: any) => {
+          return ({
             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">
+      <p className="py-3">There are {guests.length} guests in the list</p>
       <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
         <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
@@ -44,7 +44,7 @@ export default function guestsTable() {
         <tbody>
           <Suspense fallback="<tr><td colspan=3> Loading data</td></tr>">
             {guests.map((guest) => (
-              <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+              <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>