fix: click on toast does not close dialogs

Author: Bilb

ts/components/SessionWrapperModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton } from './icon/';
@@ -63,17 +63,11 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     }
   };
 
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, []);
-
   return (
     <div
       className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)}
+      onClick={handleClick}
+      role="dialog"
     >
       <div className="session-confirm-wrapper">
         <div ref={modalRef} className="session-modal">

ts/components/basic/SessionToast.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { Flex } from '../basic/Flex';
 import styled from 'styled-components';
-import { noop } from 'lodash';
 import { SessionIcon, SessionIconType } from '../icon';
+import { noop } from 'lodash';
 
 export enum SessionToastType {
   Info = 'info',
@@ -44,6 +44,8 @@ const IconDiv = styled.div`
   padding-inline-end: var(--margins-xs);
 `;
 
+// tslint:disable: use-simple-attributes
+
 export const SessionToast = (props: Props) => {
   const { title, description, type, icon } = props;
 
@@ -71,14 +73,10 @@ export const SessionToast = (props: Props) => {
     }
   }
 
+  const onToastClick = props?.onToastClick || noop;
+
   return (
-    // tslint:disable-next-line: use-simple-attributes
-    <Flex
-      container={true}
-      alignItems="center"
-      onClick={props?.onToastClick || noop}
-      data-testid="session-toast"
-    >
+    <Flex container={true} alignItems="center" onClick={onToastClick} data-testid="session-toast">
       <IconDiv>
         <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />
       </IconDiv>

ts/components/leftpane/ActionsPanel.tsx

@@ -39,7 +39,6 @@ import { getSwarmPollingInstance } from '../../session/apis/snode_api';
 import { forceRefreshRandomSnodePool } from '../../session/apis/snode_api/snodePool';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { SessionIconButton } from '../icon';
-import { SessionToastContainer } from '../SessionToastContainer';
 import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
 import { ipcRenderer } from 'electron';
 import { UserUtils } from '../../session/utils';
@@ -277,8 +276,6 @@ export const ActionsPanel = () => {
         <Section type={SectionType.Message} />
         <Section type={SectionType.Settings} />
 
-        <SessionToastContainer />
-
         <Section type={SectionType.PathIndicator} />
         <Section type={SectionType.Moon} />
       </LeftPaneSectionContainer>

ts/components/leftpane/LeftPane.tsx

@@ -12,6 +12,7 @@ import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer'
 import { DraggableCallContainer } from '../calling/DraggableCallContainer';
 import { IncomingCallDialog } from '../calling/IncomingCallDialog';
 import { ModalContainer } from '../dialog/ModalContainer';
+import { SessionToastContainer } from '../SessionToastContainer';
 import { ActionsPanel } from './ActionsPanel';
 import { LeftPaneMessageSection } from './LeftPaneMessageSection';
 import { LeftPaneSettingSection } from './LeftPaneSettingSection';
@@ -71,6 +72,7 @@ export const LeftPane = () => {
       <div className="module-left-pane-session">
         <ModalContainer />
         <CallContainer />
+        <SessionToastContainer />
         <ActionsPanel />
 
         <StyledLeftPane className="module-left-pane">

ts/components/registration/SignInTab.tsx

@@ -96,6 +96,23 @@ const SignInButtons = (props: {
   );
 };
 
+export function sanitizeDisplayNameOrToast(
+  displayName: string,
+  setDisplayName: (sanitized: string) => void,
+  setDisplayNameError: (error: string | undefined) => void
+) {
+  try {
+    const sanitizedName = sanitizeSessionUsername(displayName);
+    const trimName = sanitizedName.trim();
+    setDisplayName(sanitizedName);
+    setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+  } catch (e) {
+    setDisplayName(displayName);
+    setDisplayNameError(window.i18n('displayNameTooLong'));
+    ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
+  }
+}
+
 export const SignInTab = () => {
   const { setRegistrationPhase, signInMode, setSignInMode } = useContext(RegistrationContext);
 
@@ -149,16 +166,7 @@ export const SignInTab = () => {
             displayName={displayName}
             handlePressEnter={continueYourSession}
             onDisplayNameChanged={(name: string) => {
-              try {
-                const sanitizedName = sanitizeSessionUsername(name);
-                const trimName = sanitizedName.trim();
-                setDisplayName(sanitizedName);
-                setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
-              } catch (e) {
-                setDisplayName(name);
-                setDisplayNameError(window.i18n('displayNameTooLong'));
-                ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
-              }
+              sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
             }}
             onSeedChanged={(seed: string) => {
               setRecoveryPhrase(seed);

ts/components/registration/SignUpTab.tsx

@@ -1,13 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { ToastUtils } from '../../session/utils';
-import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionIdEditable } from '../basic/SessionIdEditable';
 import { SessionIconButton } from '../icon';
 import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
-import { SignInMode } from './SignInTab';
+import { sanitizeDisplayNameOrToast, SignInMode } from './SignInTab';
 import { TermsAndConditions } from './TermsAndConditions';
 
 export enum SignUpMode {
@@ -145,16 +143,7 @@ export const SignUpTab = () => {
         displayName={displayName}
         handlePressEnter={signUpWithDetails}
         onDisplayNameChanged={(name: string) => {
-          try {
-            const sanitizedName = sanitizeSessionUsername(name);
-            const trimName = sanitizedName.trim();
-            setDisplayName(sanitizedName);
-            setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
-          } catch (e) {
-            setDisplayName(name);
-            setDisplayNameError(window.i18n('displayNameTooLong'));
-            ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
-          }
+          sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
         }}
         stealAutoFocus={true}
       />