Remove Onyx.connect() for the key: ONYXKEYS.PERSONAL_DETAILS_LIST in /PersonalDetails.ts

package.json

@@ -46,7 +46,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=226 --cache --cache-location=node_modules/.cache/eslint",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=225 --cache --cache-location=node_modules/.cache/eslint",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "lint-watch": "npx eslint-watch --watch --changed",
     "shellcheck": "./scripts/shellCheck.sh",

src/libs/actions/PersonalDetails.ts

@@ -29,12 +29,12 @@
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {DateOfBirthForm} from '@src/types/form';
-import type {PersonalDetails, PersonalDetailsList, PrivatePersonalDetails} from '@src/types/onyx';
+import type {PersonalDetails, PrivatePersonalDetails} from '@src/types/onyx';
 import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
 
 let currentUserEmail = '';
 let currentUserAccountID = -1;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         currentUserEmail = val?.email ?? '';
@@ -42,14 +42,8 @@
     },
 });
 
-let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
-Onyx.connect({
-    key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    callback: (val) => (allPersonalDetails = val),
-});
-
 let privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
 Onyx.connect({
     key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
     callback: (val) => (privatePersonalDetails = val),
 });
@@ -128,7 +122,12 @@
     });
 }
 
-function updateLegalName(legalFirstName: string, legalLastName: string, formatPhoneNumber: LocaleContextProps['formatPhoneNumber']) {
+function updateLegalName(
+    legalFirstName: string,
+    legalLastName: string,
+    formatPhoneNumber: LocaleContextProps['formatPhoneNumber'],
+    currentUserPersonalDetail: Pick<PersonalDetails, 'firstName' | 'lastName'>,
+) {
     const parameters: UpdateLegalNameParams = {legalFirstName, legalLastName};
     const optimisticData: OnyxUpdate[] = [
         {
@@ -141,7 +140,7 @@
         },
     ];
     // In case the user does not have a display name, we will update the display name based on the legal name
-    if (!allPersonalDetails?.[currentUserAccountID]?.firstName && !allPersonalDetails?.[currentUserAccountID]?.lastName) {
+    if (!currentUserPersonalDetail?.firstName && !currentUserPersonalDetail?.lastName) {
         optimisticData.push({
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
@@ -375,7 +374,7 @@
 /**
  * Updates the user's avatar image
  */
-function updateAvatar(file: File | CustomRNImageManipulatorResult) {
+function updateAvatar(file: File | CustomRNImageManipulatorResult, currentUserPersonalDetails: Pick<PersonalDetails, 'avatarThumbnail' | 'avatar'>) {
     if (!currentUserAccountID) {
         return;
     }
@@ -420,8 +419,8 @@
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
             value: {
                 [currentUserAccountID]: {
-                    avatar: allPersonalDetails?.[currentUserAccountID]?.avatar,
-                    avatarThumbnail: allPersonalDetails?.[currentUserAccountID]?.avatarThumbnail ?? allPersonalDetails?.[currentUserAccountID]?.avatar,
+                    avatar: currentUserPersonalDetails?.avatar,
+                    avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail ?? currentUserPersonalDetails?.avatar,
                     pendingFields: {
                         avatar: null,
                     },
@@ -438,7 +437,7 @@
 /**
  * Replaces the user's avatar image with a default avatar
  */
-function deleteAvatar() {
+function deleteAvatar(currentUserPersonalDetails: Pick<PersonalDetails, 'fallbackIcon' | 'avatar'>) {
     if (!currentUserAccountID) {
         return;
     }
@@ -464,8 +463,8 @@
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
             value: {
                 [currentUserAccountID]: {
-                    avatar: allPersonalDetails?.[currentUserAccountID]?.avatar,
-                    fallbackIcon: allPersonalDetails?.[currentUserAccountID]?.fallbackIcon,
+                    avatar: currentUserPersonalDetails?.avatar,
+                    fallbackIcon: currentUserPersonalDetails?.fallbackIcon,
                 },
             },
         },

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

@@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -19,16 +20,21 @@ import {updateLegalName as updateLegalNamePersonalDetails} from '@userActions/Pe
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/LegalNameForm';
-import type {PrivatePersonalDetails} from '@src/types/onyx';
+import type {PersonalDetails, PrivatePersonalDetails} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
-const updateLegalName = (values: PrivatePersonalDetails, formatPhoneNumber: LocaleContextProps['formatPhoneNumber']) => {
-    updateLegalNamePersonalDetails(values.legalFirstName?.trim() ?? '', values.legalLastName?.trim() ?? '', formatPhoneNumber);
+const updateLegalName = (
+    values: PrivatePersonalDetails,
+    formatPhoneNumber: LocaleContextProps['formatPhoneNumber'],
+    currentUserPersonalDetail: Pick<PersonalDetails, 'firstName' | 'lastName'>,
+) => {
+    updateLegalNamePersonalDetails(values.legalFirstName?.trim() ?? '', values.legalLastName?.trim() ?? '', formatPhoneNumber, currentUserPersonalDetail);
 };
 
 function LegalNamePage() {
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true});
     const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
@@ -96,7 +102,7 @@ function LegalNamePage() {
                         style={[styles.flexGrow1, styles.ph5]}
                         formID={ONYXKEYS.FORMS.LEGAL_NAME_FORM}
                         validate={validate}
-                        onSubmit={(values) => updateLegalName(values, formatPhoneNumber)}
+                        onSubmit={(values) => updateLegalName(values, formatPhoneNumber, {firstName: currentUserPersonalDetails.firstName, lastName: currentUserPersonalDetails.lastName})}
                         submitButtonText={translate('common.save')}
                         enabledWhenOffline
                     >

src/pages/settings/Profile/ProfilePage.tsx

@@ -187,8 +187,12 @@ function ProfilePage() {
                                             isUsingDefaultAvatar={isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}
                                             source={avatarURL}
                                             avatarID={accountID}
-                                            onImageSelected={updateAvatar}
-                                            onImageRemoved={deleteAvatar}
+                                            onImageSelected={(file) => {
+                                                updateAvatar(file, {avatar: currentUserPersonalDetails?.avatar, avatarThumbnail: currentUserPersonalDetails?.avatarThumbnail});
+                                            }}
+                                            onImageRemoved={() => {
+                                                deleteAvatar({avatar: currentUserPersonalDetails?.avatar, fallbackIcon: currentUserPersonalDetails?.fallbackIcon});
+                                            }}
                                             size={CONST.AVATAR_SIZE.X_LARGE}
                                             avatarStyle={[styles.avatarXLarge, styles.alignSelfStart]}
                                             pendingAction={currentUserPersonalDetails?.pendingFields?.avatar ?? undefined}