app/lib/utils.ts

@@ -7,6 +7,13 @@ export const formatCurrency = (amount: number) => {
   });
 };
 
+export const getCsrfToken = () => {
+  return document.cookie
+      .split("; ")
+      .find((row) => row.startsWith("csrf-token"))
+      ?.split("=")[1] || 'unknown';
+}
+
 export const formatDateToLocal = (
   dateStr: string,
   locale: string = 'en-US',

app/ui/guests/affinity-groups-tree.tsx

@@ -44,7 +44,7 @@ export default function AffinityGroupsTree() {
         if (nodes.length > 0) {
             return;
         }
-        fetch("http://localhost:3001/groups.json")
+        fetch("/api/groups.json")
             .then((response) => response.json())
             .then((data) => {
                 setNodes(data.data.map((record: any) => {

app/ui/guests/table.tsx

@@ -2,11 +2,14 @@
 
 import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
-import { Guest } from '@/app/lib/definitions';	
+import { Guest } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
 
 export default function guestsTable() {
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+
   function loadGuests() {
-    fetch("http://localhost:3001/guests.json")
+    fetch("/api/guests.json")
       .then((response) => response.json())
       .then((data) => {
         setGuests(data.data.map((record: any) => {
@@ -21,9 +24,22 @@ export default function guestsTable() {
       }, (error) => {
         return [];
       });
-  }
+  };
 
-  const [guests, setGuests] = useState<Array<Guest>>([]);
+
+  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => {
+    fetch("/api/guests/bulk_update.json",
+      {
+        method: 'POST',
+        body: JSON.stringify({ properties: { status: "invited" }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': getCsrfToken(),
+        }
+      })
+      .then(() => loadGuests())
+      .catch((error) => console.error(error));
+  }
 
   guests.length === 0 && loadGuests();
 
@@ -50,6 +66,7 @@ export default function guestsTable() {
             <th scope="col" className="px-6 py-3">
               Status
             </th>
+            <th>Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -79,6 +96,11 @@ export default function guestsTable() {
                   {guest.status}
                 </span>
               </td>
+              <td>
+                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className="bg-blue-300 hover:bg-blue-500 text-white py-1 px-2 rounded">
+                  Invite
+                </button>)}
+              </td>
             </tr>
           ))}
         </tbody>