[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;
 
     return {
         windowWidth,
@@ -20,5 +21,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
     };
 }

src/hooks/useWindowDimensions/index.ts

@@ -14,6 +14,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
 
     return {
         windowWidth,
@@ -22,5 +23,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
     };
 }

src/hooks/useWindowDimensions/types.ts

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

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

@@ -6,20 +6,18 @@ 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';
+import type StepWrapperPropTypes from './StepWrapperPropTypes';
 
 function StepWrapper({
     title = '',
-    stepCounter = null,
+    stepCounter,
     onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
-}) {
+}: StepWrapperPropTypes) {
     const styles = useThemeStyles();
-    const shouldShowStepCounter = Boolean(stepCounter);
-
-    const {animationDirection} = useAnimatedStepContext();
+    const { animationDirection } = useAnimatedStepContext();
 
     return (
         <ScreenWrapper
@@ -29,12 +27,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 +41,6 @@ function StepWrapper({
     );
 }
 
-StepWrapper.propTypes = StepWrapperPropTypes;
 StepWrapper.displayName = 'StepWrapper';
 
 export default StepWrapper;

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

@@ -1,28 +1,29 @@
-import PropTypes from 'prop-types';
-
-export default {
+type StepWrapperPropTypes = {
     /** Title of the Header */
-    title: PropTypes.string,
+    title?: string,
 
     /** Data to display a step counter in the header */
-    stepCounter: PropTypes.shape({
+    stepCounter?: {
         /** Current step */
-        step: PropTypes.number,
+        step: number,
         /** Total number of steps */
-        total: PropTypes.number,
+        total?: number,
         /** Text to display next to the step counter */
-        text: PropTypes.string,
-    }),
+        text?: string,
+    },
 
     /** Method to trigger when pressing back button of the header */
-    onBackButtonPress: PropTypes.func,
+    onBackButtonPress?: () => void,
 
     /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd: PropTypes.func,
+    onEntryTransitionEnd?: () => void,
 
     /** Children components */
-    children: PropTypes.node,
+    children?: React.ReactNode,
 
     /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView: PropTypes.bool,
-};
+    shouldEnableKeyboardAvoidingView?: boolean,
+
+}
+
+export default StepWrapperPropTypes;

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

@@ -1,7 +1,8 @@
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { withOnyx } from 'react-native-onyx';
+import type { Route } from '@src/ROUTES';
+import type { TranslationPaths } from '@src/languages/types';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -18,23 +19,31 @@ 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 ONYXKEYS from '@src/ONYXKEYS';
 
-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();
-    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const { translate } = useLocalize();
+    const { isExtraSmallScreenWidth, isSmallScreenWidth } = useWindowDimensions();
     const [error, setError] = useState('');
 
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
     useEffect(() => {
-        if (account.requiresTwoFactorAuth || account.recoveryCodes) {
+        if (account?.requiresTwoFactorAuth ?? account?.recoveryCodes) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
@@ -62,23 +71,24 @@ function CodesStep({account = defaultAccount, backTo}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
-                        {account.isLoading ? (
+                    <View style={styles.twoFactorAuthCodesBox({ isExtraSmallScreenWidth, isSmallScreenWidth })}>
+                        {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}
                                             >
                                                 {code}
                                             </Text>
-                                        ))}
+                                        )))}
+
                                 </View>
                                 <View style={styles.twoFactorAuthCodesButtonsContainer}>
                                     <PressableWithDelayToggle
@@ -87,43 +97,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 !== 0 && (
                         <FormHelpMessage
                             isError
-                            message={translate(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 +152,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({
-    account: {key: ONYXKEYS.ACCOUNT},
+export default withOnyx<CodesStepProps, TwoFactorAuthStepOnyxProps>({
+    account: { key: ONYXKEYS.ACCOUNT },
 })(CodesStep);

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

@@ -11,7 +11,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 
 function DisabledStep() {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.disableTwoFactorAuth')}>

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

@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
 import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -18,9 +18,9 @@ function EnabledStep() {
     const styles = useThemeStyles();
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.headerTitle')}>

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';
@@ -7,21 +6,20 @@ import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
+import type { Route } from '@src/ROUTES';
 import CONST from '@src/CONST';
 
-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}) {
-    const {setStep} = useTwoFactorAuthContext();
+function SuccessStep({
+    backTo,
+}: SuccessStepProps) {
+    const { setStep } = useTwoFactorAuthContext();
 
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper
@@ -49,7 +47,4 @@ function SuccessStep({backTo}) {
     );
 }
 
-SuccessStep.propTypes = propTypes;
-SuccessStep.defaultProps = defaultProps;
-
 export default SuccessStep;