From 3f10c08a6cbe25785a65e82482147c5614a5eb2d Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Wed, 9 Apr 2025 21:26:06 +0800
Subject: [PATCH] feat(testcase): add dynamic testcase card and form for
 problem view

---
 .../(app)/problems/[id]/features/testcase.tsx | 11 +++-
 src/components/testcase-card.tsx              | 43 ++++++++++++
 src/components/testcase-form.tsx              | 66 +++++++++++++++++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/components/testcase-card.tsx
 create mode 100644 src/components/testcase-form.tsx

diff --git a/src/app/(app)/problems/[id]/features/testcase.tsx b/src/app/(app)/problems/[id]/features/testcase.tsx
index 4526fa0..b102c86 100644
--- a/src/app/(app)/problems/[id]/features/testcase.tsx
+++ b/src/app/(app)/problems/[id]/features/testcase.tsx
@@ -1,3 +1,12 @@
+import TestcaseCard from "@/components/testcase-card";
+import { useProblemStore } from "@/providers/problem-store-provider";
+
 export default function Testcase() {
-  return <div className="h-full px-4">Testcase</div>;
+  const problem = useProblemStore((state) => state.problem);
+
+  return (
+    <div className="h-full rounded-b-3xl border border-t-0 border-muted bg-background">
+      <TestcaseCard testcases={problem.testcases} />
+    </div>
+  );
 }
diff --git a/src/components/testcase-card.tsx b/src/components/testcase-card.tsx
new file mode 100644
index 0000000..408ce08
--- /dev/null
+++ b/src/components/testcase-card.tsx
@@ -0,0 +1,43 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { TestcaseWithDetails } from "@/types/prisma";
+import TestcaseForm from "@/components/testcase-form";
+
+interface TestcaseCardProps {
+  testcases: TestcaseWithDetails;
+}
+
+export default function TestcaseCard({ testcases }: TestcaseCardProps) {
+  return (
+    <Tabs defaultValue="case-1" className="items-center px-5 py-4">
+      <TabsList className="bg-transparent p-0">
+        {testcases.map((_, index) => (
+          <TabsTrigger
+            key={`tab-${index}`}
+            value={`case-${index + 1}`}
+            className="data-[state=active]:bg-muted data-[state=active]:shadow-none"
+          >
+            Case {index + 1}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {testcases.map((testcase, index) => {
+        const formData = testcase.data.reduce((acc, field) => {
+          acc[field.label] = field.value;
+          return acc;
+        }, {} as Record<string, string>);
+
+        return (
+          <TabsContent key={`content-${index}`} value={`case-${index + 1}`}>
+            <TestcaseForm {...formData} />
+          </TabsContent>
+        );
+      })}
+    </Tabs>
+  );
+}
diff --git a/src/components/testcase-form.tsx b/src/components/testcase-form.tsx
new file mode 100644
index 0000000..659dc56
--- /dev/null
+++ b/src/components/testcase-form.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as z from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const formSchema = z.record(z.string().min(1));
+
+interface TestcaseFormInterface {
+  [key: string]: string | undefined;
+}
+
+export default function TestcaseForm(props: TestcaseFormInterface) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: props,
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      console.log(values);
+      toast.success(JSON.stringify(values, null, 2));
+    } catch (error) {
+      console.error("Form submission error", error);
+      toast.error("Failed to submit the form. Please try again.");
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4" id="testcase-form">
+        {Object.keys(props).map((fieldName) => (
+          <FormField
+            key={fieldName}
+            control={form.control}
+            name={fieldName}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{`${fieldName} =`}</FormLabel>
+                <FormControl>
+                  <Input
+                    className="bg-muted border-transparent shadow-none rounded-lg h-10"
+                    placeholder={`Enter ${fieldName}`}
+                    type="text"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ))}
+      </form>
+    </Form>
+  );
+}