[TS migration] Migrate 'LogInWithShortLivedAuthToken' page to TypeScript

src/libs/Navigation/types.ts

@@ -3,6 +3,7 @@ import {CommonActions, NavigationContainerRefWithCurrent, NavigationHelpers, Nav
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
+import type {Route as Routes} from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
 type NavigationRef = NavigationContainerRefWithCurrent<RootStackParamList>;
@@ -366,8 +367,10 @@ type PublicScreensParamList = {
     [SCREENS.TRANSITION_BETWEEN_APPS]: {
         shouldForceLogin: string;
         email: string;
+        error: string;
         shortLivedAuthToken: string;
-        exitTo: string;
+        shortLivedToken: string;
+        exitTo: Routes;
     };
     [SCREENS.VALIDATE_LOGIN]: {
         accountID: string;

src/pages/LogInWithShortLivedAuthTokenPage.js → src/pages/LogInWithShortLivedAuthTokenPage.tsx

@@ -1,8 +1,7 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -11,74 +10,54 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
+import {PublicScreensParamList} from '@libs/Navigation/types';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+import {Account} from '@src/types/onyx';
 
-const propTypes = {
-    /** The parameters needed to authenticate with a short-lived token are in the URL */
-    route: PropTypes.shape({
-        /** Each parameter passed via the URL */
-        params: PropTypes.shape({
-            /** Short-lived authToken to sign in a user */
-            shortLivedAuthToken: PropTypes.string,
-
-            /** Short-lived authToken to sign in as a user, if they are coming from the old mobile app */
-            shortLivedToken: PropTypes.string,
-
-            /** The email of the transitioning user */
-            email: PropTypes.string,
-        }),
-    }).isRequired,
-
+type LogInWithShortLivedAuthTokenPageOnyxProps = {
     /** The details about the account that the user is signing in with */
-    account: PropTypes.shape({
-        /** Whether a sign is loading */
-        isLoading: PropTypes.bool,
-    }),
+    account: OnyxEntry<Account>;
 };
 
-const defaultProps = {
-    account: {
-        isLoading: false,
-    },
-};
+type LogInWithShortLivedAuthTokenPageProps = LogInWithShortLivedAuthTokenPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
 
-function LogInWithShortLivedAuthTokenPage(props) {
+function LogInWithShortLivedAuthTokenPage({route, account}: LogInWithShortLivedAuthTokenPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {
+        params: {email, shortLivedAuthToken, shortLivedToken, exitTo, error},
+    } = route;
 
     useEffect(() => {
-        const email = lodashGet(props, 'route.params.email', '');
-
         // We have to check for both shortLivedAuthToken and shortLivedToken, as the old mobile app uses shortLivedToken, and is not being actively updated.
-        const shortLivedAuthToken = lodashGet(props, 'route.params.shortLivedAuthToken', '') || lodashGet(props, 'route.params.shortLivedToken', '');
+        const token = shortLivedAuthToken || shortLivedToken;
 
         // Try to authenticate using the shortLivedToken if we're not already trying to load the accounts
-        if (shortLivedAuthToken && !props.account.isLoading) {
-            Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken);
+        if (token && !account?.isLoading) {
+            Session.signInWithShortLivedAuthToken(email, token);
             return;
         }
 
         // If an error is returned as part of the route, ensure we set it in the onyxData for the account
-        const error = lodashGet(props, 'route.params.error', '');
         if (error) {
             Session.setAccountError(error);
         }
 
-        const exitTo = lodashGet(props, 'route.params.exitTo', '');
         if (exitTo) {
             Navigation.isNavigationReady().then(() => {
                 Navigation.navigate(exitTo);
             });
         }
         // The only dependencies of the effect are based on props.route
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.route]);
+    }, [route]);
 
-    if (props.account.isLoading) {
+    if (account?.isLoading) {
         return <FullScreenLoadingIndicator />;
     }
 
@@ -94,7 +73,7 @@ function LogInWithShortLivedAuthTokenPage(props) {
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>
                 <View style={styles.mt2}>
-                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
+                    <Text style={[styles.textAlignCenter]}>
                         {translate('deeplinkWrapper.expired')}{' '}
                         <TextLink
                             onPress={() => {
@@ -119,10 +98,8 @@ function LogInWithShortLivedAuthTokenPage(props) {
     );
 }
 
-LogInWithShortLivedAuthTokenPage.propTypes = propTypes;
-LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
 LogInWithShortLivedAuthTokenPage.displayName = 'LogInWithShortLivedAuthTokenPage';
 
-export default withOnyx({
+export default withOnyx<LogInWithShortLivedAuthTokenPageProps, LogInWithShortLivedAuthTokenPageOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(LogInWithShortLivedAuthTokenPage);