Merge pull request 'Display a toast indicating affinities have been reset' (#260) from feat/notification-affinities-reset into main

Reviewed-on: #260

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

@@ -14,10 +14,13 @@ import GroupsTable from '@/app/ui/groups/table';
 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 { Toast } from 'primereact/toast';
+import { Suspense, useRef, useState } from 'react';
 
 
 export default function Page() {
+  const toast = useRef<Toast>(null);
+  
   function refreshGuests() {
     new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
       setGuests(objects);
@@ -36,10 +39,28 @@ export default function Page() {
     fetch(`/api/${getSlug()}/groups/affinities/reset`, {
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
+      'Accept': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
       }
     })
+    .then(response => {
+      if (response.ok) {
+      showAffinitiesResetSuccess();
+      } else {
+      console.error('Failed to reset affinities');
+      }
+    })
+    .catch(error => {
+      console.error('Error resetting affinities:', error);
+    });
+  }
+
+  function showAffinitiesResetSuccess() {
+    toast.current?.show({
+      severity: 'success',
+      summary: 'Affinities reset',
+      detail: 'All affinities have been reset to default values.'
+    });
   }
 
   const [groupsLoaded, setGroupsLoaded] = useState(false);
@@ -82,6 +103,7 @@ export default function Page() {
           <div className="flex flex-col w-full items-center justify-between">
 
             <div>
+              <Toast ref={toast} />
               <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
               <button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
             </div>