Update dependency @types/react-dom to v18.3.2

Reviewed-on: #141

app/[slug]/dashboard/guests/page.tsx

@@ -7,6 +7,7 @@ import { loadGuests } from '@/app/api/guests';
 import { Group, Guest } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
+import GroupFormDialog from '@/app/ui/components/group-form-dialog';
 import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
@@ -31,6 +32,7 @@ export default function Page() {
 
   const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
+  const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
 
   const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -54,14 +56,33 @@ export default function Page() {
               onHide={() => { setGuestBeingEdited(undefined) }}
             />
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable guests={guests} onUpdate={refreshGuests} onEdit={(guest) => setGuestBeingEdited(guest)} />
+              <GuestsTable
+                guests={guests}
+                onUpdate={refreshGuests}
+                onEdit={(guest) => setGuestBeingEdited(guest)}
+              />
             </Suspense>
           </div>
         </ TabPanel>
         <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
-          <div className="flex w-full items-center justify-between">
+          <div className="flex flex-col w-full items-center justify-between">
+
+            <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+            <GroupFormDialog
+              key={groupBeingEdited?.id}
+              groups={groups}
+              onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
+              group={groupBeingEdited}
+              visible={groupBeingEdited !== undefined}
+              onHide={() => { setGroupBeingEdited(undefined) }}
+            />
+
             <Suspense fallback={<SkeletonTable />}>
-              <GroupsTable groups={groups} />
+              <GroupsTable 
+                groups={groups}
+                onUpdate={refreshGroups}
+                onEdit={(group) => setGroupBeingEdited(group)}
+              />
             </Suspense>
           </div>
         </ TabPanel>

app/[slug]/page.tsx

@@ -5,10 +5,22 @@
 import LoginForm from '@/app/ui/components/login-form';
 import RegistrationForm from '@/app/ui/components/registration-form';
 import { useParams } from 'next/navigation'
+import { useEffect } from 'react';
+import { retrieveCSRFToken } from '../api/authentication';
+import { getCsrfToken } from '../lib/utils';
 
 export default async function Page() {
   const params = useParams<{ slug: string }>()
+
+  useEffect(() => {
+    if (getCsrfToken() == 'unknown') {
+      retrieveCSRFToken();
+    }
+  }, []);
+
+  if (typeof window !== 'undefined') {
     localStorage.setItem('slug', await params.slug);
+  }
 
   return (
     <main className="flex min-h-screen flex-col p-6">

app/api/authentication.tsx

@@ -43,6 +43,15 @@ function flattenErrors(errors: StructuredErrors): string[] {
   });
 }
 
+// At this moment we're making an initial request to get a valid CSRF token
+export function retrieveCSRFToken() {
+  return fetch(`/api/token`, {
+    headers: {
+      'Accept': 'application/json',
+    }
+  }).then((response) => { return null });
+}
+
 export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
   slug: string,
   email: string,

app/api/groups.tsx

@@ -1,7 +1,7 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Group } from '@/app/lib/definitions';
-import { getSlug } from '../lib/utils';
+import { getCsrfToken, getSlug } from '../lib/utils';
 
 export function loadGroups(onLoad?: (groups: Group[]) => void) {
   fetch(`/api/${getSlug()}/groups`)
@@ -26,3 +26,56 @@ export function loadGroups(onLoad?: (groups: Group[]) => void) {
       return [];
     });
 }
+
+export function updateGroup(group: Group) {
+  return fetch(`/api/${getSlug()}/groups/${group.id}`,
+    {
+      method: 'PUT',
+      body: JSON.stringify({ group: { 
+        name: group.name, 
+        color: group.color, 
+        icon: group.icon,
+        parent_id: group.parentId
+       } }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+    .catch((error) => console.error(error));
+}
+
+export function createGroup(group: Group, onCreate?: () => void) {
+  fetch(`/api/${getSlug()}/groups`, {
+    method: 'POST',
+    body: JSON.stringify({ 
+      name: group.name, 
+      color: group.color, 
+      icon: group.icon,
+      parent_id: group.parentId
+     }),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      onCreate && onCreate();
+    })
+    .catch((error) => console.error(error));
+}
+
+export function destroyGroup(group: Group, onDestroy?: () => void) {
+  fetch(`/api/${getSlug()}/groups/${group.id}`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      onDestroy && onDestroy();
+    })
+    .catch((error) => console.error(error));
+}

app/lib/definitions.ts

@@ -32,11 +32,12 @@ export type TableArrangement = {
 }
 
 export type Group = {
-  id: string;
+  id?: string;
-  name: string;
+  name?: string;
-  guest_count: number;
+  guest_count?: number;
-  icon: string;
+  icon?: string;
-  children: Group[];
+  children?: Group[];
+  parentId?: string;
   color?: string;
   attendance?: AttendanceSummary
 };

app/ui/arrangements/arrangement.tsx

@@ -6,13 +6,14 @@ import React, { useState } from 'react';
 import { TableArrangement, Guest } from '@/app/lib/definitions';
 import { lusitana } from '@/app/ui/fonts';
 import { Table } from '@/app/ui/components/table';
+import { getSlug } from '@/app/lib/utils';
 
 export default function Arrangement({ id }: { id: string }) {
 
     const [tables, setTables] = useState<Array<TableArrangement>>([]);
 
     function loadTables() {
-        fetch(`/api/tables_arrangements/${id}`)
+        fetch(`/api/${getSlug()}/tables_arrangements/${id}`)
             .then((response) => response.json())
             .then((data) => {
                 setTables(data.map((record: any) => {

app/ui/components/group-form-dialog.tsx

@@ -0,0 +1,91 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { createGroup, updateGroup } from '@/app/api/groups';
+import { Group } from '@/app/lib/definitions';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { ColorPicker } from 'primereact/colorpicker';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function GroupFormDialog({groups, onCreate, onHide, group, visible }: {
+  groups: Group[],
+  onCreate?: () => void,
+  onHide: () => void,
+  group?: Group,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState(group?.name || '');
+  const [icon, setIcon] = useState(group?.icon || '');
+  const [color, setColor] = useState<string>(group?.color || '');
+  const [parentId, setParentId] = useState(group?.parentId || '');
+
+  function resetForm() {
+    setName('');
+    setIcon('');
+    setColor('');
+    setParentId('');
+  }
+
+  function submitGroup() {
+    if (!(name)) {
+      return
+    }
+
+    if (group?.id !== undefined) {
+      group.name = name;
+      group.icon = icon;
+      group.color = color;
+      group.parentId = parentId;
+
+      updateGroup(group).then(() => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+      group && createGroup({name, icon, color, parentId}, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add group" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
+            <label htmlFor="icon">Icon</label>
+          </FloatLabel>
+          <FloatLabel>
+            <ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
+            <label htmlFor="color" />
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
+              groups.map((group) => {
+                return { label: group.name, value: group.id };
+              })
+            } />
+            <label htmlFor="parentId">Parent</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {group?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/guest-form-dialog.tsx

@@ -54,7 +54,7 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
   return (
     <>
 
-      <Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={onHide}>
+      <Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
         <div className="card flex justify-evenly py-5">
           <FloatLabel>
             <InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />

app/ui/groups/table.tsx

@@ -4,12 +4,18 @@
 
 import { Group } from '@/app/lib/definitions';
 import TableOfContents from '../components/table-of-contents';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { destroyGroup } from '@/app/api/groups';
 
-export default function GroupsTable({ groups }: { groups: Group[] }) {
+export default function GroupsTable({ groups, onUpdate, onEdit }: {
+  groups: Group[],
+  onUpdate: () => void,
+  onEdit: (group: Group) => void,
+}) {
 
   return (
     <TableOfContents
-      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total']}
+      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
       caption='Groups'
       elements={groups}
       rowRender={(group) => (
@@ -38,6 +44,12 @@ export default function GroupsTable({ groups }: { groups: Group[] }) {
           <td className="px-6 text-sm">
             {group.attendance?.total}
           </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGroup(group, () => onUpdate()) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+            </div>
+          </td>
         </tr>
       )}
     />

package.json

@@ -28,10 +28,10 @@
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.10.1",
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.2"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

pnpm-lock.yaml

@@ -70,8 +70,8 @@ importers:
         specifier: 18.3.12
         version: 18.3.12
       '@types/react-dom':
-        specifier: 18.3.1
+        specifier: 18.3.2
-        version: 18.3.1
+        version: 18.3.2
 
 packages:
 
@@ -334,8 +334,8 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-dom@18.3.1':
+  '@types/react-dom@18.3.2':
-    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+    resolution: {integrity: sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==}
 
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
@@ -1364,7 +1364,7 @@ snapshots:
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-dom@18.3.1':
+  '@types/react-dom@18.3.2':
     dependencies:
       '@types/react': 18.3.12