From e5cd46fbe7bcd26fcdc365d86482ad961b9ed4ba Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Tue, 2 Jan 2024 14:15:20 +0000 Subject: [PATCH 1/5] refactor(typescript): migrate validateloginpage --- src/libs/Navigation/Navigation.ts | 26 +++---- src/pages/ValidateLoginPage/index.js | 61 ----------------- src/pages/ValidateLoginPage/index.tsx | 42 ++++++++++++ .../{index.website.js => index.website.tsx} | 68 ++++++------------- 4 files changed, 75 insertions(+), 122 deletions(-) delete mode 100644 src/pages/ValidateLoginPage/index.js create mode 100644 src/pages/ValidateLoginPage/index.tsx rename src/pages/ValidateLoginPage/{index.website.js => index.website.tsx} (55%) diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 3552ff9e7410..2c250b6b89b2 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -1,18 +1,18 @@ -import {findFocusedRoute, getActionFromState} from '@react-navigation/core'; -import {CommonActions, EventArg, getPathFromState, NavigationContainerEventMap, NavigationState, PartialState, StackActions} from '@react-navigation/native'; +import { findFocusedRoute, getActionFromState } from '@react-navigation/core'; +import { CommonActions, EventArg, getPathFromState, NavigationContainerEventMap, NavigationState, PartialState, StackActions } from '@react-navigation/native'; import findLastIndex from 'lodash/findLastIndex'; import Log from '@libs/Log'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; -import ROUTES, {Route} from '@src/ROUTES'; -import SCREENS, {PROTECTED_SCREENS} from '@src/SCREENS'; +import ROUTES, { Route } from '@src/ROUTES'; +import SCREENS, { PROTECTED_SCREENS } from '@src/SCREENS'; import getStateFromPath from './getStateFromPath'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; import linkTo from './linkTo'; import navigationRef from './navigationRef'; -import {StackNavigationAction, StateOrRoute} from './types'; +import { StackNavigationAction, StateOrRoute } from './types'; let resolveNavigationIsReadyPromise: () => void; const navigationIsReadyPromise = new Promise((resolve) => { @@ -82,7 +82,7 @@ function getDistanceFromPathInRootNavigator(path: string): number { return index; } - currentState = {...currentState, routes: currentState.routes.slice(0, -1), index: currentState.index - 1}; + currentState = { ...currentState, routes: currentState.routes.slice(0, -1), index: currentState.index - 1 }; } return -1; @@ -123,7 +123,7 @@ function isActiveRoute(routePath: Route): boolean { * @param [type] - Type of action to perform. Currently UP is supported. */ function navigate(route: Route = ROUTES.HOME, type?: string) { - if (!canNavigate('navigate', {route})) { + if (!canNavigate('navigate', { route })) { // Store intended route if the navigator is not yet available, // we will try again after the NavigationContainer is ready Log.hmmm(`[Navigation] Container not yet ready, storing route as pending: ${route}`); @@ -138,7 +138,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; } @@ -173,7 +173,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) { @@ -228,9 +228,9 @@ function dismissModal(targetReportID?: string) { } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { const lastRouteIndex = rootState.routes.length - 1; const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); - navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); + navigationRef.current?.dispatch({ ...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key }); } else { - navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key}); + navigationRef.current?.dispatch({ ...StackActions.pop(), target: rootState.key }); } break; default: { @@ -315,7 +315,7 @@ function waitForProtectedRoutes() { return; } - const unsubscribe = navigationRef.current?.addListener('state', ({data}) => { + const unsubscribe = navigationRef.current?.addListener('state', ({ data }) => { const state = data?.state; if (navContainsProtectedRoutes(state)) { unsubscribe?.(); @@ -343,4 +343,4 @@ export default { waitForProtectedRoutes, }; -export {navigationRef}; +export { navigationRef }; 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..597a025cf602 --- /dev/null +++ b/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; +}; + +type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; + +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({ + session: {key: ONYXKEYS.SESSION}, +})(ValidateLoginPage); diff --git a/src/pages/ValidateLoginPage/index.website.js b/src/pages/ValidateLoginPage/index.website.tsx similarity index 55% rename from src/pages/ValidateLoginPage/index.website.js rename to src/pages/ValidateLoginPage/index.website.tsx index 677abd70f6db..1a68405934bc 100644 --- a/src/pages/ValidateLoginPage/index.website.js +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -1,60 +1,34 @@ -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, - }), - - /** 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, - }), +type ValidateLoginPageOnyxProps = { + account: OnyxEntry; + credentials: OnyxEntry; + session: OnyxEntry; }; -const defaultProps = { - route: validateLinkDefaultProps, - session: { - authToken: null, - }, - credentials: {}, - account: {}, -}; +type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; -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 ?? ''); + 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 +48,7 @@ function ValidateLoginPage(props) { }, []); useEffect(() => { - if (login || !cachedAccountID || !is2FARequired) { + if (!!login || !cachedAccountID || !is2FARequired) { return; } @@ -98,11 +72,9 @@ function ValidateLoginPage(props) { ); } -ValidateLoginPage.defaultProps = defaultProps; ValidateLoginPage.displayName = 'ValidateLoginPage'; -ValidateLoginPage.propTypes = propTypes; -export default withOnyx({ +export default withOnyx({ account: {key: ONYXKEYS.ACCOUNT}, credentials: {key: ONYXKEYS.CREDENTIALS}, session: {key: ONYXKEYS.SESSION}, From 14f8bb545566726b8ad19efe5a5acf037a75eddc Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 3 Jan 2024 16:00:18 +0000 Subject: [PATCH 2/5] chore: apply pull request feedback --- src/libs/Navigation/Navigation.ts | 22 +++++++++---------- src/pages/ValidateLoginPage/index.website.tsx | 7 +++++- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 2c250b6b89b2..23277fe30636 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -1,18 +1,18 @@ -import { findFocusedRoute, getActionFromState } from '@react-navigation/core'; -import { CommonActions, EventArg, getPathFromState, NavigationContainerEventMap, NavigationState, PartialState, StackActions } from '@react-navigation/native'; +import {findFocusedRoute, getActionFromState} from '@react-navigation/core'; +import {CommonActions, EventArg, getPathFromState, NavigationContainerEventMap, NavigationState, PartialState, StackActions} from '@react-navigation/native'; import findLastIndex from 'lodash/findLastIndex'; import Log from '@libs/Log'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; -import ROUTES, { Route } from '@src/ROUTES'; -import SCREENS, { PROTECTED_SCREENS } from '@src/SCREENS'; +import ROUTES, {Route} from '@src/ROUTES'; +import SCREENS, {PROTECTED_SCREENS} from '@src/SCREENS'; import getStateFromPath from './getStateFromPath'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; import linkTo from './linkTo'; import navigationRef from './navigationRef'; -import { StackNavigationAction, StateOrRoute } from './types'; +import {StackNavigationAction, StateOrRoute} from './types'; let resolveNavigationIsReadyPromise: () => void; const navigationIsReadyPromise = new Promise((resolve) => { @@ -82,7 +82,7 @@ function getDistanceFromPathInRootNavigator(path: string): number { return index; } - currentState = { ...currentState, routes: currentState.routes.slice(0, -1), index: currentState.index - 1 }; + currentState = {...currentState, routes: currentState.routes.slice(0, -1), index: currentState.index - 1}; } return -1; @@ -123,7 +123,7 @@ function isActiveRoute(routePath: Route): boolean { * @param [type] - Type of action to perform. Currently UP is supported. */ function navigate(route: Route = ROUTES.HOME, type?: string) { - if (!canNavigate('navigate', { route })) { + if (!canNavigate('navigate', {route})) { // Store intended route if the navigator is not yet available, // we will try again after the NavigationContainer is ready Log.hmmm(`[Navigation] Container not yet ready, storing route as pending: ${route}`); @@ -228,9 +228,9 @@ function dismissModal(targetReportID?: string) { } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { const lastRouteIndex = rootState.routes.length - 1; const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); - navigationRef.current?.dispatch({ ...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key }); + navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); } else { - navigationRef.current?.dispatch({ ...StackActions.pop(), target: rootState.key }); + navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key}); } break; default: { @@ -315,7 +315,7 @@ function waitForProtectedRoutes() { return; } - const unsubscribe = navigationRef.current?.addListener('state', ({ data }) => { + const unsubscribe = navigationRef.current?.addListener('state', ({data}) => { const state = data?.state; if (navContainsProtectedRoutes(state)) { unsubscribe?.(); @@ -343,4 +343,4 @@ export default { waitForProtectedRoutes, }; -export { navigationRef }; +export {navigationRef}; diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx index 1a68405934bc..12e680172198 100644 --- a/src/pages/ValidateLoginPage/index.website.tsx +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -14,8 +14,13 @@ import SCREENS from '@src/SCREENS'; import type {Account, Credentials, Session as SessionType} from '@src/types/onyx'; type ValidateLoginPageOnyxProps = { + /** The details about the account that the user is signing in with */ account: OnyxEntry; + + /** The credentials of the person logging in */ credentials: OnyxEntry; + + /** Session of currently logged in user */ session: OnyxEntry; }; @@ -24,7 +29,7 @@ type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps Date: Tue, 9 Jan 2024 19:57:28 +0000 Subject: [PATCH 3/5] refactor(typescript): extract types to avoid repetition --- src/pages/ValidateLoginPage/index.tsx | 15 +++----------- src/pages/ValidateLoginPage/index.website.tsx | 20 ++----------------- src/pages/ValidateLoginPage/types.ts | 20 +++++++++++++++++++ 3 files changed, 25 insertions(+), 30 deletions(-) create mode 100644 src/pages/ValidateLoginPage/types.ts diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx index 597a025cf602..c228e86a7928 100644 --- a/src/pages/ValidateLoginPage/index.tsx +++ b/src/pages/ValidateLoginPage/index.tsx @@ -1,19 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import {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; -}; - -type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; +import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types'; function ValidateLoginPage({ route: { @@ -37,6 +28,6 @@ function ValidateLoginPage({ ValidateLoginPage.displayName = 'ValidateLoginPage'; -export default withOnyx({ +export default withOnyx>({ session: {key: ONYXKEYS.SESSION}, })(ValidateLoginPage); diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx index 12e680172198..699da83bae2d 100644 --- a/src/pages/ValidateLoginPage/index.website.tsx +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -1,30 +1,14 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import {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 SCREENS from '@src/SCREENS'; -import type {Account, Credentials, Session as SessionType} from '@src/types/onyx'; - -type ValidateLoginPageOnyxProps = { - /** The details about the account that the user is signing in with */ - account: OnyxEntry; - - /** The credentials of the person logging in */ - credentials: OnyxEntry; - - /** Session of currently logged in user */ - session: OnyxEntry; -}; - -type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; +import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types'; function ValidateLoginPage({account, credentials, route, session}: ValidateLoginPageProps) { const login = credentials?.login; diff --git a/src/pages/ValidateLoginPage/types.ts b/src/pages/ValidateLoginPage/types.ts new file mode 100644 index 000000000000..3173c73796b6 --- /dev/null +++ b/src/pages/ValidateLoginPage/types.ts @@ -0,0 +1,20 @@ +import type {StackScreenProps} from '@react-navigation/stack'; +import type {OnyxEntry} from 'react-native-onyx'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; +import type SCREENS from '@src/SCREENS'; +import type {Account, Credentials, Session} from '@src/types/onyx'; + +type ValidateLoginPageOnyxProps = { + /** The details about the account that the user is signing in with */ + account: OnyxEntry; + + /** The credentials of the person logging in */ + credentials: OnyxEntry; + + /** Session of currently logged in user */ + session: OnyxEntry; +}; + +type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; + +export type {ValidateLoginPageOnyxProps, ValidateLoginPageProps}; From 51a21e516fcec45117b015c598e26026b9a9c6b5 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 11 Jan 2024 18:08:00 +0000 Subject: [PATCH 4/5] chore(typescript): fix wrong prop types --- src/pages/ValidateLoginPage/index.tsx | 6 +++--- src/pages/ValidateLoginPage/index.website.tsx | 4 ++-- src/pages/ValidateLoginPage/types.ts | 16 +++++++++------- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx index c228e86a7928..1af5000ed801 100644 --- a/src/pages/ValidateLoginPage/index.tsx +++ b/src/pages/ValidateLoginPage/index.tsx @@ -4,14 +4,14 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Navigation from '@libs/Navigation/Navigation'; import * as Session from '@userActions/Session'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types'; +import type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageProps} from './types'; function ValidateLoginPage({ route: { params: {accountID = '', validateCode = ''}, }, session, -}: ValidateLoginPageProps) { +}: ValidateLoginPageProps) { useEffect(() => { if (session?.authToken) { // If already signed in, do not show the validate code if not on web, @@ -28,6 +28,6 @@ function ValidateLoginPage({ ValidateLoginPage.displayName = 'ValidateLoginPage'; -export default withOnyx>({ +export default withOnyx, ValidateLoginPageOnyxNativeProps>({ session: {key: ONYXKEYS.SESSION}, })(ValidateLoginPage); diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx index 699da83bae2d..3fe994e20644 100644 --- a/src/pages/ValidateLoginPage/index.website.tsx +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -10,7 +10,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types'; -function ValidateLoginPage({account, credentials, route, session}: ValidateLoginPageProps) { +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; @@ -63,7 +63,7 @@ function ValidateLoginPage({account, credentials, route, session}: ValidateLogin ValidateLoginPage.displayName = 'ValidateLoginPage'; -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 index 3173c73796b6..d9d2873891cd 100644 --- a/src/pages/ValidateLoginPage/types.ts +++ b/src/pages/ValidateLoginPage/types.ts @@ -1,20 +1,22 @@ import type {StackScreenProps} from '@react-navigation/stack'; import type {OnyxEntry} from 'react-native-onyx'; -import type {AuthScreensParamList} from '@libs/Navigation/types'; +import type {PublicScreensParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; import type {Account, Credentials, Session} from '@src/types/onyx'; -type ValidateLoginPageOnyxProps = { +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; - - /** Session of currently logged in user */ - session: OnyxEntry; }; -type ValidateLoginPageProps = ValidateLoginPageOnyxProps & StackScreenProps; +type ValidateLoginPageProps = OnyxProps & StackScreenProps; -export type {ValidateLoginPageOnyxProps, ValidateLoginPageProps}; +export type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageOnyxProps, ValidateLoginPageProps}; From 2d65ac513755b23727e8c1f88c8e77505c4992ef Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 17 Jan 2024 10:53:42 +0000 Subject: [PATCH 5/5] refactor(typescript): apply pull request feedback --- src/pages/ValidateLoginPage/index.tsx | 2 +- src/pages/ValidateLoginPage/index.website.tsx | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx index 1af5000ed801..7e79216a129d 100644 --- a/src/pages/ValidateLoginPage/index.tsx +++ b/src/pages/ValidateLoginPage/index.tsx @@ -8,7 +8,7 @@ import type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageProps} from './t function ValidateLoginPage({ route: { - params: {accountID = '', validateCode = ''}, + params: {accountID, validateCode}, }, session, }: ValidateLoginPageProps) { diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx index 3fe994e20644..08f0a64d1a0d 100644 --- a/src/pages/ValidateLoginPage/index.website.tsx +++ b/src/pages/ValidateLoginPage/index.website.tsx @@ -10,11 +10,16 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types'; -function ValidateLoginPage({account, credentials, route, session}: ValidateLoginPageProps) { +function ValidateLoginPage({ + account, + credentials, + route: { + params: {accountID, validateCode}, + }, + 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; @@ -32,7 +37,7 @@ function ValidateLoginPage({account, credentials, route, session}: ValidateLogin } // 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 }, []); @@ -52,7 +57,7 @@ function ValidateLoginPage({account, credentials, route, session}: ValidateLogin {autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && } {autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && ( )}