From 9bca777c7d12bc10c9083e0cdfdba1bc379eaf31 Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Wed, 4 Oct 2023 23:23:34 +0700
Subject: [PATCH 1/4] fix empty display name when access deep link

---
 .../withCurrentUserPersonalDetails.js         |  7 ++
 src/pages/settings/Profile/DisplayNamePage.js | 81 ++++++++++---------
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
index 7a47ea7cc712..ae2a0d5af41f 100644
--- a/src/components/withCurrentUserPersonalDetails.js
+++ b/src/components/withCurrentUserPersonalDetails.js
@@ -8,10 +8,12 @@ import refPropTypes from './refPropTypes';
 
 const withCurrentUserPersonalDetailsPropTypes = {
     currentUserPersonalDetails: personalDetailsPropType,
+    isLoading: PropTypes.bool,
 };
 
 const withCurrentUserPersonalDetailsDefaultProps = {
     currentUserPersonalDetails: {},
+    isLoading: true,
 };
 
 export default function (WrappedComponent) {
@@ -25,6 +27,7 @@ export default function (WrappedComponent) {
         session: PropTypes.shape({
             accountID: PropTypes.number,
         }),
+        isLoading: PropTypes.bool,
     };
     const defaultProps = {
         forwardedRef: undefined,
@@ -32,6 +35,7 @@ export default function (WrappedComponent) {
         session: {
             accountID: 0,
         },
+        isLoading: true
     };
 
     function WithCurrentUserPersonalDetails(props) {
@@ -68,6 +72,9 @@ export default function (WrappedComponent) {
         session: {
             key: ONYXKEYS.SESSION,
         },
+        isLoading: {
+           key: ONYXKEYS.IS_LOADING_APP,
+        },
     })(withCurrentUserPersonalDetails);
 }
 
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 386648bb69b9..4fafb9779ebd 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -18,6 +18,7 @@ import ROUTES from '../../../ROUTES';
 import Navigation from '../../../libs/Navigation/Navigation';
 import FormProvider from '../../../components/Form/FormProvider';
 import InputWrapper from '../../../components/Form/InputWrapper';
+import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -75,44 +76,48 @@ function DisplayNamePage(props) {
                 title={props.translate('displayNamePage.headerTitle')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <FormProvider
-                style={[styles.flexGrow1, styles.ph5]}
-                formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
-                validate={validate}
-                onSubmit={updateDisplayName}
-                submitButtonText={props.translate('common.save')}
-                enabledWhenOffline
-                shouldValidateOnBlur
-                shouldValidateOnChange
-            >
-                <Text style={[styles.mb6]}>{props.translate('displayNamePage.isShownOnProfile')}</Text>
-                <View style={styles.mb4}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID="firstName"
-                        name="fname"
-                        label={props.translate('common.firstName')}
-                        accessibilityLabel={props.translate('common.firstName')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
-                        maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
-                        spellCheck={false}
-                    />
-                </View>
-                <View>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID="lastName"
-                        name="lname"
-                        label={props.translate('common.lastName')}
-                        accessibilityLabel={props.translate('common.lastName')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
-                        maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
-                        spellCheck={false}
-                    />
-                </View>
-            </FormProvider>
+            {props.isLoading ? (
+                <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+            ) : (
+                <FormProvider
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
+                    validate={validate}
+                    onSubmit={updateDisplayName}
+                    submitButtonText={props.translate('common.save')}
+                    enabledWhenOffline
+                    shouldValidateOnBlur
+                    shouldValidateOnChange
+                >
+                    <Text style={[styles.mb6]}>{props.translate('displayNamePage.isShownOnProfile')}</Text>
+                    <View style={styles.mb4}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID="firstName"
+                            name="fname"
+                            label={props.translate('common.firstName')}
+                            accessibilityLabel={props.translate('common.firstName')}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                            defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
+                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                            spellCheck={false}
+                        />
+                    </View>
+                    <View>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID="lastName"
+                            name="lname"
+                            label={props.translate('common.lastName')}
+                            accessibilityLabel={props.translate('common.lastName')}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                            defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                            spellCheck={false}
+                        />
+                    </View>
+                </FormProvider>
+            )}
         </ScreenWrapper>
     );
 }

From d92900209ebda9439fb78af15823bd469da15eda Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Thu, 5 Oct 2023 00:02:39 +0700
Subject: [PATCH 2/4] fix prettier

---
 src/components/withCurrentUserPersonalDetails.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
index ae2a0d5af41f..86b2eae04c21 100644
--- a/src/components/withCurrentUserPersonalDetails.js
+++ b/src/components/withCurrentUserPersonalDetails.js
@@ -35,7 +35,7 @@ export default function (WrappedComponent) {
         session: {
             accountID: 0,
         },
-        isLoading: true
+        isLoading: true,
     };
 
     function WithCurrentUserPersonalDetails(props) {
@@ -73,7 +73,7 @@ export default function (WrappedComponent) {
             key: ONYXKEYS.SESSION,
         },
         isLoading: {
-           key: ONYXKEYS.IS_LOADING_APP,
+            key: ONYXKEYS.IS_LOADING_APP,
         },
     })(withCurrentUserPersonalDetails);
 }

From 203b3f3e3c4e9b36091081014ff4abbb55ea712e Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Thu, 5 Oct 2023 01:25:48 +0700
Subject: [PATCH 3/4] update loading scope for specific page

---
 src/components/withCurrentUserPersonalDetails.js |  7 -------
 src/pages/settings/Profile/DisplayNamePage.js    | 14 +++++++++++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
index 86b2eae04c21..7a47ea7cc712 100644
--- a/src/components/withCurrentUserPersonalDetails.js
+++ b/src/components/withCurrentUserPersonalDetails.js
@@ -8,12 +8,10 @@ import refPropTypes from './refPropTypes';
 
 const withCurrentUserPersonalDetailsPropTypes = {
     currentUserPersonalDetails: personalDetailsPropType,
-    isLoading: PropTypes.bool,
 };
 
 const withCurrentUserPersonalDetailsDefaultProps = {
     currentUserPersonalDetails: {},
-    isLoading: true,
 };
 
 export default function (WrappedComponent) {
@@ -27,7 +25,6 @@ export default function (WrappedComponent) {
         session: PropTypes.shape({
             accountID: PropTypes.number,
         }),
-        isLoading: PropTypes.bool,
     };
     const defaultProps = {
         forwardedRef: undefined,
@@ -35,7 +32,6 @@ export default function (WrappedComponent) {
         session: {
             accountID: 0,
         },
-        isLoading: true,
     };
 
     function WithCurrentUserPersonalDetails(props) {
@@ -72,9 +68,6 @@ export default function (WrappedComponent) {
         session: {
             key: ONYXKEYS.SESSION,
         },
-        isLoading: {
-            key: ONYXKEYS.IS_LOADING_APP,
-        },
     })(withCurrentUserPersonalDetails);
 }
 
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 4fafb9779ebd..6c37434e3637 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -1,6 +1,8 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
@@ -23,10 +25,12 @@ import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingInd
 const propTypes = {
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
+    isLoading: PropTypes.bool,
 };
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
+    isLoading: true,
 };
 
 /**
@@ -126,4 +130,12 @@ DisplayNamePage.propTypes = propTypes;
 DisplayNamePage.defaultProps = defaultProps;
 DisplayNamePage.displayName = 'DisplayNamePage';
 
-export default compose(withLocalize, withCurrentUserPersonalDetails)(DisplayNamePage);
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        isLoading: {
+            key: ONYXKEYS.IS_LOADING_APP,
+        },
+    }),
+)(DisplayNamePage);

From 7bd52331ee98428101d81aca4d8ffc59067e95e6 Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Thu, 5 Oct 2023 15:59:49 +0700
Subject: [PATCH 4/4] update isLoadingApp key instead of isLoading

---
 src/pages/settings/Profile/DisplayNamePage.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 6c37434e3637..0fe7fa20ce0a 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -25,12 +25,12 @@ import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingInd
 const propTypes = {
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
-    isLoading: PropTypes.bool,
+    isLoadingApp: PropTypes.bool,
 };
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
-    isLoading: true,
+    isLoadingApp: true,
 };
 
 /**
@@ -80,7 +80,7 @@ function DisplayNamePage(props) {
                 title={props.translate('displayNamePage.headerTitle')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            {props.isLoading ? (
+            {props.isLoadingApp ? (
                 <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
             ) : (
                 <FormProvider
@@ -134,7 +134,7 @@ export default compose(
     withLocalize,
     withCurrentUserPersonalDetails,
     withOnyx({
-        isLoading: {
+        isLoadingApp: {
             key: ONYXKEYS.IS_LOADING_APP,
         },
     }),