Integrate groups page with backend

Author: aahnik

app/[orgId]/groups/page.tsx

@@ -4,6 +4,7 @@ import { GenericListing, ColumnDef } from "@/mint/generic-listing";
 import { GenericEditor, Field } from "@/mint/generic-editor";
 import { Group, mockGroups } from "./mockData";
 import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
 import { z } from "zod";
 
 const columns: ColumnDef<Group>[] = [
@@ -58,43 +59,82 @@ const fields: Field[] = [
 ];
 
 export default function GroupsPage() {
+  const params = useParams();
+  const orgId = params.orgId as string;
+
   const [groups, setGroups] = useState<Group[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
 
   useEffect(() => {
-    setGroups(injectUsersCount(mockGroups));
-  }, []);
+    const fetchGroups = async () => {
+      try {
+        const response = await fetch(`/api/orgs/${orgId}/groups`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch groups");
+        }
+        const data = await response.json();
+        setGroups(injectUsersCount(data));
+      } catch (error) {
+        console.error("Error fetching groups:", error);
+        // Fallback to mock data in case of error
+        setGroups(injectUsersCount(mockGroups));
+      }
+    };
+    fetchGroups();
+  }, [orgId]);
 
   const deleteGroup = async (group: Group) => {
     try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      const response = await fetch(`/api/orgs/${orgId}/groups/${group.nameId}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to delete group");
+      }
 
-      // Update the state after successful API call
       setGroups((prevGroups) => prevGroups.filter((g) => g.id !== group.id));
       return Promise.resolve();
     } catch (error) {
+      console.error("Error deleting group:", error);
       return Promise.reject(error);
     }
   };
 
   const saveGroup = async (group: Group) => {
-    if (selectedGroup) {
-      // Update existing group
-      setGroups(
-        injectUsersCount(groups.map((g) => (g.id === group.id ? group : g))),
-      );
-    } else {
-      // Add new group
-      setGroups(
-        injectUsersCount([
-          ...groups,
-          { ...group, id: Date.now(), createdAt: new Date().toISOString() },
-        ]),
-      );
+    try {
+      const url = selectedGroup
+        ? `/api/orgs/${orgId}/groups/${group.nameId}`
+        : `/api/orgs/${orgId}/groups`;
+
+      const response = await fetch(url, {
+        method: selectedGroup ? "PATCH" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(group),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to ${selectedGroup ? "update" : "create"} group`,
+        );
+      }
+
+      const savedGroup = await response.json();
+
+      if (selectedGroup) {
+        setGroups(groups.map((g) => (g.id === savedGroup.id ? savedGroup : g)));
+      } else {
+        setGroups([...groups, savedGroup]);
+      }
+
+      setIsEditorOpen(false);
+    } catch (error) {
+      console.error("Error saving group:", error);
+      throw error;
     }
-    setIsEditorOpen(false);
   };
 
   return (