From a7760ad0f7c54171a3385a0f40b8700dd9b2f1fd Mon Sep 17 00:00:00 2001
From: slhmy <1484836413@qq.com>
Date: Fri, 9 Feb 2024 09:45:44 +0800
Subject: [PATCH] Some perf & fixs

---
 src/hooks/judge.ts           |  3 +-
 src/mocks/rest/problem.ts    |  6 +--
 src/pages/Problem.tsx        | 76 ++++++++++++++++++++++--------------
 src/pages/ProblemList.tsx    |  3 +-
 src/pages/SubmissionList.tsx |  3 +-
 5 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/hooks/judge.ts b/src/hooks/judge.ts
index 054720d90..2d41d4ab5 100644
--- a/src/hooks/judge.ts
+++ b/src/hooks/judge.ts
@@ -10,10 +10,11 @@ export const useJudge = (slug: string) => {
     [],
   );
 
-  function runJudge() {
+  function runJudge(postSubmission: () => void) {
     JudgeService.postSubmission(slug, src, src_language)
       .then((res) => {
         setVerdicts(res);
+        postSubmission();
       })
       .catch((err) => {
         console.log(err);
diff --git a/src/mocks/rest/problem.ts b/src/mocks/rest/problem.ts
index 57ce1b5e2..ebf8bdf00 100644
--- a/src/mocks/rest/problem.ts
+++ b/src/mocks/rest/problem.ts
@@ -36,7 +36,7 @@ Hello! world!
 \`\`\`
 
 `,
-      tags: ["Primer"],
+      tags: [{ name: "Primer" }],
     };
 
     return HttpResponse.json(response);
@@ -53,12 +53,12 @@ export const getProblemInfoList = http.get("/api/v1/problem", (info) => {
       {
         slug: "hello-world",
         title: "Hello World",
-        tags: ["Pimer"],
+        tags: [{ name: "Pimer" }],
       },
       {
         slug: "a-plus-b-problem",
         title: "A+B Problem",
-        tags: ["Primer", "Math"],
+        tags: [{ name: "Primer" }, { name: "Math" }],
       },
     ],
   };
diff --git a/src/pages/Problem.tsx b/src/pages/Problem.tsx
index caee82a03..c1265ec94 100644
--- a/src/pages/Problem.tsx
+++ b/src/pages/Problem.tsx
@@ -7,6 +7,7 @@ import { judgeVerdictListPipe } from "../pipes/judge";
 import { useEffect } from "react";
 import UserLayout from "../layouts/userLayout/UserLayout";
 import { useNavigate, useParams } from "react-router-dom";
+import React from "react";
 
 const defaultCode = `#include <iostream>
 using namespace std;
@@ -21,6 +22,7 @@ int main() {
 const Problem: React.FC = () => {
   const navigate = useNavigate();
   const slug = useParams().slug as string;
+  const [toggleToast, setToggleToast] = React.useState<boolean>(false);
 
   const { getProblem } = useProblem(slug, () => {
     navigate("/problem");
@@ -32,38 +34,54 @@ const Problem: React.FC = () => {
   }, [setSrcLanguage]);
 
   return (
-    <UserLayout title={getProblem()?.title}>
-      <div className="flex flex-1 flex-col gap-6 sm:flex-row">
-        <div className="w-full flex-1">
-          <MarkdownRender
-            content={getProblem()?.description || ""}
-            rehypePlugin="rehypeKatex"
-          />
+    <>
+      {toggleToast && (
+        <div className="toast toast-center toast-top z-10">
+          <div className="alert alert-success">
+            <span>Submission sent successfully.</span>
+          </div>
         </div>
-        <div className="flex w-1/2 flex-col gap-4">
-          <CodeEditor
-            className="h-full min-h-96 w-full overflow-hidden rounded-lg"
-            value={defaultCode}
-            onChange={(value: string) => {
-              setSrc(value);
-            }}
-          />
+      )}
+      <UserLayout title={getProblem()?.title}>
+        <div className="flex flex-1 flex-col gap-6 sm:flex-row">
+          <div className="w-full flex-1">
+            <MarkdownRender
+              content={getProblem()?.description || ""}
+              rehypePlugin="rehypeKatex"
+            />
+          </div>
+          <div className="flex w-1/2 flex-col gap-4">
+            <CodeEditor
+              className="h-full min-h-96 w-full overflow-hidden rounded-lg"
+              value={defaultCode}
+              onChange={(value: string) => {
+                setSrc(value);
+              }}
+            />
+          </div>
         </div>
-      </div>
-      <div className="relative">
-        <button
-          className="btn btn-primary absolute bottom-4 right-4 self-end"
-          onClick={runJudge}
-        >
-          Submit
-        </button>
-      </div>
-      {getVerdicts().length > 0 && (
-        <div className="my-8">
-          <JudgeVerdictTable data={judgeVerdictListPipe(getVerdicts())} />
+        <div className="relative">
+          <button
+            className="btn btn-primary absolute bottom-4 right-4 self-end"
+            onClick={() => {
+              runJudge(() => {
+                setToggleToast(true);
+                setTimeout(() => {
+                  setToggleToast(false);
+                }, 3000);
+              });
+            }}
+          >
+            Submit
+          </button>
         </div>
-      )}
-    </UserLayout>
+        {getVerdicts().length > 0 && (
+          <div className="my-8">
+            <JudgeVerdictTable data={judgeVerdictListPipe(getVerdicts())} />
+          </div>
+        )}
+      </UserLayout>
+    </>
   );
 };
 
diff --git a/src/pages/ProblemList.tsx b/src/pages/ProblemList.tsx
index 8a504e04d..0a3973964 100644
--- a/src/pages/ProblemList.tsx
+++ b/src/pages/ProblemList.tsx
@@ -1,12 +1,11 @@
 import NewsCard from "../components/NewsCard";
 import ProblemTable from "../components/ProblemTable";
-import { useEvent } from "../hooks/event";
 import { useProblemInfoList } from "../hooks/problem";
 import UserLayout from "../layouts/userLayout/UserLayout";
 
 const ProblemList: React.FC = () => {
   const { getProblemInfoList } = useProblemInfoList();
-  useEvent();
+  // useEvent();
 
   return (
     <UserLayout>
diff --git a/src/pages/SubmissionList.tsx b/src/pages/SubmissionList.tsx
index c3b896ec6..098cf0259 100644
--- a/src/pages/SubmissionList.tsx
+++ b/src/pages/SubmissionList.tsx
@@ -1,12 +1,11 @@
 import NewsCard from "../components/NewsCard";
 import SubmissionTable from "../components/SubmissionTable";
-import { useEvent } from "../hooks/event";
 import { useSubmissionList } from "../hooks/submission";
 import UserLayout from "../layouts/userLayout/UserLayout";
 
 const SubmissionList: React.FC = () => {
   const { getSubmissionList } = useSubmissionList();
-  useEvent();
+  // useEvent();
 
   return (
     <UserLayout>