w: upgrade deps

packages/ui-default/pages/api.page.tsx

@@ -2,7 +2,7 @@
 import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 const Logo = () => <span>Hydro API Console </span>;
 const defaultQuery = `\
@@ -43,7 +43,7 @@ const page = new NamedPage('api', async () => {
     />
   );
 
-  render(<App />, document.getElementById('graphiql'));
+  ReactDOM.createRoot(document.getElementById('graphiql')).render(<App />);
 });
 
 export default page;

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

@@ -1,4 +1,6 @@
 import { NamedPage } from 'vj/misc/Page';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import api, { gql } from 'vj/utils/api';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import parseQueryString from 'vj/utils/parseQueryString';
@@ -26,9 +28,7 @@ const page = new NamedPage('home_messages', () => {
     const { default: WebSocket } = await import('../components/socket');
     const { default: MessagePadApp } = await import('../components/messagepad');
     const { default: MessagePadReducer } = await import('../components/messagepad/reducers');
-    const {
-      React, render, Provider, store,
-    } = await loadReactRedux(MessagePadReducer);
+    const { Provider, store } = await loadReactRedux(MessagePadReducer);
 
     reduxStore = store;
 
@@ -71,7 +71,7 @@ const page = new NamedPage('home_messages', () => {
       return this;
     };
 
-    render(
+    createRoot($('#messagePad').get(0)).render(
       <Provider store={store}>
         <MessagePadApp
           onAdd={async () => {
@@ -84,7 +84,6 @@ const page = new NamedPage('home_messages', () => {
           }}
         />
       </Provider>,
-      $('#messagePad').get(0),
     );
   }
 

packages/ui-default/pages/problem_config.page.tsx

@@ -1,5 +1,7 @@
 import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import i18n from 'vj/utils/i18n';
 import yaml from 'js-yaml';
@@ -149,9 +151,7 @@ const page = new NamedPage('problem_config', () => {
       import('vj/components/problemconfig/reducer'),
     ]);
 
-    const {
-      React, render, Provider, store,
-    } = await loadReactRedux(ProblemConfigReducer);
+    const { Provider, store } = await loadReactRedux(ProblemConfigReducer);
 
     reduxStore = store;
 
@@ -179,7 +179,7 @@ const page = new NamedPage('problem_config', () => {
         subtasks: normalizeSubtasks(subtasks, (i) => i, state.config.time, state.config.memory, true),
       });
     });
-    render(
+    createRoot($('#ProblemConfig').get(0)).render(
       <Provider store={store}>
         <div className="row">
           <div className="medium-5 columns">
@@ -191,7 +191,6 @@ const page = new NamedPage('problem_config', () => {
         </div>
         <button className="rounded primary button" onClick={() => uploadConfig(store.getState().config)}>{i18n('Submit')}</button>
       </Provider>,
-      $('#ProblemConfig').get(0),
     );
   }
 

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

@@ -1,4 +1,6 @@
 import yaml from 'js-yaml';
+import ReactDOM, { createRoot } from 'react-dom/client';
+import React from 'react';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
 import { NamedPage } from 'vj/misc/Page';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
@@ -132,9 +134,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     const { default: WebSocket } = await import('../components/socket');
     const { default: ScratchpadApp } = await import('../components/scratchpad');
     const { default: ScratchpadReducer } = await import('../components/scratchpad/reducers');
-    const {
-      React, render, unmountComponentAtNode, Provider, store,
-    } = await loadReactRedux(ScratchpadReducer);
+    const { Provider, store } = await loadReactRedux(ScratchpadReducer);
 
     const sock = new WebSocket(UiContext.pretestConnUrl);
     sock.onmessage = (message) => {
@@ -145,17 +145,15 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       });
     };
 
+    const root = createRoot($('#scratchpad').get(0));
     renderReact = () => {
-      render(
+      root.render(
         <Provider store={store}>
           <ScratchpadApp />
         </Provider>,
-        $('#scratchpad').get(0),
       );
     };
-    unmountReact = () => {
-      unmountComponentAtNode($('#scratchpad').get(0));
-    };
+    unmountReact = () => root.unmount();
     reactLoaded = true;
     $('.loader-container').hide();
   }
@@ -192,17 +190,12 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       const props = yaml.load(s);
       if (!(props instanceof Array)) return;
       $('.outer-loader-container').show();
-      const [{ default: Objective }, React, ReactDOM] = await Promise.all([
-        import('vj/components/objective-question/index'),
-        import('react'),
-        import('react-dom'),
-      ]);
+      const { default: Objective } = await import('vj/components/objective-question/index');
 
-      ReactDOM.render(
+      ReactDOM.createRoot($('.problem-content').get(0)).render(
         <div className="section__body typo">
           <Objective panel={props} target={UiContext.postSubmitUrl}></Objective>
         </div>,
-        $('.problem-content').get(0),
       );
       $('.outer-loader-container').hide();
     } catch (e) { }