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,97 +9,19 @@ 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 {
-  onClickOk?: () => any;
+interface PasswordProps {
+  setPasswordValid: (val: boolean) => any;
+  passwordHash: string;
 }
 
-const SessionSeedModalInner = (props: Props) => {
-  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(() => {
-    setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
-    void checkHasPassword();
-    void getRecoveryPhrase();
-  }, []);
-
-
+const Password = (props: PasswordProps) => {
+  const { setPasswordValid, passwordHash } = props;
   const i18n = window.i18n;
+  const [error, setError] = useState('');
 
   const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
 
-  const renderPasswordView = () => {
-    const i18n = window.i18n;
-
-    const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
-
-    return (
-      <>
-        <p>{i18n('showRecoveryPhrasePasswordRequest')}</p>
-        <input
-          type="password"
-          id="seed-input-password"
-          placeholder={i18n('password')}
-          onKeyUp={onEnter}
-        />
-
-        {error && (
-          <>
-            <SpacerXS />
-            <div className="session-label danger">{error}</div>
-          </>
-        )}
-
-        <SpacerLG />
-
-        <div className="session-modal__button-group">
-          <SessionButton text={i18n('ok')} onClick={confirmPassword} />
-
-          <SessionButton text={i18n('cancel')} onClick={onClose} />
-        </div>
-      </>
-    );
-  }
-
-  const renderSeedView = () => {
-    const i18n = window.i18n;
-    const bgColor = '#FFFFFF';
-    const fgColor = '#1B1B1B';
-
-    const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');
-
-    return (
-      <>
-        <div className="session-modal__centered text-center">
-          <p className="session-modal__description">{i18n('recoveryPhraseSavePromptMain')}</p>
-          <SpacerXS />
-
-          <i className="session-modal__text-highlight">{recoveryPhrase}</i>
-        </div>
-        <SpacerLG />
-        <div className="qr-image">
-          <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
-        </div>
-        <SpacerLG />
-        <div className="session-modal__button-group">
-          <SessionButton
-            text={i18n('copy')}
-            onClick={() => {
-              copyRecoveryPhrase(recoveryPhrase);
-            }}
-          />
-        </div>
-      </>
-    );
-  }
-
   const confirmPassword = () => {
     const passwordValue = jQuery('#seed-input-password').val();
     const isPasswordValid = PasswordUtil.matchesHash(passwordValue as string, passwordHash);
@@ -120,7 +41,111 @@ const SessionSeedModalInner = (props: Props) => {
 
     window.removeEventListener('keyup', onEnter);
     return true;
-  }
+  };
+
+  const onEnter = (event: any) => {
+    if (event.key === 'Enter') {
+      confirmPassword();
+    }
+  };
+
+  return (
+    <>
+      <p>{i18n('showRecoveryPhrasePasswordRequest')}</p>
+      <input
+        type="password"
+        id="seed-input-password"
+        placeholder={i18n('password')}
+        onKeyUp={onEnter}
+      />
+
+      {error && (
+        <>
+          <SpacerXS />
+          <div className="session-label danger">{error}</div>
+        </>
+      )}
+
+      <SpacerLG />
+
+      <div className="session-modal__button-group">
+        <SessionButton text={i18n('ok')} onClick={confirmPassword} />
+
+        <SessionButton text={i18n('cancel')} onClick={onClose} />
+      </div>
+    </>
+  );
+};
+
+interface SeedProps {
+  recoveryPhrase: string;
+  onClickCopy?: () => any;
+}
+
+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">
+        <p className="session-modal__description">{i18n('recoveryPhraseSavePromptMain')}</p>
+        <SpacerXS />
+
+        <i className="session-modal__text-highlight">{recoveryPhrase}</i>
+      </div>
+      <SpacerLG />
+      <div className="qr-image">
+        <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
+      </div>
+      <SpacerLG />
+      <div className="session-modal__button-group">
+        <SessionButton
+          text={i18n('copy')}
+          onClick={() => {
+            copyRecoveryPhrase(recoveryPhrase);
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+interface ModalInnerProps {
+  onClickOk?: () => any;
+}
+
+const SessionSeedModalInner = (props: ModalInnerProps) => {
+  const { onClickOk } = props;
+  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('');
+
+  useEffect(() => {
+    setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
+    void checkHasPassword();
+    void getRecoveryPhrase();
+  }, []);
+
+  const i18n = window.i18n;
+
+  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,49 +83,31 @@ export const LeftPaneBanner = () => {
 
   const dispatch = useDispatch();
 
-  const handleShowRecoveryClick = () => {
-    // setRecoveryPhraseHidden(false);
-    // setBodyText(window.i18n('recoveryPhraseInfoMessage'));
-    // setButtonText(window.i18n('copy'));
-
-    // show a modal
-    dispatch(recoveryPhraseModal({}))
+  const showRecoveryPhraseModal = () => {
+    dispatch(
+      recoveryPhraseModal({
+        onClickOk: () => {
+          setCompletion(100);
+          setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
+          setBodyText('');
+          setRecoveryPhraseHidden(true);
+          setIsCompleted(true);
+
+          // remove banner after a small delay
+          setTimeout(() => {
+            dispatch(disableRecoveryPhrasePrompt());
+          }, secondsBeforeRemoval);
+        },
+      })
+    );
   };
 
-
-  const BannerInner = (props: any) => {
-    const dispatch = useDispatch();
-
-    const handleCopyPhraseClick = async () => {
-      await navigator.clipboard.writeText(recoveryPhrase);
-      setCompletion(100);
-      setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
-      setBodyText('');
-      setRecoveryPhraseHidden(true);
-      setIsCompleted(true);
-
-      // remove banner after a small delay
-      setTimeout(() => {
-        dispatch(disableRecoveryPhrasePrompt());
-      }, secondsBeforeRemoval);
-    };
-
-    const onClick =
-      completion === 90
-        ? recoveryPhraseHidden
-          ? handleShowRecoveryClick
-          : handleCopyPhraseClick
-        : null;
-
+  const BannerInner = () => {
     return (
       <StyledBannerInner>
         <p>{bodyText}</p>
         {!recoveryPhraseHidden && (
-          <StyledRecoveryPhrase
-            theme={theme}
-            className="left-pane-banner___phrase"
-            onClick={handleShowRecoveryClick}
-          >
+          <StyledRecoveryPhrase theme={theme} className="left-pane-banner___phrase">
             {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;
-`;