feat: adapt to server 1.3.0 API change

package.json

@@ -1,7 +1,7 @@
 {
     "name": "woj-ui",
     "private": true,
-    "version": "1.0.0",
+    "version": "1.1.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -12,11 +12,11 @@
     "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@ant-design/pro-components": "^2.6.48",
-        "@sentry/react": "^7.94.1",
+        "@sentry/react": "^7.98.0",
         "@sentry/vite-plugin": "^2.10.3",
         "ace-builds": "^1.32.3",
-        "antd": "^5.13.2",
-        "axios": "^1.6.5",
+        "antd": "^5.13.3",
+        "axios": "^1.6.7",
         "dayjs": "^1.11.10",
         "github-markdown-css": "^5.5.0",
         "react": "^18.2.0",
@@ -32,7 +32,7 @@
         "remark-math": "^5.1.1"
     },
     "devDependencies": {
-        "@types/node": "^20.11.5",
+        "@types/node": "^20.11.9",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
         "@types/react-syntax-highlighter": "^15.5.11",

src/api/problem.ts

@@ -1,13 +1,20 @@
 import { Meta, send, WithCount } from "./base.ts";
 import { UserProfile } from "./user.ts";
 
-export interface TaskInfo {
-    Languages: { Lang: string }[];
-    Runtime: {
+export interface RuntimeInfo {
     MemoryLimit: number;
     NProcLimit: number;
     TimeLimit: number;
+}
+
+export interface TaskInfo {
+    Languages: {
+        Lang: string;
+        Runtime: {
+            Compile: RuntimeInfo;
+            Run: RuntimeInfo;
         };
+    }[];
     Tasks: { Id: number; Points: number }[];
 }
 

src/components/problem-details.tsx

@@ -1,17 +1,45 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { Collapse, CollapseProps, Descriptions, Space, Tag } from "antd";
+import { Collapse, CollapseProps, Descriptions, Select, Space, Tag } from "antd";
 
-import { DetailsResp } from "../api/problem.ts";
+import { DetailsResp, RuntimeInfo } from "../api/problem.ts";
+
+const AvailLang = [
+    { value: "cpp", label: "C++" },
+    { value: "c", label: "C" },
+    { value: "python", label: "Python" },
+    { value: "golang", label: "Go" },
+];
 
 interface ProblemDetailsProps {
     details: DetailsResp;
-    action?: React.ReactNode;
+    onLanguageSelect?: (lang: string) => void;
+    extra?: CollapseProps["items"];
 }
 
+const EmptyRuntime: RuntimeInfo = {
+    TimeLimit: 0,
+    MemoryLimit: 0,
+    NProcLimit: 0,
+};
+
 export default function ProblemDetails(props: ProblemDetailsProps) {
     const details = props.details;
 
+    const langOptions = AvailLang.filter((l) => details.context.Languages.some((x) => x.Lang === l.value));
+
+    const [runtime, setRuntime] = useState(EmptyRuntime);
+    const [lang, setLang] = useState(langOptions[0].value);
+
+    const onLanguageSelect = (lang: string) => {
+        setLang(lang);
+        props.onLanguageSelect && props.onLanguageSelect(lang);
+    };
+
+    useEffect(() => {
+        setRuntime(details.context.Languages.find((x) => x.Lang === lang)?.Runtime.Run || EmptyRuntime);
+    }, [details.context.Languages, lang]);
+
     const problemInfo = (
         <Descriptions bordered column={1} size="small">
             <Descriptions.Item label="Title">
@@ -38,9 +66,18 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
 
     const runtimeLimit = (
         <Descriptions bordered column={1} size="small">
-            <Descriptions.Item label="Time Limit">{details.context.Runtime.TimeLimit} ms</Descriptions.Item>
-            <Descriptions.Item label="Memory Limit">{details.context.Runtime.MemoryLimit} MB</Descriptions.Item>
-            <Descriptions.Item label="Process Limit">{details.context.Runtime.NProcLimit}</Descriptions.Item>
+            <Descriptions.Item label="Time Limit">{runtime.TimeLimit} ms</Descriptions.Item>
+            <Descriptions.Item label="Memory Limit">{runtime.MemoryLimit} MB</Descriptions.Item>
+            <Descriptions.Item label="Process Limit">{runtime.NProcLimit}</Descriptions.Item>
+            <Descriptions.Item label="Select Language">
+                <Select
+                    placeholder="select language"
+                    optionFilterProp="children"
+                    value={lang}
+                    onChange={onLanguageSelect}
+                    options={langOptions}
+                />
+            </Descriptions.Item>
         </Descriptions>
     );
 
@@ -57,19 +94,8 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
         },
     ];
 
-    const items: CollapseProps["items"] = [
-        ...miscItems,
-        ...(props.action
-            ? [
-                  {
-                      key: "3",
-                      label: "Action",
-                      children: props.action,
-                  },
-              ]
-            : []),
-    ];
-    const defaultActiveKey = ["1", "2", ...(props.action ? ["3"] : [])];
+    const items: CollapseProps["items"] = [...miscItems, ...(props.extra || [])];
+    const defaultActiveKey = ["1", "2", ...(props.extra || []).map((x) => x.key?.toString() || "")];
 
     return (
         <>

src/pages/problem.tsx

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-import { Row, Col, Space, Button } from "antd";
+import { Row, Col, Space, Button, CollapseProps } from "antd";
 import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons";
 import { useLoaderData, useNavigate } from "react-router-dom";
 
@@ -26,8 +26,16 @@ export default function ProblemPage() {
         </Space>
     );
 
+    const extra: CollapseProps["items"] = [
+        {
+            key: "3",
+            label: "Action",
+            children: actionBtn,
+        },
+    ];
+
     const ProblemStatement = <Markdown markdown={details.problem.statement} />;
-    const MiscPanel = <ProblemDetails details={details} action={actionBtn} />;
+    const MiscPanel = <ProblemDetails details={details} extra={extra} />;
 
     return (
         <>

src/pages/submit.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useLoaderData, useNavigate } from "react-router-dom";
 
-import { Button, Col, message, Row, Select, Space } from "antd";
+import { Button, Col, CollapseProps, message, Row, Space } from "antd";
 import { PlayCircleOutlined } from "@ant-design/icons";
 
 import Editor from "../components/editor.tsx";
@@ -10,13 +10,6 @@ import { useAuth } from "../components/hook.ts";
 import { DetailsResp } from "../api/problem.ts";
 import { SubmissionApi } from "../api/submission.ts";
 
-const AvailLang = [
-    { value: "cpp", label: "C++" },
-    { value: "c", label: "C" },
-    { value: "python", label: "Python" },
-    { value: "golang", label: "Go" },
-];
-
 const LangToMode: { [lang: string]: string } = {
     cpp: "c_cpp",
     c: "c_cpp",
@@ -30,14 +23,11 @@ export default function SubmitPage() {
     const navigate = useNavigate();
     const [msg, msgContextHolder] = message.useMessage();
 
-    const langOptions = AvailLang.filter((l) => details.context.Languages.some((x) => x.Lang === l.value));
-
-    const [lang, setLang] = useState(langOptions[0].value);
+    const [lang, setLang] = useState("cpp");
     const [code, setCode] = useState("");
     const [disallowSubmit, setDisallowSubmit] = useState(false);
 
     const submitCode = () => {
-        console.debug(lang, code);
         SubmissionApi.Create(
             {
                 pid: details.problem.meta.ID,
@@ -60,27 +50,28 @@ export default function SubmitPage() {
         );
     };
 
-    const funcMenu = (
+    const submitBtn = (
         <Space wrap>
-            <Select
-                placeholder="Select a person"
-                optionFilterProp="children"
-                value={lang}
-                onChange={setLang}
-                options={langOptions}
-            />
             <Button icon={<PlayCircleOutlined />} onClick={submitCode} disabled={disallowSubmit}>
                 Submit
             </Button>
         </Space>
     );
 
+    const extra: CollapseProps["items"] = [
+        {
+            key: "3",
+            label: "Action",
+            children: submitBtn,
+        },
+    ];
+
     const codeEditor = Editor({
         mode: LangToMode[lang],
         onChange: setCode,
     });
 
-    const MiscPanel = <ProblemDetails action={funcMenu} details={details} />;
+    const MiscPanel = <ProblemDetails details={details} onLanguageSelect={setLang} extra={extra} />;
 
     return (
         <>