Extract groups API

app/api/groups.tsx

@@ -0,0 +1,25 @@
+import { Group } from '@/app/lib/definitions';
+
+export function loadGroups(onLoad?: (groups: Group[]) => void) {
+  fetch("/api/groups.json")
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          color: record.color,
+          attendance: {
+            considered: record.considered,
+            invited: record.invited,
+            confirmed: record.confirmed,
+            tentative: record.tentative,
+            declined: record.declined,
+            total: record.total,
+          }
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+}

app/dashboard/guests/page.tsx

@@ -10,34 +10,10 @@ 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';
+import { loadGuests, updateGuestStatus } from '@/app/api/guests';
+import { loadGroups } from '@/app/api/groups';
 
 export default function Page() {
-  function loadGroups() {
-    fetch("/api/groups")
-      .then((response) => response.json())
-      .then((data) => {
-        setGroups(data.map((record: any) => {
-          return ({
-            id: record.id,
-            name: record.name,
-            color: record.color,
-            attendance: {
-              considered: record.considered,
-              invited: record.invited,
-              confirmed: record.confirmed,
-              tentative: record.tentative,
-              declined: record.declined,
-              total: record.total,
-            }
-          });
-        }));
-        setGroupsLoaded(true);
-      }, (error) => {
-        return [];
-      });
-  }
-
   function refreshGuests() {
     loadGuests((guests) => {
       setGuests(guests);
@@ -45,13 +21,20 @@ export default function Page() {
     });
   }
 
+  function refreshGroups() {
+    loadGroups((groups) => {
+      setGroups(groups);
+      setGroupsLoaded(true);
+    });
+  }
+
   const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
 
   const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
 
-  !groupsLoaded && loadGroups();
+  !groupsLoaded && refreshGroups();
   !guestsLoaded && refreshGuests();
 
   return (