From 1d59535eb6d9af761892661ef63f11db895003db Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 27 Oct 2024 14:02:10 +0100
Subject: [PATCH] Submit status changes to the backend

---
 app/lib/utils.ts                       |  7 +++++++
 app/ui/guests/affinity-groups-tree.tsx |  2 +-
 app/ui/guests/table.tsx                | 15 +++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index b7f7cff..8c1a35a 100644
--- a/app/lib/utils.ts
+++ b/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',
diff --git a/app/ui/guests/affinity-groups-tree.tsx b/app/ui/guests/affinity-groups-tree.tsx
index 17e1371..58bb7cf 100644
--- a/app/ui/guests/affinity-groups-tree.tsx
+++ b/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) => {
diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 66b2919..9d8cc51 100644
--- a/app/ui/guests/table.tsx
+++ b/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 (