Remove remaining withOnyx HOCs from the project | Batch 6

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<Account>;
-};
+type UnlinkLoginPageProps = PlatformStackScreenProps<PublicScreensParamList, typeof SCREENS.UNLINK_LOGIN>;
 
-type UnlinkLoginPageProps = UnlinkLoginPageOnyxProps & PlatformStackScreenProps<PublicScreensParamList, typeof SCREENS.UNLINK_LOGIN>;
-
-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<UnlinkLoginPageProps, UnlinkLoginPageOnyxProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-})(UnlinkLoginPage);
+export default UnlinkLoginPage;

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<Credentials>;
-};
-
-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 (
         <View style={[styles.changeExpensifyLoginLinkContainer, styles.mt3]}>
@@ -40,8 +34,4 @@ function ChangeExpensifyLoginLink({credentials, onPress}: ChangeExpensifyLoginLi
 
 ChangeExpensifyLoginLink.displayName = 'ChangeExpensifyLoginLink';
 
-export default withOnyx<ChangeExpensifyLoginLinkProps, ChangeExpensifyLoginLinkOnyxProps>({
-    credentials: {
-        key: ONYXKEYS.CREDENTIALS,
-    },
-})(ChangeExpensifyLoginLink);
+export default ChangeExpensifyLoginLink;

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<Credentials>;
-
-    /** The details about the account that the user is signing in with */
-    account: OnyxEntry<Account>;
-};
-
-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) && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />}
-                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
+                {!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={getLatestErrorMessage(account)} />}
+                <ChangeExpensifyLoginLink onPress={() => clearSignInData()} />
             </View>
             <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
                 <Terms />
@@ -94,7 +86,4 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos
 
 ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode';
 
-export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    account: {key: ONYXKEYS.ACCOUNT},
-})(ChooseSSOOrMagicCode);
+export default ChooseSSOOrMagicCode;

src/pages/signin/ThirdPartySignInPage.tsx

@@ -1,28 +1,21 @@
 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';
 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<Account>;
-};
-
-type ThirdPartySignInPageProps = ThirdPartySignInPageOnyxProps & {
+type ThirdPartySignInPageProps = {
     /** Which sign in provider we are using. */
     signInProvider: ValueOf<typeof CONST.SIGN_IN_METHOD>;
 };
@@ -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 (
         <SafeAreaView style={[styles.signInPage]}>
@@ -83,8 +77,4 @@ function ThirdPartySignInPage({account, signInProvider}: ThirdPartySignInPagePro
 
 ThirdPartySignInPage.displayName = 'ThirdPartySignInPage';
 
-export default withOnyx<ThirdPartySignInPageProps, ThirdPartySignInPageOnyxProps>({
-    account: {
-        key: ONYXKEYS.ACCOUNT,
-    },
-})(ThirdPartySignInPage);
+export default ThirdPartySignInPage;