Extract a guests API

app/api/guests.tsx

@@ -0,0 +1,49 @@
+import { Guest } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
+
+export function loadGuests(onLoad?: (guests: Guest[]) => void) {
+  fetch("/api/guests.json")
+    .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 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((guests) => null))
+    .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/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,6 +10,7 @@ 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, updateGuestStatus} from '@/app/api/guests';
 
 export default function Page() {
   function loadGroups() {
@@ -38,36 +38,11 @@ export default function Page() {
       });
   }
 
-  function loadGuests() {
+  function refreshGuests() {
-    fetch("/api/guests.json")
+    loadGuests((guests) => {
-      .then((response) => response.json())
+      setGuests(guests);
-      .then((data) => {
-        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);
@@ -77,7 +52,7 @@ export default function Page() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
 
   !groupsLoaded && loadGroups();
-  !guestsLoaded && loadGuests();
+  !guestsLoaded && refreshGuests();
 
   return (
     <div className="w-full">
@@ -86,7 +61,7 @@ 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} />
             </Suspense>

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',
-      body: JSON.stringify({ name: name, group_id: group }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
       setVisible(false);
+      setName('');
+      setGroup(null);
       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>
     </>