Cleanup problem-editor and add logic to fetch problem for edit page, …

…and handle submit to api
codegasms · Jan 10, 2025 · 7badb38 · 7badb38
1 parent 2273a47
commit 7badb38
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 284 deletions.
diff --git a/app/[orgId]/problems/[id]/edit/page.tsx b/app/[orgId]/problems/[id]/edit/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ProblemEditor } from "@/components/problem-editor";
 
 export default function EditProblemPage() {

diff --git a/app/[orgId]/problems/new/page.tsx b/app/[orgId]/problems/new/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ProblemEditor } from "@/components/problem-editor";
 
 export default function NewProblemPage() {

diff --git a/app/[orgId]/problems/page.tsx b/app/[orgId]/problems/page.tsx
@@ -3,7 +3,10 @@
 import { mockProblems, Problem } from "./mockProblems";
 import { useToast } from "@/hooks/use-toast";
 import { GenericListing, ColumnDef } from "@/mint/generic-listing";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
+import { formatValidationErrors } from "@/utils/error";
+import { useRouter } from "next/navigation";
+import { MockAlert } from "@/components/mock-alert";
 
 const columns: ColumnDef<Problem>[] = [
   { header: "Problem Code", accessorKey: "nameId", sortable: true },
@@ -18,118 +21,71 @@ export default function ProblemsPage({
   params: { orgId: string };
 }) {
   const [problems, setProblems] = useState<Problem[]>([]);
-  const [selectedProblem, setSelectedProblem] = useState<Problem | null>(null);
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
-
+  const [showMockAlert, setShowMockAlert] = useState(false);
+  const router = useRouter();
   const { toast } = useToast();
 
-  useEffect(() => {
-    const fetchProblems = async () => {
-      try {
-        const response = await fetch(`/api/orgs/${params.orgId}/problems`);
-        if (!response.ok) throw new Error("Failed to fetch problems");
-        const data = await response.json();
-        setProblems(data && data.length ? data : mockProblems);
-      } catch (error) {
-        console.error("Error fetching problems:", error);
-        setProblems(mockProblems);
+  const fetchProblems = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/orgs/${params.orgId}/problems`);
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
       }
-    };
-    fetchProblems();
+      const data = await response.json();
+      setProblems(data);
+      setShowMockAlert(false);
+    } catch (error) {
+      console.error("Error fetching problems:", error);
+      setProblems(mockProblems);
+      setShowMockAlert(true);
+    }
   }, [params.orgId]);
 
-  const handleAdd = () => {
-    setSelectedProblem(null);
-    setIsEditorOpen(true);
-  };
-
-  // const handleEdit = (problem: Problem) => {
-  //   setSelectedProblem(problem);
-  //   setIsEditorOpen(true);
-  // };
+  useEffect(() => {
+    fetchProblems();
+  }, [fetchProblems]);
 
   const handleDelete = async (problem: Problem) => {
     try {
       const response = await fetch(
-        `/api/orgs/${params.orgId}/problems/${problem.id}`,
+        `/api/orgs/${params.orgId}/problems/${problem.nameId}`,
         {
           method: "DELETE",
-        },
+        }
       );
-      if (!response.ok) throw new Error("Failed to delete problem");
-      setProblems((prev) => prev.filter((p) => p.id !== problem.id));
-    } catch (error) {
-      console.error("Error deleting problem:", error);
-    }
-  };
-
-  /*
-  const handleSave = async (problem: Problem) => {
-    try {
-      const url = selectedProblem
-        ? `/api/orgs/${params.orgId}/problems/${selectedProblem.id}`
-        : `/api/orgs/${params.orgId}/problems`;
-
-      const response = await fetch(url, {
-        method: selectedProblem ? "PATCH" : "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...problem, orgId: parseInt(params.orgId) }),
-      });
 
-      if (!response.ok) throw new Error("Failed to save problem");
-      const savedProblem = await response.json();
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(formatValidationErrors(errorData));
+      }
 
-      setProblems((prev) => {
-        if (selectedProblem) {
-          return prev.map((p) =>
-            p.id === selectedProblem.id ? savedProblem : p,
-          );
-        }
-        return [...prev, savedProblem];
+      await fetchProblems();
+      toast({
+        title: "Success",
+        description: "Problem deleted successfully",
       });
+      return Promise.resolve();
     } catch (error) {
-      console.error("Error saving problem:", error);
+      console.error("Error deleting problem:", error);
+      return Promise.reject(error);
     }
   };
-  */
-
-  // const handleSavelocal = (updatedProblem: Problem) => {
-  //   setProblems(
-  //     problems.map((p) => (p.id === updatedProblem.id ? updatedProblem : p)),
-  //   );
-  //   toast({
-  //     title: "Success!",
-  //     description: "Problem updated successfully",
-  //   });
-  //   setIsEditorOpen(false);
-  // };
 
   return (
     <>
+      <MockAlert show={showMockAlert} />
       <GenericListing
         data={problems}
         columns={columns}
         title="Problems"
         searchableFields={["nameId", "title"]}
-        onAdd={handleAdd}
-        // onEdit={null}
+        onAdd={() => router.push(`/${params.orgId}/problems/new`)}
+        onEdit={(problem: Problem) =>
+          router.push(`/${params.orgId}/problems/${problem.nameId}/edit`)
+        }
         onDelete={handleDelete}
-        allowDownload={true}
-        addPage="new"
-        editPathAttr="nameId"
-        rowClickAttr="nameId"
-        editPathSuffix="edit"
       />
-      {/*
-      <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
-        <DialogContent className="max-w-4xl">
-          <ProblemEditor
-            problem={selectedProblem}
-            onClose={() => setIsEditorOpen(false)}
-            onSave={handleSavelocal}
-          />
-        </DialogContent>
-      </Dialog> */}
     </>
   );
 }