Merge pull request #231 from yosupo06/refactor/editor

minor refactor of editor and hack page

src/components/SourceEditor.tsx

@@ -2,13 +2,14 @@ import "katex/dist/katex.min.css";
 import React, { useState } from "react";
 import Editor from "@monaco-editor/react";
 import { editor } from "monaco-editor";
+import { Box } from "@mui/material";
 
 interface Props {
   value: string;
   language?: string;
   onChange?: (value: string) => void;
   readOnly: boolean;
-  autoHeight: boolean;
+  height?: number;
 }
 
 const editorMode = (lang?: string) => {
@@ -48,45 +49,48 @@ const editorMode = (lang?: string) => {
   return "plaintext";
 };
 
+const MIN_EDITOR_HEIGHT = 100;
+
 const SourceEditor: React.FC<Props> = (props) => {
-  const minHeight = 100;
-  const { value, language, onChange, readOnly, autoHeight } = props;
-  const [editorHeight, setEditorHeight] = useState(minHeight);
+  const { value, language, onChange, readOnly, height } = props;
+  const [editorHeight, setEditorHeight] = useState(height ?? MIN_EDITOR_HEIGHT);
 
   const mode = editorMode(language);
 
   const updateHeight = (editor: editor.IStandaloneCodeEditor) => {
-    if (autoHeight) {
-      setEditorHeight(Math.max(minHeight, editor.getContentHeight()));
+    if (height === undefined) {
+      setEditorHeight(Math.max(MIN_EDITOR_HEIGHT, editor.getContentHeight()));
     }
   };
 
   return (
-    <Editor
-      value={value}
-      language={mode}
-      height={autoHeight ? editorHeight : undefined}
-      onChange={(src) => {
-        if (src !== undefined && onChange) onChange(src);
-      }}
-      onMount={(editor) => {
-        editor.onDidContentSizeChange(() => {
+    <Box sx={{ width: "auto" }}>
+      <Editor
+        value={value}
+        language={mode}
+        height={editorHeight}
+        onChange={(src) => {
+          if (src !== undefined && onChange) onChange(src);
+        }}
+        onMount={(editor) => {
+          editor.onDidContentSizeChange(() => {
+            updateHeight(editor);
+          });
           updateHeight(editor);
-        });
-        updateHeight(editor);
-      }}
-      options={{
-        readOnly: readOnly,
-        scrollBeyondLastColumn: 0,
-        scrollBeyondLastLine: false,
-        minimap: {
-          enabled: false,
-        },
-        scrollbar: {
-          alwaysConsumeMouseWheel: false,
-        },
-      }}
-    />
+        }}
+        options={{
+          readOnly: readOnly,
+          scrollBeyondLastColumn: 0,
+          scrollBeyondLastLine: false,
+          minimap: {
+            enabled: false,
+          },
+          scrollbar: {
+            alwaysConsumeMouseWheel: false,
+          },
+        }}
+      />
+    </Box>
   );
 };
 

src/pages/Hack.tsx

@@ -4,7 +4,14 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import SourceEditor from "../components/SourceEditor";
 import { useHackMutation } from "../api/client_wrapper";
-import { Container, FormControl, TextField } from "@mui/material";
+import {
+  Box,
+  Container,
+  FormControl,
+  Tab,
+  Tabs,
+  TextField,
+} from "@mui/material";
 import { refactorTestCase } from "../utils/hack";
 
 const Hack: React.FC = () => {
@@ -16,6 +23,7 @@ const Hack: React.FC = () => {
   });
   const [submissionId, setSubmissionId] = useState("");
   const [testCase, setTestCase] = useState("");
+  const [tabIndex, setTabIndex] = useState(0);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -27,38 +35,53 @@ const Hack: React.FC = () => {
 
   return (
     <Container>
-      <Typography variant="h4" paragraph={true}>
+      <Typography variant="h2" paragraph={true}>
         Hack
       </Typography>
 
-      <form onSubmit={handleSubmit}>
+      <Box component="form" onSubmit={handleSubmit}>
         <FormControl>
           <TextField
             label="Submission ID"
             value={submissionId}
             onChange={(e) => setSubmissionId(e.target.value)}
           />
         </FormControl>
-        <FormControl
-          sx={{
-            height: "400px",
-            width: "100%",
-          }}
-        >
-          <SourceEditor
-            value={testCase}
-            language="txt"
-            onChange={(e) => {
-              setTestCase(e);
-            }}
-            readOnly={false}
-            autoHeight={false}
-          />
-        </FormControl>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs
+            value={tabIndex}
+            onChange={(_, newValue) => setTabIndex(newValue)}
+          >
+            <Tab label="Text" />
+            <Tab label="Generator" />
+          </Tabs>
+        </Box>
+
+        {tabIndex === 0 && (
+          <Box sx={{ p: 3 }}>
+            <Box>
+              <SourceEditor
+                value={testCase}
+                onChange={(e) => {
+                  setTestCase(e);
+                }}
+                readOnly={false}
+                height={600}
+              />
+            </Box>
+          </Box>
+        )}
+        {tabIndex === 1 && (
+          <Box sx={{ p: 3 }}>
+            <Typography variant="h4" paragraph={true}>
+              TODO
+            </Typography>
+          </Box>
+        )}
         <Button color="primary" type="submit">
           Hack
         </Button>
-      </form>
+      </Box>
     </Container>
   );
 };

src/pages/HackInfo.tsx

@@ -21,6 +21,9 @@ const HackInfo: React.FC = () => {
   if (hackInfoQuery.isLoading) {
     return (
       <Container>
+        <Typography variant="h2" paragraph={true}>
+          Hack #{ID}
+        </Typography>
         <CircularProgress />
       </Container>
     );
@@ -29,6 +32,9 @@ const HackInfo: React.FC = () => {
   if (hackInfoQuery.isError) {
     return (
       <Container>
+        <Typography variant="h2" paragraph={true}>
+          Hack #{ID}
+        </Typography>
         <Alert severity="error">
           {(hackInfoQuery.error as RpcError).toString()}
         </Alert>

src/pages/HackList.tsx

@@ -0,0 +1,69 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useHackInfo } from "../api/client_wrapper";
+import CircularProgress from "@mui/material/CircularProgress";
+import Link from "@mui/material/Link";
+import { Alert, Container } from "@mui/material";
+import { HackInfoResponse } from "../proto/library_checker";
+import { RpcError } from "@protobuf-ts/runtime-rpc";
+
+const HackInfo: React.FC = () => {
+  const { ID } = useParams<"ID">();
+  if (!ID) {
+    throw new Error(`hack ID is not defined`);
+  }
+  const hackInfoQuery = useHackInfo(parseInt(ID), {
+    refetchInterval: 1000,
+  });
+
+  if (hackInfoQuery.isLoading) {
+    return (
+      <Container>
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  if (hackInfoQuery.isError) {
+    return (
+      <Container>
+        <Alert severity="error">
+          {(hackInfoQuery.error as RpcError).toString()}
+        </Alert>
+      </Container>
+    );
+  }
+  return (
+    <Container>
+      <Typography variant="h2" paragraph={true}>
+        Hack #{ID}
+      </Typography>
+      <HackInfoBody info={hackInfoQuery.data} />
+    </Container>
+  );
+};
+
+export default HackInfo;
+
+const HackInfoBody: React.FC<{
+  info: HackInfoResponse;
+}> = (props) => {
+  const { info } = props;
+  return (
+    <Box>
+      <Typography>
+        Submission:{" "}
+        <Link href={`/submission/${info.overview?.submissionId}`}>
+          #{info.overview?.submissionId}
+        </Link>
+      </Typography>
+      <Typography>Status: {info.overview?.status}</Typography>
+      <Typography>TestCase</Typography>
+      <pre>{new TextDecoder().decode(info.testCase)}</pre>
+      <Typography>Checker output</Typography>
+      <pre>{new TextDecoder().decode(info.checkerOut)}</pre>
+    </Box>
+  );
+};

src/pages/ProblemInfo.tsx

@@ -251,7 +251,6 @@ const SolveHpp: React.FC<{
             value={solveHppQuery.data}
             language="cpp"
             readOnly={true}
-            autoHeight={true}
           />
         </>
       )}
@@ -317,20 +316,15 @@ const SubmitForm: React.FC<{ problemId: string }> = (props) => {
       </Typography>
 
       <form onSubmit={handleSubmit}>
-        <FormControl
-          sx={{
-            height: "400px",
-            width: "100%",
-          }}
-        >
+        <FormControl fullWidth>
           <SourceEditor
             value={source}
             language={progLang}
             onChange={(e) => {
               setSource(e);
             }}
             readOnly={false}
-            autoHeight={false}
+            height={400}
           />
         </FormControl>
         <FormControl>

src/pages/StatementViewer.tsx

@@ -304,18 +304,13 @@ const EditorSide: React.FC<{
           <Typography variant="h4" paragraph={true}>
             task.md
           </Typography>
-          <Box
-            sx={{
-              height: "400px",
-              width: "100%",
-            }}
-          >
+          <Box>
             <SourceEditor
               value={data.statement}
               language="markdown"
               onChange={setStatement}
               readOnly={false}
-              autoHeight={false}
+              height={600}
             />
           </Box>
         </Box>
@@ -325,18 +320,13 @@ const EditorSide: React.FC<{
           <Typography variant="h4" paragraph={true}>
             info.toml
           </Typography>
-          <Box
-            sx={{
-              height: "400px",
-              width: "100%",
-            }}
-          >
+          <Box>
             <SourceEditor
               value={data.info}
               language="plaintext"
               onChange={setInfo}
               readOnly={false}
-              autoHeight={false}
+              height={600}
             />
           </Box>
         </Box>

src/pages/SubmissionInfo.tsx

@@ -117,12 +117,7 @@ const SubmissionInfoBody: React.FC<{
         }}
       />
       <Paper>
-        <SourceEditor
-          value={info.source}
-          language={lang}
-          readOnly={true}
-          autoHeight={true}
-        />
+        <SourceEditor value={info.source} language={lang} readOnly={true} />
       </Paper>
     </Box>
   );