From 6800dd2d2869897f316739ee7561882444ce1a32 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 24 Nov 2023 19:37:30 +0000 Subject: [PATCH 1/2] refactor(ValidateCode): migrate to typescript --- ...eModal.js => ExpiredValidateCodeModal.tsx} | 11 ++-- ...SignedInModal.js => JustSignedInModal.tsx} | 14 ++--- ...dateCodeModal.js => ValidateCodeModal.tsx} | 60 ++++++++----------- 3 files changed, 33 insertions(+), 52 deletions(-) rename src/components/ValidateCode/{ExpiredValidateCodeModal.js => ExpiredValidateCodeModal.tsx} (81%) rename src/components/ValidateCode/{JustSignedInModal.js => JustSignedInModal.tsx} (84%) rename src/components/ValidateCode/{ValidateCodeModal.js => ValidateCodeModal.tsx} (57%) diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx similarity index 81% rename from src/components/ValidateCode/ExpiredValidateCodeModal.js rename to src/components/ValidateCode/ExpiredValidateCodeModal.tsx index caeef8a14a0a..1a6141923143 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.js +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx @@ -4,16 +4,14 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; -const propTypes = { - ...withLocalizePropTypes, -}; +type ExpiredValidateCodeModalProps = WithLocalizeProps; -function ExpiredValidateCodeModal(props) { +function ExpiredValidateCodeModal(props: ExpiredValidateCodeModalProps) { const theme = useTheme(); const styles = useThemeStyles(); return ( @@ -28,7 +26,7 @@ function ExpiredValidateCodeModal(props) { {props.translate('validateCodeModal.expiredCodeTitle')} - {props.translate('validateCodeModal.expiredCodeDescription')} + {props.translate('validateCodeModal.expiredCodeDescription')} @@ -43,6 +41,5 @@ function ExpiredValidateCodeModal(props) { ); } -ExpiredValidateCodeModal.propTypes = propTypes; ExpiredValidateCodeModal.displayName = 'ExpiredValidateCodeModal'; export default withLocalize(ExpiredValidateCodeModal); diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.tsx similarity index 84% rename from src/components/ValidateCode/JustSignedInModal.js rename to src/components/ValidateCode/JustSignedInModal.tsx index 0ae4c882784c..6dd2f3735ae8 100644 --- a/src/components/ValidateCode/JustSignedInModal.js +++ b/src/components/ValidateCode/JustSignedInModal.tsx @@ -1,23 +1,20 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; -const propTypes = { - ...withLocalizePropTypes, - +type JustSignedInModalProps = WithLocalizeProps & { /** Whether the 2FA is needed to get fully authenticated. */ - is2FARequired: PropTypes.bool.isRequired, + is2FARequired: boolean; }; -function JustSignedInModal(props) { +function JustSignedInModal(props: JustSignedInModalProps) { const theme = useTheme(); const styles = useThemeStyles(); return ( @@ -34,7 +31,7 @@ function JustSignedInModal(props) { {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')} - + {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')} @@ -51,7 +48,6 @@ function JustSignedInModal(props) { ); } -JustSignedInModal.propTypes = propTypes; JustSignedInModal.displayName = 'JustSignedInModal'; export default withLocalize(JustSignedInModal); diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.tsx similarity index 57% rename from src/components/ValidateCode/ValidateCodeModal.js rename to src/components/ValidateCode/ValidateCodeModal.tsx index 58f9b24e3c91..996fda33bc47 100644 --- a/src/components/ValidateCode/ValidateCodeModal.js +++ b/src/components/ValidateCode/ValidateCodeModal.tsx @@ -1,47 +1,37 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import {compose} from 'underscore'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; +import compose from '@libs/compose'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; import ONYXKEYS from '@src/ONYXKEYS'; +import {Session as SessionType} from '@src/types/onyx'; -const propTypes = { - /** Code to display. */ - code: PropTypes.string.isRequired, - - /** The ID of the account to which the code belongs. */ - accountID: PropTypes.string.isRequired, - +type ValidateCodeModalOnyxProps = { /** Session of currently logged in user */ - session: PropTypes.shape({ - /** Currently logged in user authToken */ - authToken: PropTypes.string, - }), - - ...withLocalizePropTypes, + session: OnyxEntry; }; -const defaultProps = { - session: { - authToken: null, - }, -}; +type ValidateCodeModalProps = WithLocalizeProps & + ValidateCodeModalOnyxProps & { + /** Code to display. */ + code: string; + /** The ID of the account to which the code belongs. */ + accountID: number; + }; -function ValidateCodeModal(props) { +function ValidateCodeModal({code, accountID, session = {}, translate}: ValidateCodeModalProps) { const theme = useTheme(); const styles = useThemeStyles(); - const signInHere = useCallback(() => Session.signInWithValidateCode(props.accountID, props.code), [props.accountID, props.code]); + const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]); return ( @@ -53,20 +43,20 @@ function ValidateCodeModal(props) { src={Illustrations.MagicCode} /> - {props.translate('validateCodeModal.title')} + {translate('validateCodeModal.title')} - - {props.translate('validateCodeModal.description')} - {!lodashGet(props, 'session.authToken', null) && ( + + {translate('validateCodeModal.description')} + {!session?.authToken && ( <> - {props.translate('validateCodeModal.or')} {props.translate('validateCodeModal.signInHere')} + {translate('validateCodeModal.or')} {translate('validateCodeModal.signInHere')} )} - {props.shouldShowSignInHere ? '!' : '.'} + . - {props.code} + {code} @@ -81,13 +71,11 @@ function ValidateCodeModal(props) { ); } -ValidateCodeModal.propTypes = propTypes; -ValidateCodeModal.defaultProps = defaultProps; ValidateCodeModal.displayName = 'ValidateCodeModal'; export default compose( - withLocalize, - withOnyx({ + withLocalize, + withOnyx({ session: {key: ONYXKEYS.SESSION}, }), )(ValidateCodeModal); From 9b7570c78bf2cf1ced6edcdc02a83ceca54bdcb6 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Tue, 28 Nov 2023 10:05:03 +0000 Subject: [PATCH 2/2] refactor: use useLocalize and destruct props --- .../ValidateCode/ExpiredValidateCodeModal.tsx | 13 ++++----- .../ValidateCode/JustSignedInModal.tsx | 19 ++++++------- .../ValidateCode/ValidateCodeModal.tsx | 28 ++++++++----------- 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx index 1a6141923143..fbccecab196f 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx @@ -4,16 +4,15 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; -import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; -type ExpiredValidateCodeModalProps = WithLocalizeProps; - -function ExpiredValidateCodeModal(props: ExpiredValidateCodeModalProps) { +function ExpiredValidateCodeModal() { const theme = useTheme(); const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( @@ -24,9 +23,9 @@ function ExpiredValidateCodeModal(props: ExpiredValidateCodeModalProps) { src={Illustrations.ToddBehindCloud} /> - {props.translate('validateCodeModal.expiredCodeTitle')} + {translate('validateCodeModal.expiredCodeTitle')} - {props.translate('validateCodeModal.expiredCodeDescription')} + {translate('validateCodeModal.expiredCodeDescription')} @@ -42,4 +41,4 @@ function ExpiredValidateCodeModal(props: ExpiredValidateCodeModalProps) { } ExpiredValidateCodeModal.displayName = 'ExpiredValidateCodeModal'; -export default withLocalize(ExpiredValidateCodeModal); +export default ExpiredValidateCodeModal; diff --git a/src/components/ValidateCode/JustSignedInModal.tsx b/src/components/ValidateCode/JustSignedInModal.tsx index 6dd2f3735ae8..ec866db19bf4 100644 --- a/src/components/ValidateCode/JustSignedInModal.tsx +++ b/src/components/ValidateCode/JustSignedInModal.tsx @@ -4,36 +4,35 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; -import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; -type JustSignedInModalProps = WithLocalizeProps & { +type JustSignedInModalProps = { /** Whether the 2FA is needed to get fully authenticated. */ is2FARequired: boolean; }; -function JustSignedInModal(props: JustSignedInModalProps) { +function JustSignedInModal({is2FARequired}: JustSignedInModalProps) { const theme = useTheme(); const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( - {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')} + {translate(is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')} - - {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')} - + {translate(is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')} @@ -50,4 +49,4 @@ function JustSignedInModal(props: JustSignedInModalProps) { JustSignedInModal.displayName = 'JustSignedInModal'; -export default withLocalize(JustSignedInModal); +export default JustSignedInModal; diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx index 996fda33bc47..38fe85c69cd8 100644 --- a/src/components/ValidateCode/ValidateCodeModal.tsx +++ b/src/components/ValidateCode/ValidateCodeModal.tsx @@ -6,8 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; -import compose from '@libs/compose'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; @@ -20,18 +19,18 @@ type ValidateCodeModalOnyxProps = { session: OnyxEntry; }; -type ValidateCodeModalProps = WithLocalizeProps & - ValidateCodeModalOnyxProps & { - /** Code to display. */ - code: string; - /** The ID of the account to which the code belongs. */ - accountID: number; - }; +type ValidateCodeModalProps = ValidateCodeModalOnyxProps & { + /** Code to display. */ + code: string; + /** The ID of the account to which the code belongs. */ + accountID: number; +}; -function ValidateCodeModal({code, accountID, session = {}, translate}: ValidateCodeModalProps) { +function ValidateCodeModal({code, accountID, session = {}}: ValidateCodeModalProps) { const theme = useTheme(); const styles = useThemeStyles(); const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]); + const {translate} = useLocalize(); return ( @@ -73,9 +72,6 @@ function ValidateCodeModal({code, accountID, session = {}, translate}: ValidateC ValidateCodeModal.displayName = 'ValidateCodeModal'; -export default compose( - withLocalize, - withOnyx({ - session: {key: ONYXKEYS.SESSION}, - }), -)(ValidateCodeModal); +export default withOnyx({ + session: {key: ONYXKEYS.SESSION}, +})(ValidateCodeModal);