migrate to useOnyx

src/pages/ValidateLoginPage/index.tsx

@@ -1,18 +1,19 @@
 import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageProps} from './types';
+import type {ValidateLoginPageProps} from './types';
 
 function ValidateLoginPage({
     route: {
         params: {accountID, validateCode, exitTo},
     },
-    session,
-}: ValidateLoginPageProps<ValidateLoginPageOnyxNativeProps>) {
+}: ValidateLoginPageProps) {
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
     useEffect(() => {
         // Wait till navigation becomes available
         Navigation.isNavigationReady().then(() => {
@@ -46,6 +47,4 @@ function ValidateLoginPage({
 
 ValidateLoginPage.displayName = 'ValidateLoginPage';
 
-export default withOnyx<ValidateLoginPageProps<ValidateLoginPageOnyxNativeProps>, ValidateLoginPageOnyxNativeProps>({
-    session: {key: ONYXKEYS.SESSION},
-})(ValidateLoginPage);
+export default ValidateLoginPage;

src/pages/ValidateLoginPage/index.website.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ExpiredValidateCodeModal from '@components/ValidateCode/ExpiredValidateCodeModal';
 import JustSignedInModal from '@components/ValidateCode/JustSignedInModal';
@@ -9,22 +9,22 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types';
+import type {ValidateLoginPageProps} from './types';
 
 function ValidateLoginPage({
-    account,
-    credentials,
     route: {
         params: {accountID, validateCode, exitTo},
     },
-    session,
-    autoAuthState: autoAuthStateProp,
-}: ValidateLoginPageProps<ValidateLoginPageOnyxProps>) {
+}: ValidateLoginPageProps) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
     const login = credentials?.login;
     const isSignedIn = !!session?.authToken && session?.authTokenType !== CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
     // To ensure that the previous autoAuthState does not impact the rendering of the current magic link page, the autoAuthState prop sets initWithStoredValues to false.
     // This is done unless the user is signed in, in which case the page will be remounted upon successful sign-in, as explained in Session.initAutoAuthState.
-    const autoAuthState = isSignedIn ? session?.autoAuthState : autoAuthStateProp;
+    const [autoAuthState] = useOnyx(ONYXKEYS.SESSION, {initWithStoredValues: isSignedIn, selector: (session) => session?.autoAuthState});
     const autoAuthStateWithDefault = autoAuthState ?? CONST.AUTO_AUTH_STATE.NOT_STARTED;
     const is2FARequired = !!account?.requiresTwoFactorAuth;
     const cachedAccountID = credentials?.accountID;
@@ -91,13 +91,4 @@ function ValidateLoginPage({
 
 ValidateLoginPage.displayName = 'ValidateLoginPage';
 
-export default withOnyx<ValidateLoginPageProps<ValidateLoginPageOnyxProps>, ValidateLoginPageOnyxProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    session: {key: ONYXKEYS.SESSION},
-    autoAuthState: {
-        key: ONYXKEYS.SESSION,
-        selector: (session) => session?.autoAuthState,
-        initWithStoredValues: false,
-    },
-})(ValidateLoginPage);
+export default ValidateLoginPage;

src/pages/ValidateLoginPage/types.ts

@@ -1,26 +1,7 @@
 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';
-import type {AutoAuthState} from '@src/types/onyx/Session';
 
-type ValidateLoginPageOnyxNativeProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<Session>;
-};
+type ValidateLoginPageProps = StackScreenProps<PublicScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
 
-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>;
-
-    /** The auto authentication (magic link) status */
-    autoAuthState: OnyxEntry<AutoAuthState>;
-};
-
-type ValidateLoginPageProps<OnyxProps> = OnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
-
-export type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageOnyxProps, ValidateLoginPageProps};
+export type {ValidateLoginPageProps};