[TS migration] Migrate 'ValidateCode' component to TypeScript

src/components/ValidateCode/ExpiredValidateCodeModal.js → src/components/ValidateCode/ExpiredValidateCodeModal.tsx

@@ -4,18 +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, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-function ExpiredValidateCodeModal(props) {
+function ExpiredValidateCodeModal() {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     return (
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>
@@ -26,9 +23,9 @@ function ExpiredValidateCodeModal(props) {
                         src={Illustrations.ToddBehindCloud}
                     />
                 </View>
-                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{props.translate('validateCodeModal.expiredCodeTitle')}</Text>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.expiredCodeTitle')}</Text>
                 <View style={[styles.mt2, styles.mb2]}>
-                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>{props.translate('validateCodeModal.expiredCodeDescription')}</Text>
+                    <Text style={styles.textAlignCenter}>{translate('validateCodeModal.expiredCodeDescription')}</Text>
                 </View>
             </View>
             <View style={styles.deeplinkWrapperFooter}>
@@ -43,6 +40,5 @@ function ExpiredValidateCodeModal(props) {
     );
 }
 
-ExpiredValidateCodeModal.propTypes = propTypes;
 ExpiredValidateCodeModal.displayName = 'ExpiredValidateCodeModal';
-export default withLocalize(ExpiredValidateCodeModal);
+export default ExpiredValidateCodeModal;

src/components/ValidateCode/JustSignedInModal.js → src/components/ValidateCode/JustSignedInModal.tsx

@@ -1,42 +1,38 @@
-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 useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-
+type JustSignedInModalProps = {
     /** Whether the 2FA is needed to get fully authenticated. */
-    is2FARequired: PropTypes.bool.isRequired,
+    is2FARequired: boolean;
 };
 
-function JustSignedInModal(props) {
+function JustSignedInModal({is2FARequired}: JustSignedInModalProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     return (
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>
                 <View style={styles.mb2}>
                     <Icon
                         width={variables.modalTopIconWidth}
-                        height={props.is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
-                        src={props.is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}
+                        height={is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
+                        src={is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>
-                    {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')}
+                    {translate(is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')}
                 </Text>
                 <View style={[styles.mt2, styles.mb2]}>
-                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
-                        {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')}
-                    </Text>
+                    <Text style={styles.textAlignCenter}>{translate(is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')}</Text>
                 </View>
             </View>
             <View style={styles.deeplinkWrapperFooter}>
@@ -51,7 +47,6 @@ function JustSignedInModal(props) {
     );
 }
 
-JustSignedInModal.propTypes = propTypes;
 JustSignedInModal.displayName = 'JustSignedInModal';
 
-export default withLocalize(JustSignedInModal);
+export default JustSignedInModal;

src/components/ValidateCode/ValidateCodeModal.js → src/components/ValidateCode/ValidateCodeModal.tsx

@@ -1,47 +1,36 @@
-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 useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/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<SessionType>;
 };
 
-const defaultProps = {
-    session: {
-        authToken: null,
-    },
+type ValidateCodeModalProps = 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 = {}}: 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]);
+    const {translate} = useLocalize();
 
     return (
         <View style={styles.deeplinkWrapperContainer}>
@@ -53,20 +42,20 @@ function ValidateCodeModal(props) {
                         src={Illustrations.MagicCode}
                     />
                 </View>
-                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{props.translate('validateCodeModal.title')}</Text>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
                 <View style={[styles.mt2, styles.mb2]}>
-                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
-                        {props.translate('validateCodeModal.description')}
-                        {!lodashGet(props, 'session.authToken', null) && (
+                    <Text style={styles.textAlignCenter}>
+                        {translate('validateCodeModal.description')}
+                        {!session?.authToken && (
                             <>
-                                {props.translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{props.translate('validateCodeModal.signInHere')}</TextLink>
+                                {translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{translate('validateCodeModal.signInHere')}</TextLink>
                             </>
                         )}
-                        {props.shouldShowSignInHere ? '!' : '.'}
+                        .
                     </Text>
                 </View>
                 <View style={styles.mt6}>
-                    <Text style={styles.validateCodeDigits}>{props.code}</Text>
+                    <Text style={styles.validateCodeDigits}>{code}</Text>
                 </View>
             </View>
             <View style={styles.deeplinkWrapperFooter}>
@@ -81,13 +70,8 @@ function ValidateCodeModal(props) {
     );
 }
 
-ValidateCodeModal.propTypes = propTypes;
-ValidateCodeModal.defaultProps = defaultProps;
 ValidateCodeModal.displayName = 'ValidateCodeModal';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {key: ONYXKEYS.SESSION},
-    }),
-)(ValidateCodeModal);
+export default withOnyx<ValidateCodeModalProps, ValidateCodeModalOnyxProps>({
+    session: {key: ONYXKEYS.SESSION},
+})(ValidateCodeModal);