ui: simplify scratchpad countdown logic (#373)

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -20,6 +20,7 @@ const mapStateToProps = (state) => ({
   isPosting: state.ui.isPosting,
   isRunning: state.pretest.isRunning,
   isWaiting: state.ui.isWaiting,
+  waitSec: state.ui.waitSec,
   editorLang: state.editor.lang,
   editorCode: state.editor.code,
   pretestInput: state.pretest.input,
@@ -66,10 +67,9 @@ const mapDispatchToProps = (dispatch) => ({
       payload: request.get(UiContext.getSubmissionsUrl),
     });
   },
-  endWaiting() {
+  tick() {
     dispatch({
-      type: 'SCRATCHPAD_WAITING_END',
-      payload: 0,
+      type: 'SCRATCHPAD_WAITING_TICK',
     });
   },
 });
@@ -84,7 +84,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
 
   constructor(props) {
     super(props);
-    this.state = { waitSec: -1 };
     if (!availableLangs[this.props.editorLang]) {
       // preference not allowed
       const key = keys.find((i) => availableLangs[i].pretest === this.props.editorLang);
@@ -97,18 +96,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
   }
 
   componentDidUpdate() {
-    if (this.props.isWaiting) {
-      const { waitSec } = this.state;
-      if (waitSec < 0) this.setState({ waitSec: 5 });
-      if (waitSec === 0) {
-        this.setState({ waitSec: waitSec - 1 });
-        this.props.endWaiting();
-      } else {
-        setTimeout(() => {
-          this.setState({ waitSec: waitSec - 1 });
-        }, 1000);
-      }
-    }
+    if (this.props.waitSec > 0) setTimeout(() => this.props.tick(), 1000);
   }
 
   render() {
@@ -131,9 +119,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
             {' '}
             {i18n('Run Pretest')}
             {' '}
-            (F9)
-            {' '}
-            {this.props.isWaiting && `(${this.state.waitSec}s)`}
+            {this.props.isWaiting ? `(${this.props.waitSec}s)` : '(F9)'}
           </ToolbarButton>
         )}
         <ToolbarButton
@@ -147,9 +133,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
           {' '}
           {i18n('Submit Solution')}
           {' '}
-          (F10)
-          {' '}
-          {this.props.isWaiting && `(${this.state.waitSec}s)`}
+          {this.props.isWaiting ? `(${this.props.waitSec}s)` : '(F10)'}
         </ToolbarButton>
         <ToolbarButton
           data-global-hotkey="alt+q"

packages/ui-default/components/scratchpad/reducers/ui.ts

@@ -17,6 +17,7 @@ export default function reducer(state = {
     isLoading: false,
   },
   isPosting: false,
+  waitSec: 0,
   isWaiting: false,
 }, action) {
   switch (action.type) {
@@ -68,6 +69,7 @@ export default function reducer(state = {
       return {
         ...state,
         isPosting: false,
+        waitSec: 5,
         isWaiting: true,
       };
     }
@@ -77,9 +79,17 @@ export default function reducer(state = {
       return {
         ...state,
         isPosting: false,
+        waitSec: 5,
         isWaiting: true,
       };
     }
+    case 'SCRATCHPAD_WAITING_TICK': {
+      return {
+        ...state,
+        waitSec: state.waitSec - 1,
+        isWaiting: state.waitSec > 1,
+      };
+    }
     case 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS_PENDING': {
       return {
         ...state,
@@ -108,12 +118,6 @@ export default function reducer(state = {
         },
       };
     }
-    case 'SCRATCHPAD_WAITING_END': {
-      return {
-        ...state,
-        isWaiting: false,
-      };
-    }
     default:
       return state;
   }

packages/ui-default/package.json

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