diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 91285821fe9f..83890848b8f7 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/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) { diff --git a/src/pages/ValidateLoginPage/index.js b/src/pages/ValidateLoginPage/index.js deleted file mode 100644 index 6939ee07f665..000000000000 --- a/src/pages/ValidateLoginPage/index.js +++ /dev/null @@ -1,61 +0,0 @@ -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'; -import Navigation from '@libs/Navigation/Navigation'; -import * as Session from '@userActions/Session'; -import ONYXKEYS from '@src/ONYXKEYS'; -import {defaultProps as validateLinkDefaultProps, propTypes as validateLinkPropTypes} from './validateLinkPropTypes'; - -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, - }), -}; - -const defaultProps = { - route: validateLinkDefaultProps, - session: { - authToken: null, - }, - credentials: {}, -}; - -function ValidateLoginPage(props) { - useEffect(() => { - const accountID = lodashGet(props.route.params, 'accountID', ''); - const validateCode = lodashGet(props.route.params, 'validateCode', ''); - - if (lodashGet(props, '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(false); - } else { - Session.signInWithValidateCodeAndNavigate(accountID, validateCode); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ; -} - -ValidateLoginPage.defaultProps = defaultProps; -ValidateLoginPage.displayName = 'ValidateLoginPage'; -ValidateLoginPage.propTypes = propTypes; - -export default withOnyx({ - credentials: {key: ONYXKEYS.CREDENTIALS}, - session: {key: ONYXKEYS.SESSION}, -})(ValidateLoginPage); diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx new file mode 100644 index 000000000000..7e79216a129d --- /dev/null +++ b/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) { + 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 ; +} + +ValidateLoginPage.displayName = 'ValidateLoginPage'; + +export default withOnyx, ValidateLoginPageOnyxNativeProps>({ + session: {key: ONYXKEYS.SESSION}, +})(ValidateLoginPage); diff --git a/src/pages/ValidateLoginPage/index.website.js b/src/pages/ValidateLoginPage/index.website.tsx similarity index 53% rename from src/pages/ValidateLoginPage/index.website.js rename to src/pages/ValidateLoginPage/index.website.tsx index 677abd70f6db..08f0a64d1a0d 100644 --- a/src/pages/ValidateLoginPage/index.website.js +++ b/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) { + 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 && } {autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && ( )} @@ -98,11 +66,9 @@ function ValidateLoginPage(props) { ); } -ValidateLoginPage.defaultProps = defaultProps; ValidateLoginPage.displayName = 'ValidateLoginPage'; -ValidateLoginPage.propTypes = propTypes; -export default withOnyx({ +export default withOnyx, ValidateLoginPageOnyxProps>({ account: {key: ONYXKEYS.ACCOUNT}, credentials: {key: ONYXKEYS.CREDENTIALS}, session: {key: ONYXKEYS.SESSION}, diff --git a/src/pages/ValidateLoginPage/types.ts b/src/pages/ValidateLoginPage/types.ts new file mode 100644 index 000000000000..d9d2873891cd --- /dev/null +++ b/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; +}; + +type ValidateLoginPageOnyxProps = ValidateLoginPageOnyxNativeProps & { + /** The details about the account that the user is signing in with */ + account: OnyxEntry; + + /** The credentials of the person logging in */ + credentials: OnyxEntry; +}; + +type ValidateLoginPageProps = OnyxProps & StackScreenProps; + +export type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageOnyxProps, ValidateLoginPageProps};