From 35b04631736c7768a085ec8d0b10f64bdf3b3fa2 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Sat, 27 Aug 2022 18:57:56 +0800
Subject: [PATCH] ui: fix problem page react unmount

---
 build/hack.js                                         | 3 ---
 package.json                                          | 4 ++--
 packages/ui-default/components/autocomplete/index.tsx | 5 +++--
 packages/ui-default/components/react/DomComponent.tsx | 9 ++-------
 packages/ui-default/components/scratchpad/index.jsx   | 2 +-
 packages/ui-default/package.json                      | 2 +-
 6 files changed, 9 insertions(+), 16 deletions(-)
 delete mode 100644 build/hack.js

diff --git a/build/hack.js b/build/hack.js
deleted file mode 100644
index 76033fd3c..000000000
--- a/build/hack.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const fs = require('fs-extra');
-
-fs.removeSync('node_modules/@types/express/node_modules');
diff --git a/package.json b/package.json
index 728fece2a..76c6f15c9 100644
--- a/package.json
+++ b/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"
     }
 }
diff --git a/packages/ui-default/components/autocomplete/index.tsx b/packages/ui-default/components/autocomplete/index.tsx
index 02672468c..c1213cb16 100644
--- a/packages/ui-default/components/autocomplete/index.tsx
+++ b/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);
   }
diff --git a/packages/ui-default/components/react/DomComponent.tsx b/packages/ui-default/components/react/DomComponent.tsx
index 065d923af..1f64c145a 100644
--- a/packages/ui-default/components/react/DomComponent.tsx
+++ b/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> & { id?: string, childDom: HTMLElement }) {
+export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { childDom: HTMLElement }) {
   const ref = React.useRef<HTMLDivElement>();
   React.useEffect(() => {
-    let dom = 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);
+    ref.current.appendChild(props.childDom);
     return () => {
       $(ref.current).empty();
     };
diff --git a/packages/ui-default/components/scratchpad/index.jsx b/packages/ui-default/components/scratchpad/index.jsx
index c87fba7ab..14ced035e 100644
--- a/packages/ui-default/components/scratchpad/index.jsx
+++ b/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)} />,
   },
 };
 
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index e607acbe0..f0df145e2 100644
--- a/packages/ui-default/package.json
+++ b/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",