Merge pull request Expensify#33839 from callstack-internal/pac-guerre…

…iro/refactor/migrate-validatelogin-to-typescript

[TS migration] Migrate 'ValidateLogin' page to TypeScript

src/libs/Navigation/Navigation.ts

@@ -184,7 +184,7 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT
     }
 
     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,33 @@
+import React, {useEffect} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageProps} from './types';
+
+function ValidateLoginPage({
+    route: {
+        params: {accountID, validateCode},
+    },
+    session,
+}: ValidateLoginPageProps<ValidateLoginPageOnyxNativeProps>) {
+    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<ValidateLoginPageOnyxNativeProps>, ValidateLoginPageOnyxNativeProps>({
+    session: {key: ONYXKEYS.SESSION},
+})(ValidateLoginPage);

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

@@ -1,5 +1,3 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -10,51 +8,21 @@ import Navigation from '@libs/Navigation/Navigation';
 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 type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types';
 
-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,
-    }),
-
-    /** 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,
-    }),
-
-    /** 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,
-    }),
-};
-
-const defaultProps = {
-    route: validateLinkDefaultProps,
-    session: {
-        authToken: null,
+function ValidateLoginPage({
+    account,
+    credentials,
+    route: {
+        params: {accountID, validateCode},
     },
-    credentials: {},
-    account: {},
-};
-
-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);
+    session,
+}: ValidateLoginPageProps<ValidateLoginPageOnyxProps>) {
+    const login = credentials?.login;
+    const autoAuthState = session?.autoAuthState ?? CONST.AUTO_AUTH_STATE.NOT_STARTED;
+    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)) {
@@ -69,12 +37,12 @@ function ValidateLoginPage(props) {
         }
 
         // The user has initiated the sign in process on the same browser, in another tab.
-        Session.signInWithValidateCode(accountID, validateCode);
+        Session.signInWithValidateCode(Number(accountID), validateCode);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
-        if (login || !cachedAccountID || !is2FARequired) {
+        if (!!login || !cachedAccountID || !is2FARequired) {
             return;
         }
 
@@ -89,7 +57,7 @@ function ValidateLoginPage(props) {
             {autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && <JustSignedInModal is2FARequired={false} />}
             {autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && (
                 <ValidateCodeModal
-                    accountID={accountID}
+                    accountID={Number(accountID)}
                     code={validateCode}
                 />
             )}
@@ -98,11 +66,9 @@ function ValidateLoginPage(props) {
     );
 }
 
-ValidateLoginPage.defaultProps = defaultProps;
 ValidateLoginPage.displayName = 'ValidateLoginPage';
-ValidateLoginPage.propTypes = propTypes;
 
-export default withOnyx({
+export default withOnyx<ValidateLoginPageProps<ValidateLoginPageOnyxProps>, ValidateLoginPageOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     credentials: {key: ONYXKEYS.CREDENTIALS},
     session: {key: ONYXKEYS.SESSION},

src/pages/ValidateLoginPage/types.ts

@@ -0,0 +1,22 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
+import type SCREENS from '@src/SCREENS';
+import type {Account, Credentials, Session} from '@src/types/onyx';
+
+type ValidateLoginPageOnyxNativeProps = {
+    /** Session of currently logged in user */
+    session: OnyxEntry<Session>;
+};
+
+type ValidateLoginPageOnyxProps = ValidateLoginPageOnyxNativeProps & {
+    /** The details about the account that the user is signing in with */
+    account: OnyxEntry<Account>;
+
+    /** The credentials of the person logging in */
+    credentials: OnyxEntry<Credentials>;
+};
+
+type ValidateLoginPageProps<OnyxProps> = OnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
+
+export type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageOnyxProps, ValidateLoginPageProps};