Submit status changes to the backend

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

@@ -3,12 +3,13 @@
 import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
 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) => {
@@ -28,13 +29,19 @@ export default function guestsTable() {
 
 
   const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => {
-    fetch("http://localhost:3001/guests/bulk-status-change.json", { method: 'POST', body: JSON.stringify({ status: "Invited", guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }) })
+    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((response) => console.log(response.json()))
       .catch((error) => console.error(error));
   }
 
-
-
   guests.length === 0 && loadGuests();
 
   return (