[TS migration] Migrate 'SettingsSecurity2FA' page to TypeScript

src/hooks/useWindowDimensions/index.native.ts

@@ -12,6 +12,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = true;
     const isMediumScreenWidth = false;
     const isLargeScreenWidth = false;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
     const isSmallScreen = true;
 
     return {
@@ -21,6 +22,7 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
         isSmallScreen,
     };
 }

src/hooks/useWindowDimensions/index.ts

@@ -22,6 +22,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
 
     const lowerScreenDimmension = Math.min(windowWidth, windowHeight);
     const isSmallScreen = lowerScreenDimmension <= variables.mobileResponsiveWidthBreakpoint;
@@ -85,6 +86,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
         isSmallScreen,
     };
 }

src/hooks/useWindowDimensions/types.ts

@@ -5,6 +5,7 @@ type WindowDimensions = {
     isSmallScreenWidth: boolean;
     isMediumScreenWidth: boolean;
     isLargeScreenWidth: boolean;
+    isExtraSmallScreenWidth: boolean;
     isSmallScreen: boolean;
 };
 

src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js → src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx

@@ -6,19 +6,43 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
-import StepWrapperPropTypes from './StepWrapperPropTypes';
+
+type StepWrapperProps = {
+    /** Title of the Header */
+    title?: string;
+
+    /** Data to display a step counter in the header */
+    stepCounter?: {
+        /** Current step */
+        step: number;
+        /** Total number of steps */
+        total?: number;
+        /** Text to display next to the step counter */
+        text?: string;
+    };
+
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress?: () => void;
+
+    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
+    onEntryTransitionEnd?: () => void;
+
+    /** Children components */
+    children?: React.ReactNode;
+
+    /** Flag to indicate if the keyboard avoiding view should be enabled */
+    shouldEnableKeyboardAvoidingView?: boolean;
+};
 
 function StepWrapper({
     title = '',
-    stepCounter = null,
+    stepCounter,
     onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
-}) {
+}: StepWrapperProps) {
     const styles = useThemeStyles();
-    const shouldShowStepCounter = Boolean(stepCounter);
-
     const {animationDirection} = useAnimatedStepContext();
 
     return (
@@ -29,12 +53,11 @@ function StepWrapper({
         >
             <AnimatedStep
                 style={[styles.flex1]}
-                onAnimationEnd={onEntryTransitionEnd}
+                onAnimationEnd={onEntryTransitionEnd as () => void}
                 direction={animationDirection}
             >
                 <HeaderWithBackButton
                     title={title}
-                    shouldShowStepCounter={shouldShowStepCounter}
                     stepCounter={stepCounter}
                     onBackButtonPress={onBackButtonPress}
                 />
@@ -44,7 +67,6 @@ function StepWrapper({
     );
 }
 
-StepWrapper.propTypes = StepWrapperPropTypes;
 StepWrapper.displayName = 'StepWrapper';
 
 export default StepWrapper;

src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js → src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {ActivityIndicator, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -18,13 +17,20 @@ import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
 
-function CodesStep({account = defaultAccount, backTo}) {
+type CodesStepProps = TwoFactorAuthStepOnyxProps & {
+    /** The route to go back to when the user cancels */
+    backTo: Route | undefined;
+};
+
+function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -34,7 +40,7 @@ function CodesStep({account = defaultAccount, backTo}) {
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
-        if (account.requiresTwoFactorAuth || account.recoveryCodes) {
+        if (account?.requiresTwoFactorAuth ?? account?.recoveryCodes) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
@@ -63,15 +69,15 @@ function CodesStep({account = defaultAccount, backTo}) {
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
                     <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
-                        {account.isLoading ? (
+                        {account?.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={theme.spinner} />
                             </View>
                         ) : (
                             <>
                                 <View style={styles.twoFactorAuthCodesContainer}>
-                                    {Boolean(account.recoveryCodes) &&
-                                        _.map(account.recoveryCodes.split(', '), (code) => (
+                                    {Boolean(account?.recoveryCodes) &&
+                                        account?.recoveryCodes?.split(', ').map((code) => (
                                             <Text
                                                 style={styles.twoFactorAuthCode}
                                                 key={code}
@@ -87,43 +93,49 @@ function CodesStep({account = defaultAccount, backTo}) {
                                         icon={Expensicons.Copy}
                                         inline={false}
                                         onPress={() => {
-                                            Clipboard.setString(account.recoveryCodes);
+                                            Clipboard.setString(account?.recoveryCodes ?? '');
                                             setError('');
                                             TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
+                                        accessible={false}
+                                        tooltipText=""
+                                        tooltipTextChecked=""
                                     />
                                     <PressableWithDelayToggle
                                         text={translate('common.download')}
                                         icon={Expensicons.Download}
                                         onPress={() => {
-                                            localFileDownload('two-factor-auth-codes', account.recoveryCodes);
+                                            localFileDownload('two-factor-auth-codes', account?.recoveryCodes ?? '');
                                             setError('');
                                             TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         inline={false}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
+                                        accessible={false}
+                                        tooltipText=""
+                                        tooltipTextChecked=""
                                     />
                                 </View>
                             </>
                         )}
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {!_.isEmpty(error) && (
+                    {Object.keys(error).length && (
                         <FormHelpMessage
                             isError
-                            message={error}
+                            message={translate(error as TranslationPaths)}
                             style={[styles.mb3]}
                         />
                     )}
                     <Button
                         success
                         text={translate('common.next')}
                         onPress={() => {
-                            if (!account.codesAreCopied) {
+                            if (!account?.codesAreCopied) {
                                 setError('twoFactorAuth.errorStepCodes');
                                 return;
                             }
@@ -136,10 +148,8 @@ function CodesStep({account = defaultAccount, backTo}) {
     );
 }
 
-CodesStep.propTypes = TwoFactorAuthPropTypes;
 CodesStep.displayName = 'CodesStep';
 
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
+export default withOnyx<CodesStepProps, TwoFactorAuthStepOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(CodesStep);

src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js → src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
@@ -8,17 +7,14 @@ import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/Step
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
+import type {Route} from '@src/ROUTES';
 
-const propTypes = {
+type SuccessStepProps = {
     /** The route where user needs to be redirected after setting up 2FA */
-    backTo: PropTypes.string,
+    backTo?: Route;
 };
 
-const defaultProps = {
-    backTo: '',
-};
-
-function SuccessStep({backTo}) {
+function SuccessStep({backTo}: SuccessStepProps) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -49,7 +45,4 @@ function SuccessStep({backTo}) {
     );
 }
 
-SuccessStep.propTypes = propTypes;
-SuccessStep.defaultProps = defaultProps;
-
 export default SuccessStep;