Add integration for contests, and proper error handling for groups as well

Author: aahnik

app/[orgId]/contests/page.tsx

@@ -4,6 +4,9 @@ import { GenericListing, ColumnDef } from "@/mint/generic-listing";
 import { GenericEditor, Field } from "@/mint/generic-editor";
 import { Contest, mockContests } from "./mockData";
 import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
+import { formatValidationErrors } from "@/utils/error";
 import { z } from "zod";
 
 const columns: ColumnDef<Contest>[] = [
@@ -53,38 +56,113 @@ const injectProblemsCount = (contests: Contest[]) => {
 };
 
 export default function ContestsPage() {
+  const params = useParams();
+  const orgId = params.orgId as string;
+  const { toast } = useToast();
+  
   const [contests, setContests] = useState<Contest[]>([]);
   const [selectedContest, setSelectedContest] = useState<Contest | null>(null);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
 
   useEffect(() => {
-    setContests(injectProblemsCount(mockContests));
-  }, []);
+    const fetchContests = async () => {
+      try {
+        const response = await fetch(`/api/orgs/${orgId}/contests`);
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(formatValidationErrors(errorData));
+        }
+        const data = await response.json();
+        setContests(injectProblemsCount(data));
+      } catch (error) {
+        console.error("Error fetching contests:", error);
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: error instanceof Error ? error.message : "Failed to fetch contests",
+        });
+        // Fallback to mock data in case of error
+        setContests(injectProblemsCount(mockContests));
+      }
+    };
+    fetchContests();
+  }, [orgId, toast]);
 
   const deleteContest = async (contest: Contest) => {
     try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      const response = await fetch(`/api/orgs/${orgId}/contests/${contest.nameId}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
+      }
 
-      // Update the state after successful API call
       setContests((prevContests) =>
         prevContests.filter((c) => c.id !== contest.id),
       );
+      toast({
+        title: "Success",
+        description: "Contest deleted successfully",
+      });
       return Promise.resolve();
     } catch (error) {
+      console.error("Error deleting contest:", error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: error instanceof Error ? error.message : "Failed to delete contest",
+      });
       return Promise.reject(error);
     }
   };
 
   const saveContest = async (contest: Contest) => {
-    if (selectedContest) {
-      // Update existing contest
-      setContests(contests.map((c) => (c.id === contest.id ? contest : c)));
-    } else {
-      // Add new contest
-      setContests([...contests, { ...contest, id: Date.now() }]);
+    try {
+      const url = selectedContest
+        ? `/api/orgs/${orgId}/contests/${contest.nameId}`
+        : `/api/orgs/${orgId}/contests`;
+
+      const response = await fetch(url, {
+        method: selectedContest ? "PATCH" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(contest),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
+      }
+
+      const savedContest = await response.json();
+
+      if (selectedContest) {
+        setContests(contests.map((c) => (c.id === savedContest.id ? savedContest : c)));
+        toast({
+          title: "Success",
+          description: "Contest updated successfully",
+        });
+      } else {
+        setContests([...contests, savedContest]);
+        toast({
+          title: "Success",
+          description: "Contest created successfully",
+        });
+      }
+
+      setIsEditorOpen(false);
+    } catch (error) {
+      console.error("Error saving contest:", error);
+      toast({
+        variant: "destructive",
+        title: "Validation Error",
+        description: error instanceof Error ? error.message : "Failed to save contest",
+      });
+      throw error;
     }
-    setIsEditorOpen(false);
   };
 
   return (

app/[orgId]/groups/page.tsx

@@ -5,6 +5,8 @@ import { GenericEditor, Field } from "@/mint/generic-editor";
 import { Group, mockGroups } from "./mockData";
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
+import { formatValidationErrors } from "@/utils/error";
 import { z } from "zod";
 
 const columns: ColumnDef<Group>[] = [
@@ -61,6 +63,7 @@ const fields: Field[] = [
 export default function GroupsPage() {
   const params = useParams();
   const orgId = params.orgId as string;
+  const { toast } = useToast();
 
   const [groups, setGroups] = useState<Group[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
@@ -71,18 +74,24 @@ export default function GroupsPage() {
       try {
         const response = await fetch(`/api/orgs/${orgId}/groups`);
         if (!response.ok) {
-          throw new Error("Failed to fetch groups");
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(formatValidationErrors(errorData));
         }
         const data = await response.json();
         setGroups(injectUsersCount(data));
       } catch (error) {
         console.error("Error fetching groups:", error);
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: error instanceof Error ? error.message : "Failed to fetch groups",
+        });
         // Fallback to mock data in case of error
         setGroups(injectUsersCount(mockGroups));
       }
     };
     fetchGroups();
-  }, [orgId]);
+  }, [orgId, toast]);
 
   const deleteGroup = async (group: Group) => {
     try {
@@ -91,13 +100,23 @@ export default function GroupsPage() {
       });
 
       if (!response.ok) {
-        throw new Error("Failed to delete group");
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
       }
 
       setGroups((prevGroups) => prevGroups.filter((g) => g.id !== group.id));
+      toast({
+        title: "Success",
+        description: "Group deleted successfully",
+      });
       return Promise.resolve();
     } catch (error) {
       console.error("Error deleting group:", error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: error instanceof Error ? error.message : "Failed to delete group",
+      });
       return Promise.reject(error);
     }
   };
@@ -117,22 +136,34 @@ export default function GroupsPage() {
       });
 
       if (!response.ok) {
-        throw new Error(
-          `Failed to ${selectedGroup ? "update" : "create"} group`,
-        );
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
       }
 
       const savedGroup = await response.json();
 
       if (selectedGroup) {
         setGroups(groups.map((g) => (g.id === savedGroup.id ? savedGroup : g)));
+        toast({
+          title: "Success",
+          description: "Group updated successfully",
+        });
       } else {
         setGroups([...groups, savedGroup]);
+        toast({
+          title: "Success",
+          description: "Group created successfully",
+        });
       }
 
       setIsEditorOpen(false);
     } catch (error) {
       console.error("Error saving group:", error);
+      toast({
+        variant: "destructive",
+        title: "Validation Error",
+        description: error instanceof Error ? error.message : "Failed to save group",
+      });
       throw error;
     }
   };

utils/error.ts

@@ -0,0 +1,11 @@
+export const formatValidationErrors = (errorData: any) => {
+  if (errorData?.errors && Array.isArray(errorData.errors)) {
+    return errorData.errors
+      .map((err: any) => {
+        const field = err.path?.[0] ? `${err.path[0]}: ` : "";
+        return `${field}${err.message}`;
+      })
+      .join("\n");
+  }
+  return "Unknown error occurred";
+};