From f255f674c8c1a3008864463d881d5e30576075f4 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 17 Aug 2021 15:11:40 +1000 Subject: [PATCH] Refactoring subcomponents to fix ts-lint errors. --- ts/components/dialog/SessionSeedModal.tsx | 230 +++++++++--------- .../session/LeftPaneSectionHeader.tsx | 89 +++---- 2 files changed, 148 insertions(+), 171 deletions(-) diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index 87bc05263..a8261c0f3 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/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); - 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 ( - <> -

{i18n('showRecoveryPhrasePasswordRequest')}

- - - {error && ( - <> - -
{error}
- - )} - - - -
- - - -
- - ); - } - - const renderSeedView = () => { - const i18n = window.i18n; - const bgColor = '#FFFFFF'; - const fgColor = '#1B1B1B'; - - const hexEncodedSeed = mn_decode(recoveryPhrase, 'english'); - - return ( - <> -
-

{i18n('recoveryPhraseSavePromptMain')}

- - - {recoveryPhrase} -
- -
- -
- -
- { - copyRecoveryPhrase(recoveryPhrase); - }} - /> -
- - ); - } - 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 ( + <> +

{i18n('showRecoveryPhrasePasswordRequest')}

+ + + {error && ( + <> + +
{error}
+ + )} + + + +
+ + + +
+ + ); +}; + +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 ( + <> +
+

{i18n('recoveryPhraseSavePromptMain')}

+ + + {recoveryPhrase} +
+ +
+ +
+ +
+ { + copyRecoveryPhrase(recoveryPhrase); + }} + /> +
+ + ); +}; + +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); + 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) => { {hasPassword && !passwordValid ? ( - <>{renderPasswordView()} + ) : ( - <>{renderSeedView()} + )} )} : - ); -} + ); +}; -// withTheme(SessionSeedModalInner) -// export const SessionSeedModal = withTheme(SessionSeedModalInner); export const SessionSeedModal = SessionSeedModalInner; diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index bd98b5aba..c27280053 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/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 ( - +
{label && } {buttonIcon && ( @@ -65,7 +66,7 @@ export const LeftPaneSectionHeader = (props: Props) => { )}
{showRecoveryPhrasePrompt && } - + ); }; @@ -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 (

{bodyText}

{!recoveryPhraseHidden && ( - + {recoveryPhrase} )} @@ -132,14 +115,13 @@ export const LeftPaneBanner = () => { )} ); }; - const flexDirection = completion === 90 && handleShowRecoveryClick ? 'column' : 'row'; const theme = useTheme(); return ( @@ -150,9 +132,13 @@ export const LeftPaneBanner = () => { {bannerTitle} {completionText} - + - + ); }; @@ -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; -`;