[TS migration] Migrate 'ValidateLogin' page to TypeScript

src/libs/Navigation/Navigation.ts

@@ -146,7 +146,7 @@ function navigate(route: Route = ROUTES.HOME, type?: string) {
  * @param shouldEnforceFallback - Enforces navigation to fallback route
  * @param shouldPopToTop - Should we navigate to LHN on back press
  */
-function goBack(fallbackRoute: Route, shouldEnforceFallback = false, shouldPopToTop = false) {
+function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopToTop = false) {
     if (!canNavigate('goBack')) {
         return;
     }
@@ -181,7 +181,7 @@ function goBack(fallbackRoute: Route, shouldEnforceFallback = false, shouldPopTo
     }
 
     const isCentralPaneFocused = findFocusedRoute(navigationRef.current.getState())?.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR;
-    const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute);
+    const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute ?? '');
 
     // Allow CentralPane to use UP with fallback route if the path is not found in root navigator.
     if (isCentralPaneFocused && fallbackRoute && distanceFromPathInRootNavigator === -1) {

src/pages/ValidateLoginPage/index.tsx

@@ -0,0 +1,42 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useEffect} from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import Navigation from '@libs/Navigation/Navigation';
+import type {AuthScreensParamList} from '@libs/Navigation/types';
+import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+import type {Session as SessionType} from '@src/types/onyx';
+
+type ValidateLoginPageOnyxProps = {
+    session: OnyxEntry<SessionType>;
+};
+
+type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps<AuthScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
+
+function ValidateLoginPage({
+    route: {
+        params: {accountID = '', validateCode = ''},
+    },
+    session,
+}: ValidateLoginPageProps) {
+    useEffect(() => {
+        if (session?.authToken) {
+            // If already signed in, do not show the validate code if not on web,
+            // because we don't want to block the user with the interstitial page.
+            Navigation.goBack();
+        } else {
+            Session.signInWithValidateCodeAndNavigate(Number(accountID), validateCode);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return <FullScreenLoadingIndicator />;
+}
+
+ValidateLoginPage.displayName = 'ValidateLoginPage';
+
+export default withOnyx<ValidateLoginPageProps, ValidateLoginPageOnyxProps>({
+    session: {key: ONYXKEYS.SESSION},
+})(ValidateLoginPage);

src/pages/ValidateLoginPage/index.website.js → src/pages/ValidateLoginPage/index.website.tsx

@@ -1,60 +1,39 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ExpiredValidateCodeModal from '@components/ValidateCode/ExpiredValidateCodeModal';
 import JustSignedInModal from '@components/ValidateCode/JustSignedInModal';
 import ValidateCodeModal from '@components/ValidateCode/ValidateCodeModal';
 import Navigation from '@libs/Navigation/Navigation';
+import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {defaultProps as validateLinkDefaultProps, propTypes as validateLinkPropTypes} from './validateLinkPropTypes';
+import SCREENS from '@src/SCREENS';
+import type {Account, Credentials, Session as SessionType} from '@src/types/onyx';
 
-const propTypes = {
-    /** The accountID and validateCode are passed via the URL */
-    route: validateLinkPropTypes,
-
-    /** Session of currently logged in user */
-    session: PropTypes.shape({
-        /** Currently logged in user authToken */
-        authToken: PropTypes.string,
-    }),
+type ValidateLoginPageOnyxProps = {
+    /** The details about the account that the user is signing in with */
+    account: OnyxEntry<Account>;
 
     /** The credentials of the person logging in */
-    credentials: PropTypes.shape({
-        /** The email the user logged in with */
-        login: PropTypes.string,
-
-        /** The validate code */
-        validateCode: PropTypes.string,
-    }),
+    credentials: OnyxEntry<Credentials>;
 
-    /** The details about the account that the user is signing in with */
-    account: PropTypes.shape({
-        /** Whether a sign on form is loading (being submitted) */
-        isLoading: PropTypes.bool,
-    }),
+    /** Session of currently logged in user */
+    session: OnyxEntry<SessionType>;
 };
 
-const defaultProps = {
-    route: validateLinkDefaultProps,
-    session: {
-        authToken: null,
-    },
-    credentials: {},
-    account: {},
-};
+type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps<AuthScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
 
-function ValidateLoginPage(props) {
-    const login = lodashGet(props, 'credentials.login', null);
-    const autoAuthState = lodashGet(props, 'session.autoAuthState', CONST.AUTO_AUTH_STATE.NOT_STARTED);
-    const accountID = lodashGet(props.route.params, 'accountID', '');
-    const validateCode = lodashGet(props.route.params, 'validateCode', '');
-    const isSignedIn = Boolean(lodashGet(props, 'session.authToken', null));
-    const is2FARequired = lodashGet(props, 'account.requiresTwoFactorAuth', false);
-    const cachedAccountID = lodashGet(props, 'credentials.accountID', null);
+function ValidateLoginPage({account, credentials, route, session}: ValidateLoginPageProps) {
+    const login = credentials?.login;
+    const autoAuthState = session?.autoAuthState ?? CONST.AUTO_AUTH_STATE.NOT_STARTED;
+    const accountID = Number(route?.params.accountID) ?? -1;
+    const validateCode = route.params.validateCode ?? '';
+    const isSignedIn = !!session?.authToken;
+    const is2FARequired = !!account?.requiresTwoFactorAuth;
+    const cachedAccountID = credentials?.accountID;
 
     useEffect(() => {
         if (!login && isSignedIn && (autoAuthState === CONST.AUTO_AUTH_STATE.SIGNING_IN || autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN)) {
@@ -74,7 +53,7 @@ function ValidateLoginPage(props) {
     }, []);
 
     useEffect(() => {
-        if (login || !cachedAccountID || !is2FARequired) {
+        if (!!login || !cachedAccountID || !is2FARequired) {
             return;
         }
 
@@ -98,11 +77,9 @@ function ValidateLoginPage(props) {
     );
 }
 
-ValidateLoginPage.defaultProps = defaultProps;
 ValidateLoginPage.displayName = 'ValidateLoginPage';
-ValidateLoginPage.propTypes = propTypes;
 
-export default withOnyx({
+export default withOnyx<ValidateLoginPageProps, ValidateLoginPageOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     credentials: {key: ONYXKEYS.CREDENTIALS},
     session: {key: ONYXKEYS.SESSION},