Define a button to reset the affinities of all groups

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

@@ -5,6 +5,7 @@
 import { AbstractApi, } from '@/app/api/abstract-api';
 import { Group, GroupSerializer } from '@/app/lib/group';
 import { Guest, GuestSerializer } from '@/app/lib/guest';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 import AffinitiesFormDialog from '@/app/ui/components/affinities-form-dialog';
 import { classNames } from '@/app/ui/components/button';
 import GroupFormDialog from '@/app/ui/components/group-form-dialog';
@@ -31,6 +32,16 @@ export default function Page() {
     });
   }
 
+  function resetAffinities() {
+    fetch(`/api/${getSlug()}/groups/affinities/reset`, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+  }
+
   const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
   const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
@@ -70,7 +81,11 @@ export default function Page() {
         <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
           <div className="flex flex-col w-full items-center justify-between">
 
-            <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+            <div>
+              <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+              <button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
+            </div>
+
             <GroupFormDialog
               key={groupBeingEdited?.id}
               groups={groups}