diff --git a/src/pages/UnlinkLoginPage.tsx b/src/pages/UnlinkLoginPage.tsx index 8ef7c9a19979..b5c726a9634d 100644 --- a/src/pages/UnlinkLoginPage.tsx +++ b/src/pages/UnlinkLoginPage.tsx @@ -1,30 +1,25 @@ import React, {useEffect} from 'react'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import useOnyx from '@hooks/useOnyx'; import usePrevious from '@hooks/usePrevious'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PublicScreensParamList} from '@navigation/types'; -import * as Session from '@userActions/Session'; +import {unlinkLogin} from '@userActions/Session'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {Account} from '@src/types/onyx'; -type UnlinkLoginPageOnyxProps = { - /** The details about the account that the user is signing in with */ - account: OnyxEntry; -}; +type UnlinkLoginPageProps = PlatformStackScreenProps; -type UnlinkLoginPageProps = UnlinkLoginPageOnyxProps & PlatformStackScreenProps; - -function UnlinkLoginPage({route, account}: UnlinkLoginPageProps) { - const accountID = route.params.accountID ?? -1; +function UnlinkLoginPage({route}: UnlinkLoginPageProps) { + const accountID = route.params.accountID ?? CONST.DEFAULT_NUMBER_ID; const validateCode = route.params.validateCode ?? ''; + const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); const prevIsLoading = usePrevious(!!account?.isLoading); useEffect(() => { - Session.unlinkLogin(Number(accountID), validateCode); + unlinkLogin(Number(accountID), validateCode); // We only want this to run on mount // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); @@ -43,6 +38,4 @@ function UnlinkLoginPage({route, account}: UnlinkLoginPageProps) { UnlinkLoginPage.displayName = 'UnlinkLoginPage'; -export default withOnyx({ - account: {key: ONYXKEYS.ACCOUNT}, -})(UnlinkLoginPage); +export default UnlinkLoginPage; diff --git a/src/pages/signin/ChangeExpensifyLoginLink.tsx b/src/pages/signin/ChangeExpensifyLoginLink.tsx index 7f6eb05ff663..536306a6ed3c 100755 --- a/src/pages/signin/ChangeExpensifyLoginLink.tsx +++ b/src/pages/signin/ChangeExpensifyLoginLink.tsx @@ -1,27 +1,21 @@ import React from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Credentials} from '@src/types/onyx'; -type ChangeExpensifyLoginLinkOnyxProps = { - /** The credentials of the person logging in */ - credentials: OnyxEntry; -}; - -type ChangeExpensifyLoginLinkProps = ChangeExpensifyLoginLinkOnyxProps & { +type ChangeExpensifyLoginLinkProps = { onPress: () => void; }; -function ChangeExpensifyLoginLink({credentials, onPress}: ChangeExpensifyLoginLinkProps) { +function ChangeExpensifyLoginLink({onPress}: ChangeExpensifyLoginLinkProps) { const styles = useThemeStyles(); const {translate, formatPhoneNumber} = useLocalize(); + const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS, {canBeMissing: true}); return ( @@ -40,8 +34,4 @@ function ChangeExpensifyLoginLink({credentials, onPress}: ChangeExpensifyLoginLi ChangeExpensifyLoginLink.displayName = 'ChangeExpensifyLoginLink'; -export default withOnyx({ - credentials: { - key: ONYXKEYS.CREDENTIALS, - }, -})(ChangeExpensifyLoginLink); +export default ChangeExpensifyLoginLink; diff --git a/src/pages/signin/ChooseSSOOrMagicCode.tsx b/src/pages/signin/ChooseSSOOrMagicCode.tsx index 2551fe34a21b..0e626390e5e8 100644 --- a/src/pages/signin/ChooseSSOOrMagicCode.tsx +++ b/src/pages/signin/ChooseSSOOrMagicCode.tsx @@ -1,45 +1,37 @@ import React, {useEffect} from 'react'; import {Keyboard, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ErrorUtils from '@libs/ErrorUtils'; +import {getLatestErrorMessage} from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; -import * as Session from '@userActions/Session'; +import {clearSignInData, resendValidateCode} from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Account, Credentials} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink'; import Terms from './Terms'; -type ChooseSSOOrMagicCodeOnyxProps = { - /** The credentials of the logged in person */ - credentials: OnyxEntry; - - /** The details about the account that the user is signing in with */ - account: OnyxEntry; -}; - -type ChooseSSOOrMagicCodeProps = ChooseSSOOrMagicCodeOnyxProps & { +type ChooseSSOOrMagicCodeProps = { /** Function that returns whether the user is using SAML or magic codes to log in */ setIsUsingMagicCode: (value: boolean) => void; }; -function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) { +function ChooseSSOOrMagicCode({setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) { const styles = useThemeStyles(); const {isKeyboardShown} = useKeyboardState(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); + const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS, {canBeMissing: true}); + const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); // This view doesn't have a field for user input, so dismiss the device keyboard if shown useEffect(() => { @@ -78,12 +70,12 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos text={translate('samlSignIn.useMagicCode')} isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)} onPress={() => { - Session.resendValidateCode(credentials?.login); + resendValidateCode(credentials?.login); setIsUsingMagicCode(true); }} /> - {!!account && !isEmptyObject(account.errors) && } - Session.clearSignInData()} /> + {!!account && !isEmptyObject(account.errors) && } + clearSignInData()} /> @@ -94,7 +86,4 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode'; -export default withOnyx({ - credentials: {key: ONYXKEYS.CREDENTIALS}, - account: {key: ONYXKEYS.ACCOUNT}, -})(ChooseSSOOrMagicCode); +export default ChooseSSOOrMagicCode; diff --git a/src/pages/signin/ThirdPartySignInPage.tsx b/src/pages/signin/ThirdPartySignInPage.tsx index fc620cdb6208..e8616a875495 100644 --- a/src/pages/signin/ThirdPartySignInPage.tsx +++ b/src/pages/signin/ThirdPartySignInPage.tsx @@ -1,7 +1,5 @@ import React from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; import {SafeAreaView} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; import AppleSignIn from '@components/SignInButtons/AppleSignIn'; @@ -9,20 +7,15 @@ import GoogleSignIn from '@components/SignInButtons/GoogleSignIn'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Account} from '@src/types/onyx'; import SignInPageLayout from './SignInPageLayout'; -type ThirdPartySignInPageOnyxProps = { - /** State for the account */ - account: OnyxEntry; -}; - -type ThirdPartySignInPageProps = ThirdPartySignInPageOnyxProps & { +type ThirdPartySignInPageProps = { /** Which sign in provider we are using. */ signInProvider: ValueOf; }; @@ -31,12 +24,13 @@ type ThirdPartySignInPageProps = ThirdPartySignInPageOnyxProps & { * sign-in cannot work fully within Electron, so we escape to web and redirect * to desktop once we have an Expensify auth token. */ -function ThirdPartySignInPage({account, signInProvider}: ThirdPartySignInPageProps) { +function ThirdPartySignInPage({signInProvider}: ThirdPartySignInPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const goBack = () => { Navigation.navigate(ROUTES.HOME); }; + const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); return ( @@ -83,8 +77,4 @@ function ThirdPartySignInPage({account, signInProvider}: ThirdPartySignInPagePro ThirdPartySignInPage.displayName = 'ThirdPartySignInPage'; -export default withOnyx({ - account: { - key: ONYXKEYS.ACCOUNT, - }, -})(ThirdPartySignInPage); +export default ThirdPartySignInPage;