ui: display a loader when loading react

packages/ui-default/components/subjective-question/index.jsx

@@ -1,12 +1,44 @@
 import React from 'react';
+import { sortBy } from 'lodash';
+import request from 'vj/utils/request';
 
 export default class MessagePadContainer extends React.PureComponent {
+  constructor(args) {
+    super(args);
+    this.state = {};
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onChange(ev) {
+    this.setState({ [ev.target.name]: ev.target.value });
+  }
+
+  onSubmit(ev) {
+    ev.preventDefault();
+    const entries = sortBy(Object.entries(this.state).map((i) => [+i[0], i[1]]));
+    const total = entries[entries.length - 1][0];
+    const ans = new Array(total).fill('');
+    entries.forEach((i) => ans[i[0]] = i[1]); // eslint-disable-line
+    request
+      .post(this.props.target, {
+        lang: '_',
+        code: ans.join('\n'),
+      })
+      .then((res) => {
+        window.location.href = res.url;
+      })
+      .catch((e) => {
+        Notification.error(e.message);
+      });
+  }
+
   Textbox(args, name) {
     return (
       <label htmlFor={`textbox${name}`}>
         {args.desc}
         <div name={`form_item_${name}`} className="textbox-container">
-          <input type="text" name={name} id={`textbox${name}`} className="textbox"></input>
+          <input type="text" name={name} id={`textbox${name}`} className="textbox" onChange={this.onChange}></input>
         </div>
       </label>
     );
@@ -17,8 +49,8 @@ export default class MessagePadContainer extends React.PureComponent {
       <>
         {args.desc}
         {args.choices.map((i) => (
-          <label className="radiobox" htmlFor={`radio${name}`}>
-            <input type="radio" name={name} id={`radio${name}`} value={i} /> {i} <br />
+          <label className="radiobox" htmlFor={`radio${name}${i}`} key={i}>
+            <input type="radio" name={name} id={`radio${name}${i}`} value={i} onChange={this.onChange} /> {i} <br />
           </label>
         ))}
       </>
@@ -27,7 +59,7 @@ export default class MessagePadContainer extends React.PureComponent {
 
   render() {
     return (
-      <form>
+      <form onSubmit={this.onSubmit}>
         {this.props.panel.map((i, name) => (
           <div className="row">
             <div className="medium-7 columns form__item end">

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.5.11",
+  "version": "4.5.12",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_detail.page.jsx

@@ -223,7 +223,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
 
       ReactDOM.render(
         <div className="section__body typo">
-          <Subjective panel={props}></Subjective>
+          <Subjective panel={props} target={UiContext.postSubmitUrl}></Subjective>
         </div>,
         $('.problem-content').get(0),
       );

packages/ui-default/templates/problem_detail.html

@@ -47,8 +47,8 @@
     {% include "partials/problem_sidebar.html" %}
   </div>
 </div>
+<div style="display:none" class="loader-container"><div class="loader"></div></div>
 <div class="scratchpad-container" style="display:none">
-  <div style="display:none" class="loader-container"><div class="loader"></div></div>
   <div id="scratchpad" style="opacity:0"></div>
 </div>
 {% endblock %}