Comprehensive review changes

webclient/src/components/Toast/Toast.tsx

@@ -1,35 +1,34 @@
-import * as React from 'react'
-import { createPortal } from 'react-dom'
+import { ReactNode, SyntheticEvent } from 'react';
 
-import Alert from '@mui/material/Alert';
+import Alert, { AlertColor } from '@mui/material/Alert';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import Slide from '@mui/material/Slide';
+import Slide, { SlideProps } from '@mui/material/Slide';
 import Snackbar from '@mui/material/Snackbar';
 
 const iconMapping = {
-  success: <CheckCircleIcon />
+  success: <CheckCircleIcon />,
+};
+
+export interface ToastProps {
+  open: boolean;
+  onClose: (event?: SyntheticEvent) => void;
+  severity?: AlertColor;
+  autoHideDuration?: number;
+  children?: ReactNode;
 }
 
-function Toast(props) {
-  const { open, onClose, severity = 'success', autoHideDuration = 10000, children } = props
-
-  const rootElemRef = React.useRef(document.createElement('div'));
-
-  React.useEffect(() => {
-    document.body.appendChild(rootElemRef.current)
-    return () => {
-      rootElemRef.current.remove();
-    }
-  }, [rootElemRef])
-
-  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
+// MUI's Snackbar already self-portals to the end of document.body; adding our
+// own createPortal wrapper would leak <div>s under React StrictMode's double-
+// invoked effects. Render the Snackbar directly.
+function Toast({ open, onClose, severity = 'success', autoHideDuration = 10000, children }: ToastProps) {
+  const handleClose = (event?: SyntheticEvent | Event, reason?: string) => {
     if (reason === 'clickaway') {
       return;
     }
-    onClose(event);
+    onClose(event as SyntheticEvent | undefined);
   };
 
-  const node = (
+  return (
     <Snackbar
       open={open}
       autoHideDuration={autoHideDuration}
@@ -37,23 +36,18 @@ function Toast(props) {
       slots={{ transition: TransitionLeft }}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
     >
-      <Alert onClose={handleClose} severity={severity} iconMapping={iconMapping}
+      <Alert
+        onClose={handleClose}
+        severity={severity}
+        iconMapping={iconMapping}
         slotProps={{ message: { children } }}
       />
     </Snackbar>
-  )
-  if (!rootElemRef.current) {
-    return null
-  }
-
-  return createPortal(
-    node,
-    rootElemRef.current
   );
 }
 
-function TransitionLeft(props) {
+function TransitionLeft(props: SlideProps) {
   return <Slide {...props} direction="left" />;
 }
 
-export default Toast
+export default Toast;