From 109d0bcc28a0c3beb98172530d20a4310f0a7329 Mon Sep 17 00:00:00 2001
From: vishalmishraa <vishal.mishra9470@gmail.com>
Date: Mon, 16 Sep 2024 11:45:09 +0530
Subject: [PATCH] ref problem page

---
 .../contest/[id]/problem/[problemId]/page.tsx |  6 +-
 .../(problem)/problem/[problemId]/page.tsx    | 10 ++--
 apps/web/components/ProblemSubmitBar.tsx      | 55 -------------------
 .../components/problem-page/ProblemDetail.tsx | 30 ++++++++++
 .../{ => problem-page}/ProblemStatement.tsx   |  0
 .../problem-page/ProblemSubmitBar.tsx         | 39 +++++++++++++
 6 files changed, 77 insertions(+), 63 deletions(-)
 delete mode 100644 apps/web/components/ProblemSubmitBar.tsx
 create mode 100644 apps/web/components/problem-page/ProblemDetail.tsx
 rename apps/web/components/{ => problem-page}/ProblemStatement.tsx (100%)
 create mode 100644 apps/web/components/problem-page/ProblemSubmitBar.tsx

diff --git a/apps/web/app/(contest)/contest/[id]/problem/[problemId]/page.tsx b/apps/web/app/(contest)/contest/[id]/problem/[problemId]/page.tsx
index 10388b8..38b03cd 100644
--- a/apps/web/app/(contest)/contest/[id]/problem/[problemId]/page.tsx
+++ b/apps/web/app/(contest)/contest/[id]/problem/[problemId]/page.tsx
@@ -1,6 +1,6 @@
-import { ProblemStatement } from "@/components/ProblemStatement";
+import { ProblemDetail } from "@/components/problem-page/ProblemDetail";
+import { ProblemSubmitBar } from "@/components/problem-page/ProblemSubmitBar";
 import { getProblem } from "../../../../../../controllers/problem";
-import { ProblemSubmitBar } from "@/components/ProblemSubmitBar";
 
 export default async function ProblemPage({
   params: { id, problemId },
@@ -21,7 +21,7 @@ export default async function ProblemPage({
       <main className="flex-1 py-8 md:py-12 grid md:grid-cols-2 gap-8 md:gap-12">
         <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
           <div className="prose prose-stone dark:prose-invert">
-            <ProblemStatement description={problem.description} title={problem.title} tags={problem.tags}/>
+            <ProblemDetail problem={problem} />
           </div>
         </div>
         <ProblemSubmitBar contestId={id} problem={problem} />
diff --git a/apps/web/app/(problem)/problem/[problemId]/page.tsx b/apps/web/app/(problem)/problem/[problemId]/page.tsx
index 6974437..34d934c 100644
--- a/apps/web/app/(problem)/problem/[problemId]/page.tsx
+++ b/apps/web/app/(problem)/problem/[problemId]/page.tsx
@@ -1,11 +1,11 @@
-import { ProblemStatement } from "../../../../components/ProblemStatement";
-import { ProblemSubmitBar } from "../../../../components/ProblemSubmitBar";
-import { getProblem } from "../../../../controllers/problem";
+import { ProblemDetail } from "@/components/problem-page/ProblemDetail";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from "@/components/ui/resizable"
+} from "@/components/ui/resizable";
+import { ProblemSubmitBar } from "../../../../components/problem-page/ProblemSubmitBar";
+import { getProblem } from "../../../../controllers/problem";
 
 
 export default async function ProblemPage({
@@ -41,7 +41,7 @@ export default async function ProblemPage({
           <ResizablePanel defaultSize={50}>
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md  px-6 h-ful">
               <div className="prose prose-stone dark:prose-invert h-full ">
-                <ProblemStatement description={problem.description} title={problem.title} tags={problem.tags} />
+                <ProblemDetail problem={problem} />
               </div>
             </div>
           </ResizablePanel>
diff --git a/apps/web/components/ProblemSubmitBar.tsx b/apps/web/components/ProblemSubmitBar.tsx
deleted file mode 100644
index c05fc6a..0000000
--- a/apps/web/components/ProblemSubmitBar.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-import { useState } from "react";
-import { Submissions } from "./problem-page/Submissions";
-import { SubmitProblem } from "./problem-page/SubmitProblem";
-import { LanguageSelector } from "./problem-page/LanguageSelector";
-import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
-import { LANGUAGE_MAPPING } from "@repo/common/language";
-
-export interface IProblem {
-    id: string;
-    title: string;
-    description: string;
-    slug: string;
-    defaultCode: {
-        languageId: number;
-        code: string;
-    }[];
-};
-
-
-export const ProblemSubmitBar = ({
-    problem,
-    contestId,
-}: {
-    problem: IProblem;
-    contestId?: string;
-}) => {
-    const [activeTab, setActiveTab] = useState("problem");
-    const [language, setLanguage] = useState(
-        Object.keys(LANGUAGE_MAPPING)[0] as string
-    );
-
-    return (
-        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
-            <div className="flex justify-between items-center mb-4">
-                <Tabs
-                    defaultValue="problem"
-                    className="rounded-md"
-                    value={activeTab}
-                    onValueChange={setActiveTab}>
-                    <TabsList className="grid grid-cols-2 w-48 gap-2">
-                        <TabsTrigger value="problem">Submit</TabsTrigger>
-                        <TabsTrigger value="submissions">Submissions</TabsTrigger>
-                    </TabsList>
-                </Tabs>
-                {activeTab === "problem" && <LanguageSelector language={language} setLanguage={setLanguage}/>}
-            </div>
-            <div className={`${activeTab === "problem" ? "" : "hidden"}`}>
-                <SubmitProblem problem={problem} contestId={contestId} language={language} />
-            </div>
-            {activeTab === "submissions" && <Submissions problem={problem} />}
-        </div>
-    )
-};
-
diff --git a/apps/web/components/problem-page/ProblemDetail.tsx b/apps/web/components/problem-page/ProblemDetail.tsx
new file mode 100644
index 0000000..0f2a9e8
--- /dev/null
+++ b/apps/web/components/problem-page/ProblemDetail.tsx
@@ -0,0 +1,30 @@
+"use client"
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Submissions } from "./Submissions";
+import { ProblemStatement } from "./ProblemStatement";
+
+export function ProblemDetail({ problem }: { problem: any }) {
+    const [activeTab, setActiveTab] = useState("description");
+
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
+            <div className="flex justify-between items-center mb-4">
+                <Tabs
+                    defaultValue="problem"
+                    className="rounded-md"
+                    value={activeTab}
+                    onValueChange={setActiveTab}>
+                    <TabsList className="grid grid-cols-2 w-48 gap-2">
+                        <TabsTrigger value="description">Description</TabsTrigger>
+                        <TabsTrigger value="submissions">Submissions</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            </div>
+            {activeTab === "submissions" && <Submissions problem={problem} />}
+            {activeTab === "description" && (
+                <ProblemStatement description={problem.description} tags={problem.tags} title={problem.title} />
+            )}
+        </div>
+    )
+}
diff --git a/apps/web/components/ProblemStatement.tsx b/apps/web/components/problem-page/ProblemStatement.tsx
similarity index 100%
rename from apps/web/components/ProblemStatement.tsx
rename to apps/web/components/problem-page/ProblemStatement.tsx
diff --git a/apps/web/components/problem-page/ProblemSubmitBar.tsx b/apps/web/components/problem-page/ProblemSubmitBar.tsx
new file mode 100644
index 0000000..d6d0e3f
--- /dev/null
+++ b/apps/web/components/problem-page/ProblemSubmitBar.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { LANGUAGE_MAPPING } from "@repo/common/language";
+import { useState } from "react";
+import { LanguageSelector } from "./LanguageSelector";
+import { SubmitProblem } from "./SubmitProblem";
+
+export interface IProblem {
+    id: string;
+    title: string;
+    description: string;
+    slug: string;
+    defaultCode: {
+        languageId: number;
+        code: string;
+    }[];
+};
+
+
+export const ProblemSubmitBar = ({
+    problem,
+    contestId,
+}: {
+    problem: IProblem;
+    contestId?: string;
+}) => {
+    const [language, setLanguage] = useState(
+        Object.keys(LANGUAGE_MAPPING)[0] as string
+    );
+
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md ">
+            <div className="flex justify-between items-center mb-4">
+                 <LanguageSelector language={language} setLanguage={setLanguage} />
+            </div>
+                <SubmitProblem problem={problem} contestId={contestId} language={language} />
+        </div>
+    )
+};
+