ui: fix problem page react unmount

build/hack.js

@@ -1,3 +0,0 @@
-const fs = require('fs-extra');
-
-fs.removeSync('node_modules/@types/express/node_modules');

package.json

@@ -24,7 +24,7 @@
         "debug": "node --trace-warnings --async-stack-traces --trace-deprecation node_modules/hydrooj/bin/hydrooj --debug --template",
         "start:all": "node build/start",
         "start": "node_modules/.bin/hydrooj",
-        "postinstall": "node build/hack && node build/prepare.js"
+        "postinstall": "node build/prepare.js"
     },
     "version": "1.0.0",
     "license": "AGPL-3.0-only",
@@ -61,6 +61,6 @@
         "ora": "^6.1.2",
         "semver": "^7.3.7",
         "supertest": "^6.2.4",
-        "typescript": "4.8.2"
+        "typescript": "4.7.4"
     }
 }

packages/ui-default/components/autocomplete/index.tsx

@@ -24,6 +24,7 @@ export default class AutoComplete extends DOMAttachedObject {
   ref = null;
   container = document.createElement('div');
   options: AutoCompleteOptions;
+  component = ReactDOM.createRoot(this.container);
   changeListener = [
     (val) => this.$dom.val(val),
   ];
@@ -64,7 +65,7 @@ export default class AutoComplete extends DOMAttachedObject {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <AutoCompleteFC
         ref={(ref) => { this.ref = ref; }}
         height="34px"
@@ -97,7 +98,7 @@ export default class AutoComplete extends DOMAttachedObject {
   detach() {
     if (this.detached) return;
     super.detach();
-    ReactDOM.unmountComponentAtNode(this.container);
+    this.component.unmount();
     this.$dom.removeClass('autocomplete-dummy');
     this.container.parentNode.removeChild(this.container);
   }

packages/ui-default/components/react/DomComponent.tsx

@@ -2,15 +2,10 @@ import $ from 'jquery';
 import { omit } from 'lodash';
 import React from 'react';
 
-const tempDoms = {};
+export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { childDom: HTMLElement }) {
-
-export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { id?: string, childDom: HTMLElement }) {
   const ref = React.useRef<HTMLDivElement>();
   React.useEffect(() => {
-    let dom = props.childDom;
+    ref.current.appendChild(props.childDom);
-    if (props.id && dom) tempDoms[props.id] = dom;
-    else if (props.id && !dom && tempDoms[props.id]) dom = tempDoms[props.id];
-    ref.current.appendChild(dom);
     return () => {
       $(ref.current).empty();
     };

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

@@ -35,7 +35,7 @@ function buildNestedPane([a, ...panes], mode = 'horizontal') {
 const pages = {
   problem: {
     icon: () => <ProblemIcon />,
-    component: () => <Dom childDom={$('.problem-content').get(0)} id="problem-content" />,
+    component: () => <Dom childDom={$('.problem-content').get(0)} />,
   },
 };
 

packages/ui-default/package.json

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