From 91beee24cd566f2bb720a9eedc757e2ff6d03cc7 Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Tue, 6 Jun 2023 20:38:27 -0400
Subject: [PATCH 1/3] first pass

---
 src/pages/settings/Profile/DisplayNamePage.js | 102 ++++++++----------
 1 file changed, 47 insertions(+), 55 deletions(-)

diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 2649db5a1805..1fe93717dd82 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -27,13 +27,8 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-class DisplayNamePage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.validate = this.validate.bind(this);
-        this.updateDisplayName = this.updateDisplayName.bind(this);
-    }
+function DisplayNamePage(props) {
+    const currentUserDetails = props.currentUserPersonalDetails || {};
 
     /**
      * Submit form to update user's first and last name (and display name)
@@ -41,80 +36,77 @@ class DisplayNamePage extends Component {
      * @param {String} values.firstName
      * @param {String} values.lastName
      */
-    updateDisplayName(values) {
+    const updateDisplayName = (values) => {
         PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
     }
-
+    
     /**
      * @param {Object} values
      * @param {String} values.firstName
      * @param {String} values.lastName
      * @returns {Object} - An object containing the errors for each inputID
      */
-    validate(values) {
+    const validate = (values) => {
         const errors = {};
 
         // First we validate the first name field
         if (!ValidationUtils.isValidDisplayName(values.firstName)) {
-            ErrorUtils.addErrorMessage(errors, 'firstName', this.props.translate('personalDetails.error.hasInvalidCharacter'));
+            ErrorUtils.addErrorMessage(errors, 'firstName', props.translate('personalDetails.error.hasInvalidCharacter'));
         }
         if (ValidationUtils.doesContainReservedWord(values.firstName, CONST.DISPLAY_NAME.RESERVED_FIRST_NAMES)) {
-            ErrorUtils.addErrorMessage(errors, 'firstName', this.props.translate('personalDetails.error.containsReservedWord'));
+            ErrorUtils.addErrorMessage(errors, 'firstName', props.translate('personalDetails.error.containsReservedWord'));
         }
 
         // Then we validate the last name field
         if (!ValidationUtils.isValidDisplayName(values.lastName)) {
-            errors.lastName = this.props.translate('personalDetails.error.hasInvalidCharacter');
+            errors.lastName = props.translate('personalDetails.error.hasInvalidCharacter');
         }
 
         return errors;
     }
 
-    render() {
-        const currentUserDetails = this.props.currentUserPersonalDetails || {};
-
-        return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithBackButton
-                    title={this.props.translate('displayNamePage.headerTitle')}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
-                />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
-                    validate={this.validate}
-                    onSubmit={this.updateDisplayName}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <Text style={[styles.mb6]}>{this.props.translate('displayNamePage.isShownOnProfile')}</Text>
-                    <View style={styles.mb4}>
-                        <TextInput
-                            inputID="firstName"
-                            name="fname"
-                            label={this.props.translate('common.firstName')}
-                            defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
-                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
-                            autoCapitalize="words"
-                        />
-                    </View>
-                    <View>
-                        <TextInput
-                            inputID="lastName"
-                            name="lname"
-                            label={this.props.translate('common.lastName')}
-                            defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
-                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
-                            autoCapitalize="words"
-                        />
-                    </View>
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <HeaderWithBackButton
+                title={props.translate('displayNamePage.headerTitle')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
+                validate={validate}
+                onSubmit={updateDisplayName}
+                submitButtonText={props.translate('common.save')}
+                enabledWhenOffline
+            >
+                <Text style={[styles.mb6]}>{props.translate('displayNamePage.isShownOnProfile')}</Text>
+                <View style={styles.mb4}>
+                    <TextInput
+                        inputID="firstName"
+                        name="fname"
+                        label={props.translate('common.firstName')}
+                        defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
+                        maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                        autoCapitalize="words"
+                    />
+                </View>
+                <View>
+                    <TextInput
+                        inputID="lastName"
+                        name="lname"
+                        label={props.translate('common.lastName')}
+                        defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+                        maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                        autoCapitalize="words"
+                    />
+                </View>
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 DisplayNamePage.propTypes = propTypes;
 DisplayNamePage.defaultProps = defaultProps;
+DisplayNamePage.displayName = 'DisplayNamePage';
 
 export default compose(withLocalize, withCurrentUserPersonalDetails)(DisplayNamePage);

From 5939a602eb1670a91cda4680b1fd1d946a666cd7 Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Wed, 7 Jun 2023 11:05:05 -0700
Subject: [PATCH 2/3] remove unused Component

---
 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 1fe93717dd82..2c0eb31f3d12 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -1,5 +1,5 @@
 import lodashGet from 'lodash/get';
-import React, {Component} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
@@ -38,8 +38,8 @@ function DisplayNamePage(props) {
      */
     const updateDisplayName = (values) => {
         PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
-    }
-    
+    };
+
     /**
      * @param {Object} values
      * @param {String} values.firstName
@@ -63,7 +63,7 @@ function DisplayNamePage(props) {
         }
 
         return errors;
-    }
+    };
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>

From da8d209519476d52073f6696b7fa3b0763d8cf1f Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Thu, 8 Jun 2023 16:50:51 -0700
Subject: [PATCH 3/3] move updateDisplayName outside of the component itself

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

diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 2c0eb31f3d12..5e676a570e33 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -27,19 +27,19 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
+/**
+ * Submit form to update user's first and last name (and display name)
+ * @param {Object} values
+ * @param {String} values.firstName
+ * @param {String} values.lastName
+ */
+const updateDisplayName = (values) => {
+    PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
+};
+
 function DisplayNamePage(props) {
     const currentUserDetails = props.currentUserPersonalDetails || {};
 
-    /**
-     * Submit form to update user's first and last name (and display name)
-     * @param {Object} values
-     * @param {String} values.firstName
-     * @param {String} values.lastName
-     */
-    const updateDisplayName = (values) => {
-        PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
-    };
-
     /**
      * @param {Object} values
      * @param {String} values.firstName