Merge pull request #52884 from ChavdaSachin/Onyx-Migration-For-#50796

Onyx Migration For #50796

Author: Julesssss

src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx

@@ -1,7 +1,6 @@
 import {subYears} from 'date-fns';
 import React, {useCallback} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -17,17 +16,10 @@ import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/DateOfBirthForm';
-import type {PrivatePersonalDetails} from '@src/types/onyx';
 
-type DateOfBirthPageOnyxProps = {
-    /** User's private personal details */
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
-    /** Whether app is loading */
-    isLoadingApp: OnyxEntry<boolean>;
-};
-type DateOfBirthPageProps = DateOfBirthPageOnyxProps;
-
-function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBirthPageProps) {
+function DateOfBirthPage() {
+    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -85,11 +77,4 @@ function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBi
 
 DateOfBirthPage.displayName = 'DateOfBirthPage';
 
-export default withOnyx<DateOfBirthPageProps, DateOfBirthPageOnyxProps>({
-    privatePersonalDetails: {
-        key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(DateOfBirthPage);
+export default DateOfBirthPage;

src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

@@ -1,7 +1,6 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -21,20 +20,14 @@ import INPUT_IDS from '@src/types/form/LegalNameForm';
 import type {PrivatePersonalDetails} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
-type LegalNamePageOnyxProps = {
-    /** User's private personal details */
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
-    /** Whether app is loading */
-    isLoadingApp: OnyxEntry<boolean>;
-};
-
-type LegalNamePageProps = LegalNamePageOnyxProps;
-
 const updateLegalName = (values: PrivatePersonalDetails) => {
     PersonalDetails.updateLegalName(values.legalFirstName?.trim() ?? '', values.legalLastName?.trim() ?? '');
 };
 
-function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNamePageProps) {
+function LegalNamePage() {
+    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
+
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const legalFirstName = privatePersonalDetails?.legalFirstName ?? '';
@@ -136,11 +129,4 @@ function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNameP
 
 LegalNamePage.displayName = 'LegalNamePage';
 
-export default withOnyx<LegalNamePageProps, LegalNamePageOnyxProps>({
-    privatePersonalDetails: {
-        key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(LegalNamePage);
+export default LegalNamePage;

src/pages/settings/Security/CloseAccountPage.tsx

@@ -1,9 +1,7 @@
-import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -16,24 +14,16 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import type {SettingsNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/CloseAccountForm';
-import type {Session} from '@src/types/onyx';
 
-type CloseAccountPageOnyxProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<Session>;
-};
+function CloseAccountPage() {
+    const [session] = useOnyx(ONYXKEYS.SESSION);
 
-type CloseAccountPageProps = CloseAccountPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.CLOSE>;
-
-function CloseAccountPage({session}: CloseAccountPageProps) {
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
 
@@ -142,8 +132,4 @@ function CloseAccountPage({session}: CloseAccountPageProps) {
 
 CloseAccountPage.displayName = 'CloseAccountPage';
 
-export default withOnyx<CloseAccountPageProps, CloseAccountPageOnyxProps>({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(CloseAccountPage);
+export default CloseAccountPage;