app/api/expenses.tsx

@@ -0,0 +1,40 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Expense } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
+
+export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
+  fetch("/api/expenses")
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          amount: record.amount,
+          pricingType: record.pricing_type
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+}
+
+export function updateExpense(expense: Expense) {
+  fetch(`/api/expenses/${expense.id}`,
+    {
+      method: 'PUT',
+      body: JSON.stringify({
+        expense: {
+          name: expense.name,
+          amount: expense.amount,
+          pricing_type: expense.pricingType,
+        }
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+    .catch((error) => console.error(error));
+}

app/api/groups.tsx

@@ -0,0 +1,27 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Group } from '@/app/lib/definitions';
+
+export function loadGroups(onLoad?: (groups: Group[]) => void) {
+  fetch("/api/groups")
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          color: record.color,
+          attendance: {
+            considered: record.considered,
+            invited: record.invited,
+            confirmed: record.confirmed,
+            tentative: record.tentative,
+            declined: record.declined,
+            total: record.total,
+          }
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+}

app/api/guests.tsx

@@ -0,0 +1,50 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Guest } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
+
+export function loadGuests(onLoad?: (guests: Guest[]) => void) {
+  fetch("/api/guests")
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          status: record.status,
+          group_name: record.group.name,
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+};
+
+export function updateGuest(guest: Guest) {
+  return fetch(`/api/guests/${guest.id}`,
+    {
+      method: 'PUT',
+      body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+    .catch((error) => console.error(error));
+}
+
+export function createGuest(name: string, group_id: string, onCreate?: () => void) {
+  fetch("/api/guests", {
+    method: 'POST',
+    body: JSON.stringify({ name: name, group_id: group_id }),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      onCreate && onCreate();
+    })
+    .catch((error) => console.error(error));
+}

app/api/tableSimulations.tsx

@@ -0,0 +1,19 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { TableArrangement } from '@/app/lib/definitions';
+
+export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
+  fetch('/api/tables_arrangements')
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          discomfort: record.discomfort,
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+}

app/dashboard/guests/page.tsx

@@ -3,7 +3,6 @@
 'use client';
 
 import { Group, Guest } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
 import CreationDialog from '@/app/ui/components/creation-dialog';
 import GroupsTable from '@/app/ui/groups/table';
 import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
@@ -11,63 +10,22 @@ import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Suspense, useState } from 'react';
+import { loadGuests } from '@/app/api/guests';
+import { loadGroups } from '@/app/api/groups';
 
 export default function Page() {
-  function loadGroups() {
+  function refreshGuests() {
-    fetch("/api/groups")
+    loadGuests((guests) => {
-      .then((response) => response.json())
+      setGuests(guests);
-      .then((data) => {
+      setGuestsLoaded(true);
-        setGroups(data.map((record: any) => {
+    });
-          return ({
-            id: record.id,
-            name: record.name,
-            color: record.color,
-            attendance: {
-              considered: record.considered,
-              invited: record.invited,
-              confirmed: record.confirmed,
-              tentative: record.tentative,
-              declined: record.declined,
-              total: record.total,
-            }
-          });
-        }));
-        setGroupsLoaded(true);
-      }, (error) => {
-        return [];
-      });
   }
 
-  function loadGuests() {
+  function refreshGroups() {
-    fetch("/api/guests.json")
+    loadGroups((groups) => {
-      .then((response) => response.json())
+      setGroups(groups);
-      .then((data) => {
+      setGroupsLoaded(true);
-        setGuests(data.map((record: any) => {
+    });
-          return ({
-            id: record.id,
-            name: record.name,
-            status: record.status,
-            group_name: record.group.name,
-          });
-        }));
-        setGuestsLoaded(true);
-      }, (error) => {
-        return [];
-      });
-  };
-
-  const updateGuestStatus = (id: string, status: string) => {
-    fetch("/api/guests/bulk_update.json",
-      {
-        method: 'POST',
-        body: JSON.stringify({ properties: { status: status }, guest_ids: [id] }),
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-TOKEN': getCsrfToken(),
-        }
-      })
-      .then(() => loadGuests())
-      .catch((error) => console.error(error));
   }
 
   const [groupsLoaded, setGroupsLoaded] = useState(false);
@@ -76,8 +34,8 @@ export default function Page() {
   const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
 
-  !groupsLoaded && loadGroups();
+  !groupsLoaded && refreshGroups();
-  !guestsLoaded && loadGuests();
+  !guestsLoaded && refreshGuests();
 
   return (
     <div className="w-full">
@@ -86,9 +44,9 @@ export default function Page() {
       <TabView>
         <TabPanel header="Guests" leftIcon="pi pi-users mx-2">
           <div className="flex flex-col w-full items-center justify-between">
-            <CreationDialog groups={groups} onCreate={loadGuests} />;
+            <CreationDialog groups={groups} onCreate={refreshGuests} />
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable guests={guests} updateGuestStatus={updateGuestStatus} />
+              <GuestsTable guests={guests} onUpdate={refreshGuests} />
             </Suspense>
           </div>
         </ TabPanel>

app/lib/definitions.ts

@@ -18,12 +18,13 @@ export type Customer = {
   image_url: string;
 };
 
+export type GuestStatus = 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
 export type Guest = {
   id: string;
   name: string;
   group_name?: string;
   color?: string;
-  status?: 'considered' | 'invited' | 'confirmed' | 'declined' | 'tentative';
+  status?: GuestStatus
 }
 
 export type Expense = {

app/ui/arrangements/arrangements-table.tsx

@@ -6,31 +6,24 @@ import React, { useState } from "react"
 import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
 import TableOfContents from "../components/table-of-contents";
+import { loadTableSimulations } from "@/app/api/tableSimulations";
 
 export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
     const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
+    const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
 
-    function loadArrangements() {
+    function refreshSimulations() {
-      fetch("/api/tables_arrangements")
+      loadTableSimulations((arrangements) => {
-        .then((response) => response.json())
+        setArrangements(arrangements);
-        .then((data) => {
+        setArrangementsLoaded(true);
-          setArrangements(data.map((record: any) => {
+      });
-            return ({
-              id: record.id,
-              name: record.name,
-              discomfort: record.discomfort
-            });
-          }));
-        }, (error) => {
-          return [];
-        });
     }
 
     function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
         onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
     }
   
-    arrangements.length === 0 && loadArrangements();
+    !arrangementsLoaded && refreshSimulations();
 
     return(
       <TableOfContents

app/ui/components/creation-dialog.tsx

@@ -2,8 +2,8 @@
 
 'use client';
 
+import { createGuest } from '@/app/api/guests';
 import { Group } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
 import { Dropdown } from 'primereact/dropdown';
@@ -16,22 +16,13 @@ export default function CreationDialog({ groups, onCreate }: { groups: Group[],
 
   const [name, setName] = useState('');
   const [group, setGroup] = useState(null);
-  function createGuest() {
+  function submitGuest() {
-    fetch("/api/guests", {
+    name && group && createGuest(name, group, () => {
-      method: 'POST',
+      setVisible(false);
-      body: JSON.stringify({ name: name, group_id: group }),
+      setName('');
-      headers: {
+      setGroup(null);
-        'Content-Type': 'application/json',
+      onCreate && onCreate();
-        'X-CSRF-TOKEN': getCsrfToken(),
+    });
-      }
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        setVisible(false);
-        onCreate && onCreate();
-      })
-      .catch((error) => console.error(error));
   }
 
   return (
@@ -52,7 +43,7 @@ export default function CreationDialog({ groups, onCreate }: { groups: Group[],
             } />
             <label htmlFor="group">Group</label>
           </FloatLabel>
-          <button className={classNames('primary')} onClick={createGuest} disabled={!(name.length > 0 && group)}>Create</button>
+          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group)}>Create</button>
         </div>
       </Dialog>
     </>

app/ui/expenses/table.tsx

@@ -2,71 +2,43 @@
 
 'use client'
 
-import React, { useState } from "react"
+import { loadExpenses, updateExpense } from '@/app/api/expenses';
 import { Expense } from '@/app/lib/definitions';
-import TableOfContents from "../components/table-of-contents";
+import { useState } from "react";
 import InlineTextField from "../components/form/inlineTextField";
-import { getCsrfToken } from '@/app/lib/utils';
+import TableOfContents from "../components/table-of-contents";
 
 export default function ExpensesTable() {
-    const [expenses, setExpenses] = useState<Array<Expense>>([]);
+  const [expenses, setExpenses] = useState<Array<Expense>>([]);
+  const [expensesLoaded, setExpensesLoaded] = useState(false);
 
-    const handleExpenseUpdate = (expense: Expense) => {
+  function refreshExpenses() {
-        fetch(`/api/expenses/${expense.id}`,
+    loadExpenses((expenses) => {
-            {
+      setExpenses(expenses);
-                method: 'PUT',
+      setExpensesLoaded(true);
-                body: JSON.stringify({
+    });
-                    expense: {
+  }
-                        name: expense.name,
-                        amount: expense.amount,
-                        pricing_type: expense.pricingType,
-                    }
-                }),
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': getCsrfToken(),
-                }
-            })
-            .catch((error) => console.error(error));
-    }
 
-    function loadExpenses() {
+  !expensesLoaded && refreshExpenses();
-        fetch("/api/expenses")
-            .then((response) => response.json())
-            .then((data) => {
-                setExpenses(data.map((record: any) => {
-                    return ({
-                        id: record.id,
-                        name: record.name,
-                        amount: record.amount,
-                        pricingType: record.pricing_type
-                    });
-                }));
-            }, (error) => {
-                return [];
-            });
-    }
 
-    expenses.length === 0 && loadExpenses();
+  return (
-
+    <TableOfContents
-    return (
+      headers={['Name', 'Amount (€)', 'Pricing Type']}
-        <TableOfContents
+      caption='Expenses'
-            headers={['Name', 'Amount (€)', 'Pricing Type']}
+      elements={expenses}
-            caption='Expenses'
+      rowRender={(expense) => (
-            elements={expenses}
+        <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-            rowRender={(expense) => (
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+            <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
-                    <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+          </th>
-                        <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; handleExpenseUpdate(expense) }} />
+          <td className="px-6 py-4">
-                    </th>
+            <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
-                    <td className="px-6 py-4">
+          </td>
-                        <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); handleExpenseUpdate(expense) }} />
+          <td>
-                    </td>
+            {expense.pricingType}
-                    <td>
+          </td>
-                        {expense.pricingType}
+        </tr>
-                    </td>
+      )}
-                </tr>
+    />
-            )}
+  );
-        />
-    );
 }

app/ui/guests/table.tsx

@@ -2,39 +2,19 @@
 
 'use client';
 
-import { Guest } from '@/app/lib/definitions';
+import { updateGuest } from '@/app/api/guests';
-import { getCsrfToken } from '@/app/lib/utils';
+import { Guest, GuestStatus } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import clsx from 'clsx';
-import React from 'react';
 import InlineTextField from '../components/form/inlineTextField';
 import TableOfContents from '../components/table-of-contents';
 
-export default function guestsTable({ guests, updateGuestStatus }: { guests: Guest[], updateGuestStatus: (id: string, status: string) => void }) {
+export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onUpdate: () => void }) {
-  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
+  const handleGuestChange = (guest: Guest, status: GuestStatus) => {
-  const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
+    guest.status = status;
-  const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
+    updateGuest(guest).then(() => onUpdate());
-  const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
-
-  const handleGuestUpdate = (guest: Guest) => {
-    fetch(`/api/guests/${guest.id}`,
-      {
-        method: 'PUT',
-        body: JSON.stringify({ guest: { name: guest.name } }),
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-TOKEN': getCsrfToken(),
-        }
-      })
-      .catch((error) => console.error(error));
   }
 
-
-  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status: string) => {
-    updateGuestStatus(e.currentTarget.getAttribute('data-guest-id') || '', status);
-  }
-
-
   return (
     <TableOfContents
       headers={['Name', 'Group', 'Status', 'Actions']}
@@ -43,7 +23,7 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
       rowRender={(guest) => (
         <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">
           <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; handleGuestUpdate(guest) }} />
+            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; updateGuest(guest) }} />
           </td>
           <td className="px-6 py-4">
             {guest.group_name}
@@ -65,14 +45,14 @@ export default function guestsTable({ guests, updateGuestStatus }: { guests: Gue
             </span>
           </td>
           <td>
-            {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
+            {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
               Invite
             </button>)}
             {(guest.status === 'invited' || guest.status === 'tentative') && (
               <>
-                <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
+                <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
-                {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
+                {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
-                <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
+                <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
               </>
             )}
           </td>

tests/guests.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, Page } from '@playwright/test'
 
 const mockGuestsAPI = ({ page }: { page: Page }) => {
-  page.route('*/**/api/guests.json', async route => {
+  page.route('*/**/api/guests', async route => {
     const json = [
       {
         "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",