chore: Upgrade to React 18 (#495)

* chore: Upgrade to React 18

* runfix: Add children type to FC components

* chore: Remove @types/react

src/components/base/base-dialog.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, useImperativeHandle, useState } from "react";
+import { ReactNode } from "react";
 import {
   Button,
   Dialog,
@@ -18,6 +18,7 @@ interface Props {
   disableCancel?: boolean;
   disableFooter?: boolean;
   contentSx?: SxProps<Theme>;
+  children?: ReactNode;
   onOk?: () => void;
   onCancel?: () => void;
   onClose?: () => void;

src/components/base/base-error-boundary.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 
 function ErrorFallback({ error }: FallbackProps) {
@@ -9,7 +10,11 @@ function ErrorFallback({ error }: FallbackProps) {
   );
 }
 
-export const BaseErrorBoundary: React.FC = (props) => {
+interface BaseErrorBoundaryProps {
+  children?: ReactNode;
+}
+
+export const BaseErrorBoundary: React.FC<BaseErrorBoundaryProps> = (props) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       {props.children}

src/components/base/base-notice.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { ReactNode, useState } from "react";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
 import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
@@ -77,13 +77,14 @@ export const Notice: NoticeInstance = (props) => {
 
   const container = document.createElement("div");
   parent.appendChild(container);
+  const root = createRoot(container);
 
   const onUnmount = () => {
-    const result = ReactDOM.unmountComponentAtNode(container);
-    if (result && parent) setTimeout(() => parent.removeChild(container), 500);
+    root.unmount();
+    if (parent) setTimeout(() => parent.removeChild(container), 500);
   };
 
-  ReactDOM.render(<NoticeInner {...props} onClose={onUnmount} />, container);
+  root.render(<NoticeInner {...props} onClose={onUnmount} />);
 };
 
 (["info", "error", "success"] as const).forEach((type) => {

src/components/base/base-page.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Typography } from "@mui/material";
 import { BaseErrorBoundary } from "./base-error-boundary";
 
@@ -6,6 +6,7 @@ interface Props {
   title?: React.ReactNode; // the page title
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
+  children?: ReactNode;
 }
 
 export const BasePage: React.FC<Props> = (props) => {

src/components/setting/mods/setting-comp.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import {
   Box,
   List,
@@ -8,8 +8,9 @@ import {
 } from "@mui/material";
 
 interface ItemProps {
-  label: React.ReactNode;
-  extra?: React.ReactNode;
+  label: ReactNode;
+  extra?: ReactNode;
+  children?: ReactNode;
 }
 
 export const SettingItem: React.FC<ItemProps> = (props) => {
@@ -32,7 +33,10 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
   );
 };
 
-export const SettingList: React.FC<{ title: string }> = (props) => (
+export const SettingList: React.FC<{
+  title: string;
+  children: ReactNode;
+}> = (props) => (
   <List>
     <ListSubheader sx={{ background: "transparent" }} disableSticky>
       {props.title}

src/main.tsx

@@ -8,19 +8,27 @@ if (!window.ResizeObserver) {
 }
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { RecoilRoot } from "recoil";
 import { BrowserRouter } from "react-router-dom";
 import Layout from "./pages/_layout";
 import "./services/i18n";
 
-ReactDOM.render(
+const mainElementId = "root";
+const container = document.getElementById(mainElementId);
+
+if (!container) {
+  throw new Error(
+    `No container '${mainElementId}' found to render application`
+  );
+}
+
+createRoot(container).render(
   <React.StrictMode>
     <RecoilRoot>
       <BrowserRouter>
         <Layout />
       </BrowserRouter>
     </RecoilRoot>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );