Merge pull request #46 from codegasms/problem

Manage add problem state locally, and other misc fixes and works

Author: aahnik

app/[orgId]/problems/new/page.tsx

@@ -1,5 +1,5 @@
-import { AddProblem } from "@/components/add-problem";
+import { ProblemEditor } from "@/components/problem-editor";
 
-export default function AddProblemPage() {
-  return <AddProblem />;
+export default function NewProblemPage() {
+  return <ProblemEditor />;
 }

app/[orgId]/problems/page.tsx

@@ -3,6 +3,8 @@ import { mockProblems, Problem } from "./mockProblems";
 import { useToast } from "@/hooks/use-toast";
 import { GenericListing, ColumnDef } from "@/mint/generic-listing";
 import { useEffect, useState } from "react";
+import { ProblemEditor } from "@/components/problem-editor";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const columns: ColumnDef<Problem>[] = [
   { header: "Problem Code", accessorKey: "nameId", sortable: true },
@@ -18,7 +20,7 @@ export default function ProblemsPage({
 }) {
   const [problems, setProblems] = useState<Problem[]>([]);
   const [selectedProblem, setSelectedProblem] = useState<Problem | null>(null);
-  //   const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
 
   const { toast } = useToast();
 
@@ -31,11 +33,6 @@ export default function ProblemsPage({
         setProblems(data);
       } catch (error) {
         console.error("Error fetching problems:", error);
-        // toast({
-        //   title: "Error fetching problems",
-        //   description: "Using mock data as fallback",
-        //   variant: "destructive",
-        // });
         setProblems(mockProblems);
       }
     };
@@ -64,7 +61,6 @@ export default function ProblemsPage({
       setProblems((prev) => prev.filter((p) => p.id !== problem.id));
     } catch (error) {
       console.error("Error deleting problem:", error);
-      // TODO: Add proper error handling
     }
   };
 
@@ -91,17 +87,24 @@ export default function ProblemsPage({
         }
         return [...prev, savedProblem];
       });
-
-      setIsEditorOpen(false);
-      setSelectedProblem(null);
     } catch (error) {
       console.error("Error saving problem:", error);
-      // TODO: Add proper error handling
     }
   };
 
+  const handleSavelocal = (updatedProblem: Problem) => {
+    setProblems(
+      problems.map((p) => (p.id === updatedProblem.id ? updatedProblem : p)),
+    );
+    toast({
+      title: "Success!",
+      description: "Problem updated successfully",
+    });
+    setIsEditorOpen(false);
+  };
+
   return (
-    <>
+    <div className="container mx-auto py-10">
       <GenericListing
         data={problems}
         columns={columns}
@@ -113,6 +116,16 @@ export default function ProblemsPage({
         allowDownload={true}
         addPage="new"
       />
-    </>
+
+      <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
+        <DialogContent className="max-w-4xl">
+          <ProblemEditor
+            problem={selectedProblem}
+            onClose={() => setIsEditorOpen(false)}
+            onSave={handleSavelocal}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 }

components/code-editor.tsx

@@ -309,9 +309,6 @@ export function CodeEditor() {
                             </div>
                             <div className="bg-muted rounded p-2">
                               <div className="text-sm font-mono">
-                                <span className="text-muted-foreground">
-                                  x ={" "}
-                                </span>
                                 <span className="text-foreground">121</span>
                               </div>
                             </div>
@@ -325,9 +322,6 @@ export function CodeEditor() {
                             </div>
                             <div className="bg-muted rounded p-2">
                               <div className="text-sm font-mono">
-                                <span className="text-muted-foreground">
-                                  x ={" "}
-                                </span>
                                 <span className="text-foreground">-121</span>
                               </div>
                             </div>

components/add-problem.tsx components/problem-editor.tsxcomponents/add-problem.tsx renamed to components/problem-editor.tsx

@@ -7,28 +7,53 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Plus, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
+import {
+  mockProblems,
+  Problem as ListProblem,
+} from "@/app/[orgId]/problems/mockProblems";
 
 interface TestCase {
   input: string;
-  expectedOutput: string;
+  output: string;
+  kind: "example" | "test";
 }
 
 interface Problem {
-  id: string;
+  id?: string;
+  code: string;
   title: string;
   description: string;
+  allowedLanguages: string[];
   testCases: TestCase[];
 }
 
-export function AddProblem() {
+interface ProblemEditorProps {
+  problem?: ListProblem | null;
+  onClose?: () => void;
+  onSave?: (problem: ListProblem) => void;
+}
+
+export function ProblemEditor({
+  problem,
+  onClose,
+  onSave,
+}: ProblemEditorProps) {
   const router = useRouter();
   const { toast } = useToast();
   const [problems, setProblems] = useState<Problem[]>([
     {
-      id: "1",
-      title: "",
-      description: "",
-      testCases: [{ input: "", expectedOutput: "" }],
+      id: problem?.id?.toString() || "1",
+      code: problem?.nameId || "",
+      title: problem?.title || "",
+      description: problem?.description || "",
+      allowedLanguages: problem?.allowedLanguages || [
+        "python",
+        "javascript",
+        "typescript",
+      ],
+      testCases: problem?.testCases || [
+        { input: "", output: "", kind: "example" },
+      ],
     },
   ]);
   const [currentProblemIndex, setCurrentProblemIndex] = useState(0);
@@ -41,7 +66,7 @@ export function AddProblem() {
       ...currentProblem,
       testCases: [
         ...currentProblem.testCases,
-        { input: "", expectedOutput: "" },
+        { input: "", output: "", kind: "example" },
       ],
     };
     setProblems(updatedProblems);
@@ -58,7 +83,7 @@ export function AddProblem() {
 
   const updateTestCase = (
     index: number,
-    field: "input" | "expectedOutput",
+    field: "input" | "output" | "kind",
     value: string,
   ) => {
     const updatedProblems = [...problems];
@@ -73,8 +98,8 @@ export function AddProblem() {
   };
 
   const updateProblemField = (
-    field: "title" | "description",
-    value: string,
+    field: "code" | "title" | "description" | "allowedLanguages",
+    value: string | string[],
   ) => {
     const updatedProblems = [...problems];
     updatedProblems[currentProblemIndex] = {
@@ -87,9 +112,11 @@ export function AddProblem() {
   const addNewProblem = () => {
     const newProblem: Problem = {
       id: (problems.length + 1).toString(),
+      code: "",
       title: "",
       description: "",
-      testCases: [{ input: "", expectedOutput: "" }],
+      allowedLanguages: ["python", "javascript", "typescript"],
+      testCases: [{ input: "", output: "", kind: "example" }],
     };
     setProblems([...problems, newProblem]);
     setCurrentProblemIndex(problems.length);
@@ -115,9 +142,84 @@ export function AddProblem() {
     router.push("/contests");
   };
 
+  const handleSaveProblem = async () => {
+    try {
+      // Validate required fields
+      if (!currentProblem.title || !currentProblem.description) {
+        toast({
+          title: "Error",
+          description: "Please fill in all required fields",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // Validate test cases
+      if (currentProblem.testCases.some((tc) => !tc.input || !tc.output)) {
+        toast({
+          title: "Error",
+          description: "Please fill in all test cases",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // If editing an existing problem
+      if (problem) {
+        const updatedProblem: ListProblem = {
+          ...problem,
+          title: currentProblem.title,
+          allowedLanguages: currentProblem.allowedLanguages,
+        };
+        onSave?.(updatedProblem);
+        onClose?.();
+        return;
+      }
+
+      // Creating a new problem
+      const nameId = Math.random().toString(36).substring(2, 7).toUpperCase();
+      const newProblem: ListProblem = {
+        id: mockProblems.length + 1,
+        nameId,
+        title: currentProblem.title,
+        allowedLanguages: currentProblem.allowedLanguages,
+        createdAt: new Date().toISOString().split("T")[0],
+        orgId: 1,
+      };
+
+      mockProblems.push(newProblem);
+
+      toast({
+        title: "Success!",
+        description: "Problem saved successfully",
+      });
+
+      // Get orgId from URL
+      const pathSegments = window.location.pathname.split("/");
+      const orgId = pathSegments[1];
+
+      // Redirect to problems page
+      router.push(`/${orgId}/problems`);
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to save problem",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <div className="min-h-screen bg-background text-foreground flex flex-col">
       <div className="flex-1 p-6">
+        <div className="flex justify-end mb-4">
+          <Button
+            onClick={handleSaveProblem}
+            className="bg-primary hover:bg-primary/90 text-primary-foreground"
+          >
+            Save Problem
+          </Button>
+        </div>
         {/* <div className="flex justify-between items-center mb-6">
           <div className="flex gap-2">
             {problems.map((problem, index) => (
@@ -172,6 +274,22 @@ export function AddProblem() {
 
           <TabsContent value="problem">
             <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="code"
+                  className="block text-sm font-medium mb-1"
+                >
+                  Problem Code
+                </label>
+                <Input
+                  id="code"
+                  value={currentProblem.code}
+                  onChange={(e) => updateProblemField("code", e.target.value)}
+                  placeholder="Enter problem code"
+                  className="bg-muted border-border"
+                />
+              </div>
+
               <div>
                 <label
                   htmlFor="title"
@@ -205,6 +323,27 @@ export function AddProblem() {
                   className="bg-muted border-border min-h-[200px]"
                 />
               </div>
+
+              <div>
+                <label
+                  htmlFor="allowedLanguages"
+                  className="block text-sm font-medium mb-1"
+                >
+                  Allowed Languages
+                </label>
+                <Input
+                  id="allowedLanguages"
+                  value={currentProblem.allowedLanguages.join(", ")}
+                  onChange={(e) =>
+                    updateProblemField(
+                      "allowedLanguages",
+                      e.target.value.split(", "),
+                    )
+                  }
+                  placeholder="Enter allowed languages"
+                  className="bg-muted border-border"
+                />
+              </div>
             </div>
           </TabsContent>
 
@@ -250,9 +389,9 @@ export function AddProblem() {
                     </label>
                     <Textarea
                       id={`output-${index}`}
-                      value={testCase.expectedOutput}
+                      value={testCase.output}
                       onChange={(e) =>
-                        updateTestCase(index, "expectedOutput", e.target.value)
+                        updateTestCase(index, "output", e.target.value)
                       }
                       placeholder="Enter expected output"
                       className="bg-muted-foreground/20 border-border"