Refactor feature to add groups avoiding reload and improve specs

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

@@ -18,6 +18,7 @@ import { Toast } from 'primereact/toast';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import InvitationsBoard from '@/app/ui/invitations/board';
 import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
+import { Entity } from '@/app/lib/definitions';
 
 
 export default function Page() {
@@ -88,7 +89,22 @@ export default function Page() {
 
   const [invitations, setInvitations] = useState<Array<Invitation>>([]);
 
-
+  function updateList<T extends Entity>(originalList: T[], element: T): T[] {
+    {
+      const index = originalList.findIndex(g => g.id === element?.id);
+      if (index !== -1) {
+        // Replace existing element
+        return [
+          element!,
+          ...originalList.slice(0, index),
+          ...originalList.slice(index + 1)
+        ];
+      } else {
+        // Add new element at the start
+        return [element!, ...originalList];
+      }
+    }
+  }
 
   return (
     <div className="w-full">
@@ -100,21 +116,8 @@ export default function Page() {
               key={guestBeingEdited?.id}
               groups={groups}
               onCreate={(newGuest) => {
-                setGuests(prevGuests => {
-                  const index = prevGuests.findIndex(g => g.id === newGuest?.id);
-                  if (index !== -1) {
-                  // Replace existing guest
-                  return [
-                    newGuest!,
-                    ...prevGuests.slice(0, index),
-                    ...prevGuests.slice(index + 1)
-                  ];
-                  } else {
-                  // Add new guest at the start
-                  return [newGuest!, ...prevGuests];
-                  }
-                });
-                setGuestBeingEdited(undefined) ;
+                setGuests(guests => updateList(guests, newGuest));
+                setGuestBeingEdited(undefined);
               }}
               guest={guestBeingEdited}
               visible={guestBeingEdited !== undefined}
@@ -141,7 +144,10 @@ export default function Page() {
             <GroupFormDialog
               key={groupBeingEdited?.id}
               groups={groups}
-              onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
+              onCreate={(newGroup) => {
+                setGroups(groups => updateList(groups, newGroup));
+                setGroupBeingEdited(undefined)
+              }}
               group={groupBeingEdited}
               visible={groupBeingEdited !== undefined}
               onHide={() => { setGroupBeingEdited(undefined) }}
@@ -165,7 +171,7 @@ export default function Page() {
           </div>
         </ TabPanel>
         <TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
-          <InvitationsBoard guests={guests} invitations={invitations}/>
+          <InvitationsBoard guests={guests} invitations={invitations} />
         </TabPanel>
       </ TabView>
     </div>

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

@@ -14,7 +14,7 @@ import { useState } from 'react';
 
 export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
   groups: Group[],
-  onCreate?: () => void,
+  onCreate?: (newGroup: Group) => void,
   onHide: () => void,
   group?: Group,
   visible: boolean,
@@ -46,15 +46,15 @@ export default function GroupFormDialog({ groups, onCreate, onHide, group, visib
       group.color = color;
       group.parentId = parentId;
 
-      api.update(serializer, group, () => {
+      api.update(serializer, group, (newGroup) => {
         resetForm();
-        onCreate && onCreate();
+        onCreate && onCreate(newGroup);
       });
     } else {
 
-      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), () => {
+      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
         resetForm();
-        onCreate && onCreate();
+        onCreate && onCreate(newGroup);
       });
     }
   }

tests/groups.spec.ts

@@ -1,7 +1,9 @@
 import { test, expect, Page } from '@playwright/test'
 import mockGroupsAPI from './mocks/groups';
+import mockGuestsAPI from './mocks/guests';
 
 test('should allow CRUD on groups', async ({ page }) => {
+  await mockGuestsAPI({ page });
   await mockGroupsAPI({ page });
 
   await page.goto('/default/dashboard/guests');
@@ -10,6 +12,8 @@ test('should allow CRUD on groups', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();
 
+
+  // List all groups
   await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
 
   await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(0)).toHaveText('Name');
@@ -31,7 +35,6 @@ test('should allow CRUD on groups', async ({ page }) => {
   await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('3');
   await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
 
-
   await expect(page.getByRole('row').nth(2).getByRole('cell').nth(0)).toContainText('Pam\'s work');
   await expect(page.getByRole('row').nth(2).getByRole('cell').nth(2)).toHaveText('0');
   await expect(page.getByRole('row').nth(2).getByRole('cell').nth(3)).toHaveText('2');
@@ -41,4 +44,22 @@ test('should allow CRUD on groups', async ({ page }) => {
   await expect(page.getByRole('row').nth(2).getByRole('cell').nth(7)).toHaveText('2');
   await expect(page.getByRole('row').nth(2).locator('svg:visible')).toHaveCount(3);
 
+  // Add a new group
+  await page.getByRole('button', { name: 'Add new' }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+
+  await dialog.getByLabel('Name').fill("Pam's friends");
+  await dialog.getByRole('button', { name: 'Create' }).click();
+
+  await expect(dialog).not.toBeVisible();
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s friends');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
 });

tests/mocks/groups.tsx

@@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
 
 export default async function mockGroupsAPI({ page }: { page: Page }): Promise<void> {
   page.route('*/**/api/default/groups', async route => {
+    if (route.request().method() === 'GET') {
       const json = [
         {
           "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
@@ -36,5 +37,24 @@ export default async function mockGroupsAPI({ page }: { page: Page }): Promise<v
       ];
 
       await route.fulfill({ json })
+    } else if (route.request().method() === 'POST') {
+      const json = {
+          "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
+          "name": "Pam's friends",
+          "icon": "pi pi-desktop",
+          "parent_id": null,
+          "color": "#0000ff",
+          "attendance": {
+            "total": 0,
+            "considered": 0,
+            "invited": 0,
+            "confirmed": 0,
+            "declined": 0,
+            "tentative": 0
+          }
+        }
+
+      await route.fulfill({ json })
+    }
   })
 }