Make patch request to the backend whenever a guest is invited

app/ui/guests/table.tsx

@@ -2,9 +2,11 @@
 
 import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
-import { Guest } from '@/app/lib/definitions';	
+import { Guest } from '@/app/lib/definitions';
 
 export default function guestsTable() {
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+
   function loadGuests() {
     fetch("http://localhost:3001/guests.json")
       .then((response) => response.json())
@@ -20,10 +22,18 @@ export default function guestsTable() {
         }));
       }, (error) => {
         return [];
-      });
+      }
+      );
+  };
+
+
+  function handleInviteGuest() {
+    fetch("http://localhost:3001/guests/123.json", { method: 'PATCH', body: JSON.stringify({ guest: { status: 'Invited' } }) })
+      .then((response) => console.log(response.json()))
+      .catch((error) => console.error(error));
   }
 
-  const [guests, setGuests] = useState<Array<Guest>>([]);
+
 
   guests.length === 0 && loadGuests();
 
@@ -81,7 +91,7 @@ export default function guestsTable() {
                 </span>
               </td>
               <td>
-                {guest.status === 'Considered' && (<button className="bg-blue-300 hover:bg-blue-500 text-white py-1 px-2 rounded">
+                {guest.status === 'Considered' && (<button onClick={handleInviteGuest} className="bg-blue-300 hover:bg-blue-500 text-white py-1 px-2 rounded">
                   Invite
                 </button>)}
               </td>