upgrade packages

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -1,42 +1,40 @@
-import { Component, CElement } from 'react';
+import { ReactElement } from 'react';
 import Grid from '@mui/material/Grid';
 
 import './ThreePaneLayout.css';
 
 // @DEPRECATED
 // This component sucks balls, dont use it. It will be removed sooner than later.
-class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
-  render() {
-    return (
-      <div className="three-pane-layout">
-        <Grid container rowSpacing={0} columnSpacing={2} className="grid">
-          <Grid size={{ xs: 12, md: 9, lg: 10 }} className="grid-main">
-            <Grid className={
-              'grid-main__top'
-              + (this.props.fixedHeight ? ' fixedHeight' : '')
-            }>
-              {this.props.top}
-            </Grid>
-            <Grid className={
-              'grid-main__bottom'
-              + (this.props.fixedHeight ? ' fixedHeight' : '')
-            }>
-              {this.props.bottom}
-            </Grid>
+function ThreePaneLayout(props: ThreePaneLayoutProps) {
+  return (
+    <div className="three-pane-layout">
+      <Grid container rowSpacing={0} columnSpacing={2} className="grid">
+        <Grid size={{ xs: 12, md: 9, lg: 10 }} className="grid-main">
+          <Grid className={
+            'grid-main__top'
+            + (props.fixedHeight ? ' fixedHeight' : '')
+          }>
+            {props.top}
           </Grid>
-          <Grid size={{ md: 3, lg: 2 }} sx={{ display: { xs: 'none', md: 'block' } }} className="grid-side">
-            {this.props.side}
+          <Grid className={
+            'grid-main__bottom'
+            + (props.fixedHeight ? ' fixedHeight' : '')
+          }>
+            {props.bottom}
           </Grid>
         </Grid>
-      </div>
-    );
-  }
+        <Grid size={{ md: 3, lg: 2 }} sx={{ display: { xs: 'none', md: 'block' } }} className="grid-side">
+          {props.side}
+        </Grid>
+      </Grid>
+    </div>
+  );
 }
 
 interface ThreePaneLayoutProps {
-  top: CElement<any, any>,
-  bottom: CElement<any, any>,
-  side?: CElement<any, any>,
+  top: ReactElement,
+  bottom: ReactElement,
+  side?: ReactElement,
   fixedHeight?: boolean,
 }
 

webclient/src/components/Toast/Toast.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 
 import Alert from '@mui/material/Alert';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -46,7 +46,7 @@ function Toast(props) {
     return null
   }
 
-  return ReactDOM.createPortal(
+  return createPortal(
     node,
     rootElemRef.current
   );