Username Education

Co-authored-by: Jamie Kyle <jamie@signal.org>

ts/components/Toast.tsx

@@ -4,10 +4,8 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import React, { memo, useEffect } from 'react';
 import classNames from 'classnames';
-import { createPortal } from 'react-dom';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 import { clearTimeoutIfNecessary } from '../util/clearTimeoutIfNecessary';
-import * as log from '../logging/log';
 
 export type PropsType = {
   autoDismissDisabled?: boolean;
@@ -33,51 +31,10 @@ export const Toast = memo(function ToastInner({
   timeout = 8000,
   toastAction,
 }: PropsType): JSX.Element | null {
-  const [root, setRoot] = React.useState<HTMLElement | null>(null);
   const [focusRef] = useRestoreFocus();
-  const [align, setAlign] = React.useState<'left' | 'center'>('left');
 
   useEffect(() => {
-    function updateAlign() {
-      const leftPane = document.querySelector('.module-left-pane');
-      const composer = document.querySelector(
-        '.ConversationView__composition-area'
-      );
-
-      if (
-        leftPane != null &&
-        composer != null &&
-        leftPane.classList.contains('module-left-pane--width-narrow')
-      ) {
-        setAlign('center');
-        return;
-      }
-
-      setAlign('left');
-    }
-
-    updateAlign();
-
-    if (window.reduxStore == null) {
-      log.warn('Toast: No redux store');
-      return;
-    }
-    return window.reduxStore.subscribe(updateAlign);
-  }, []);
-
-  useEffect(() => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    setRoot(div);
-
-    return () => {
-      document.body.removeChild(div);
-      setRoot(null);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!root || autoDismissDisabled) {
+    if (autoDismissDisabled) {
       return;
     }
 
@@ -86,56 +43,53 @@ export const Toast = memo(function ToastInner({
     return () => {
       clearTimeoutIfNecessary(timeoutId);
     };
-  }, [autoDismissDisabled, onClose, root, timeout]);
+  }, [autoDismissDisabled, onClose, timeout]);
 
-  return root
-    ? createPortal(
+  return (
+    <div
+      aria-live="assertive"
+      className={classNames('Toast', className)}
+      onClick={() => {
+        if (!disableCloseOnClick) {
+          onClose();
+        }
+      }}
+      onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+          if (!disableCloseOnClick) {
+            onClose();
+          }
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      style={style}
+    >
+      <div className="Toast__content">{children}</div>
+      {toastAction && (
         <div
-          aria-live="assertive"
-          className={classNames('Toast', `Toast--align-${align}`, className)}
-          onClick={() => {
-            if (!disableCloseOnClick) {
-              onClose();
-            }
+          className="Toast__button"
+          onClick={(ev: MouseEvent<HTMLDivElement>) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            toastAction.onClick();
+            onClose();
           }}
           onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
             if (ev.key === 'Enter' || ev.key === ' ') {
-              if (!disableCloseOnClick) {
-                onClose();
-              }
+              ev.stopPropagation();
+              ev.preventDefault();
+              toastAction.onClick();
+              onClose();
             }
           }}
+          ref={focusRef}
           role="button"
           tabIndex={0}
-          style={style}
         >
-          <div className="Toast__content">{children}</div>
-          {toastAction && (
-            <div
-              className="Toast__button"
-              onClick={(ev: MouseEvent<HTMLDivElement>) => {
-                ev.stopPropagation();
-                ev.preventDefault();
-                toastAction.onClick();
-                onClose();
-              }}
-              onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-                if (ev.key === 'Enter' || ev.key === ' ') {
-                  ev.stopPropagation();
-                  ev.preventDefault();
-                  toastAction.onClick();
-                  onClose();
-                }
-              }}
-              ref={focusRef}
-              role="button"
-              tabIndex={0}
-            >
-              {toastAction.label}
-            </div>
-          )}
-        </div>,
-        root
-      )
-    : null;
+          {toastAction.label}
+        </div>
+      )}
+    </div>
+  );
 });