Refactoring subcomponents to fix ts-lint errors.

ts/components/dialog/SessionSeedModal.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { SessionButton } from '../session/SessionButton';
 import { ToastUtils, UserUtils } from '../../session/utils';
-import { withTheme } from 'styled-components';
 import { PasswordUtil } from '../../util';
 import { getPasswordHash } from '../../data/data';
 import { QRCode } from 'react-qr-svg';
@@ -10,36 +9,45 @@ import { mn_decode } from '../../session/crypto/mnemonic';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
 import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
-import { useEffect } from 'react';
 
-interface Props {
+interface PasswordProps {
-  onClickOk?: () => any;
+  setPasswordValid: (val: boolean) => any;
+  passwordHash: string;
 }
 
-const SessionSeedModalInner = (props: Props) => {
+const Password = (props: PasswordProps) => {
+  const { setPasswordValid, passwordHash } = props;
+  const i18n = window.i18n;
   const [error, setError] = useState('');
-  const [loadingPassword, setLoadingPassword] = useState(true);
-  const [loadingSeed, setLoadingSeed] = useState(true);
-  const [recoveryPhrase, setRecoveryPhrase] = useState('');
-  const [hasPassword, setHasPassword] = useState<null | boolean>(null);
-  const [passwordHash, setPasswordHash] = useState('');
-  const [passwordValid, setPasswordValid] = useState(false);
 
-  useEffect(() => {
+  const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
-    setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
-    void checkHasPassword();
-    void getRecoveryPhrase();
-  }, []);
 
+  const confirmPassword = () => {
+    const passwordValue = jQuery('#seed-input-password').val();
+    const isPasswordValid = PasswordUtil.matchesHash(passwordValue as string, passwordHash);
 
-  const i18n = window.i18n;
+    if (!passwordValue) {
+      setError('noGivenPassword');
+      return false;
+    }
 
-  const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
+    if (passwordHash && !isPasswordValid) {
+      setError('invalidPassword');
+      return false;
+    }
 
-  const renderPasswordView = () => {
+    setPasswordValid(true);
-    const i18n = window.i18n;
+    setError('');
 
-    const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
+    window.removeEventListener('keyup', onEnter);
+    return true;
+  };
+
+  const onEnter = (event: any) => {
+    if (event.key === 'Enter') {
+      confirmPassword();
+    }
+  };
 
   return (
     <>
@@ -67,15 +75,30 @@ const SessionSeedModalInner = (props: Props) => {
       </div>
     </>
   );
+};
+
+interface SeedProps {
+  recoveryPhrase: string;
+  onClickCopy?: () => any;
 }
 
-  const renderSeedView = () => {
+const Seed = (props: SeedProps) => {
+  const { recoveryPhrase, onClickCopy } = props;
   const i18n = window.i18n;
   const bgColor = '#FFFFFF';
   const fgColor = '#1B1B1B';
 
   const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');
 
+  const copyRecoveryPhrase = (recoveryPhraseToCopy: string) => {
+    window.clipboard.writeText(recoveryPhraseToCopy);
+    ToastUtils.pushCopiedToClipBoard();
+    if (onClickCopy) {
+      onClickCopy();
+    }
+    window.inboxStore?.dispatch(recoveryPhraseModal(null));
+  };
+
   return (
     <>
       <div className="session-modal__centered text-center">
@@ -99,28 +122,30 @@ const SessionSeedModalInner = (props: Props) => {
       </div>
     </>
   );
-  }
+};
 
-  const confirmPassword = () => {
+interface ModalInnerProps {
-    const passwordValue = jQuery('#seed-input-password').val();
+  onClickOk?: () => any;
-    const isPasswordValid = PasswordUtil.matchesHash(passwordValue as string, passwordHash);
-
-    if (!passwordValue) {
-      setError('noGivenPassword');
-      return false;
 }
 
-    if (passwordHash && !isPasswordValid) {
+const SessionSeedModalInner = (props: ModalInnerProps) => {
-      setError('invalidPassword');
+  const { onClickOk } = props;
-      return false;
+  const [loadingPassword, setLoadingPassword] = useState(true);
-    }
+  const [loadingSeed, setLoadingSeed] = useState(true);
+  const [recoveryPhrase, setRecoveryPhrase] = useState('');
+  const [hasPassword, setHasPassword] = useState<null | boolean>(null);
+  const [passwordValid, setPasswordValid] = useState(false);
+  const [passwordHash, setPasswordHash] = useState('');
 
-    setPasswordValid(true);
+  useEffect(() => {
-    setError('');
+    setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
+    void checkHasPassword();
+    void getRecoveryPhrase();
+  }, []);
 
-    window.removeEventListener('keyup', onEnter);
+  const i18n = window.i18n;
-    return true;
+
-  }
+  const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
 
   const checkHasPassword = async () => {
     if (!loadingPassword) {
@@ -131,7 +156,7 @@ const SessionSeedModalInner = (props: Props) => {
     setHasPassword(!!hash);
     setPasswordHash(hash || '');
     setLoadingPassword(false);
-  }
+  };
 
   const getRecoveryPhrase = async () => {
     if (recoveryPhrase) {
@@ -142,24 +167,7 @@ const SessionSeedModalInner = (props: Props) => {
     setLoadingSeed(false);
 
     return true;
-  }
+  };
-
-  const copyRecoveryPhrase = (recoveryPhrase: string) => {
-    window.clipboard.writeText(recoveryPhrase);
-
-    ToastUtils.pushCopiedToClipBoard();
-    window.inboxStore?.dispatch(recoveryPhraseModal(null));
-  }
-
-  const onEnter = (event: any) => {
-    if (event.key === 'Enter') {
-      confirmPassword();
-    }
-  }
-
-  if (Math.random() > 0.5) {
-    return null;
-  }
 
   return (
     <>
@@ -172,17 +180,15 @@ const SessionSeedModalInner = (props: Props) => {
           <SpacerSM />
 
           {hasPassword && !passwordValid ? (
-            <>{renderPasswordView()}</>
+            <Password passwordHash={passwordHash} setPasswordValid={setPasswordValid} />
           ) : (
-            <>{renderSeedView()}</>
+            <Seed recoveryPhrase={recoveryPhrase} onClickCopy={onClickOk} />
           )}
         </SessionWrapperModal>
       )}
       :
     </>
   );
-}
+};
 
-// withTheme(SessionSeedModalInner)
-// export const SessionSeedModal = withTheme(SessionSeedModalInner);
 export const SessionSeedModal = SessionSeedModalInner;

ts/components/session/LeftPaneSectionHeader.tsx

@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import styled, { DefaultTheme, useTheme } from 'styled-components';
-import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
+import { SessionButton, SessionButtonType } from './SessionButton';
 import { Constants } from '../../session';
 import { UserUtils } from '../../session/utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
 import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
 import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
+import { Flex } from '../basic/Flex';
 
 const Tab = ({
   isSelected,
@@ -50,7 +51,7 @@ export const LeftPaneSectionHeader = (props: Props) => {
   const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
 
   return (
-    <StyledLeftPaneHeaderContainer>
+    <Flex flexDirection={'column'}>
       <div className="module-left-pane__header">
         {label && <Tab label={label} type={0} isSelected={true} key={label} />}
         {buttonIcon && (
@@ -65,7 +66,7 @@ export const LeftPaneSectionHeader = (props: Props) => {
         )}
       </div>
       {showRecoveryPhrasePrompt && <LeftPaneBanner />}
-    </StyledLeftPaneHeaderContainer>
+    </Flex>
   );
 };
 
@@ -82,21 +83,10 @@ export const LeftPaneBanner = () => {
 
   const dispatch = useDispatch();
 
-  const handleShowRecoveryClick = () => {
+  const showRecoveryPhraseModal = () => {
-    // setRecoveryPhraseHidden(false);
+    dispatch(
-    // setBodyText(window.i18n('recoveryPhraseInfoMessage'));
+      recoveryPhraseModal({
-    // setButtonText(window.i18n('copy'));
+        onClickOk: () => {
-
-    // show a modal
-    dispatch(recoveryPhraseModal({}))
-  };
-
-
-  const BannerInner = (props: any) => {
-    const dispatch = useDispatch();
-
-    const handleCopyPhraseClick = async () => {
-      await navigator.clipboard.writeText(recoveryPhrase);
           setCompletion(100);
           setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
           setBodyText('');
@@ -107,24 +97,17 @@ export const LeftPaneBanner = () => {
           setTimeout(() => {
             dispatch(disableRecoveryPhrasePrompt());
           }, secondsBeforeRemoval);
+        },
+      })
+    );
   };
 
-    const onClick =
+  const BannerInner = () => {
-      completion === 90
-        ? recoveryPhraseHidden
-          ? handleShowRecoveryClick
-          : handleCopyPhraseClick
-        : null;
-
     return (
       <StyledBannerInner>
         <p>{bodyText}</p>
         {!recoveryPhraseHidden && (
-          <StyledRecoveryPhrase
+          <StyledRecoveryPhrase theme={theme} className="left-pane-banner___phrase">
-            theme={theme}
-            className="left-pane-banner___phrase"
-            onClick={handleShowRecoveryClick}
-          >
             {recoveryPhrase}
           </StyledRecoveryPhrase>
         )}
@@ -132,14 +115,13 @@ export const LeftPaneBanner = () => {
           <SessionButton
             buttonType={SessionButtonType.Default}
             text={buttonText}
-            onClick={onClick}
+            onClick={showRecoveryPhraseModal}
           />
         )}
       </StyledBannerInner>
     );
   };
 
-  const flexDirection = completion === 90 && handleShowRecoveryClick ? 'column' : 'row';
   const theme = useTheme();
 
   return (
@@ -150,9 +132,13 @@ export const LeftPaneBanner = () => {
       <StyledBannerTitle theme={theme}>
         {bannerTitle} <span>{completionText}</span>
       </StyledBannerTitle>
-      <StyledBannerContainer flexDirection={flexDirection}>
+      <Flex
+        flexDirection={'column'}
+        justifyContent={'space-between'}
+        padding={`${Constants.UI.SPACING.marginSm}`}
+      >
         <BannerInner />
-      </StyledBannerContainer>
+      </Flex>
     </StyledLeftPaneBanner>
   );
 };
@@ -237,18 +223,3 @@ const StyledRecoveryPhrase = styled.p`
   padding: 5px;
   border: ${(props: StyledRecoveryPhraseProps) => props.theme.colors.sessionBorderHighContrast};
 `;
-
-interface StyledBannerContainerProps {
-  flexDirection?: string;
-}
-export const StyledBannerContainer = styled.div`
-  display: flex;
-  flex-direction: ${(p: StyledBannerContainerProps) => p.flexDirection};
-  justify-content: space-between;
-  padding: ${Constants.UI.SPACING.marginSm};
-`;
-
-export const StyledLeftPaneHeaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;