Merge pull request Expensify#20334 from Expensify/dangrous-refactordi…

…splaynamepage Migrate DisplayNamePage.js to function
ojasjadhav2 · Jun 12, 2023 · 88a411d · 88a411d
2 parents 736c5d4 + da8d209
commit 88a411d
Showing 1 changed file with 56 additions and 64 deletions.
diff --git 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';
@@ -27,94 +27,86 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-class DisplayNamePage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.validate = this.validate.bind(this);
-        this.updateDisplayName = this.updateDisplayName.bind(this);
-    }
+/**
+ * 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());
+};
 
-    /**
-     * Submit form to update user's first and last name (and display name)
-     * @param {Object} values
-     * @param {String} values.firstName
-     * @param {String} values.lastName
-     */
-    updateDisplayName(values) {
-        PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
-    }
+function DisplayNamePage(props) {
+    const currentUserDetails = props.currentUserPersonalDetails || {};
 
     /**
      * @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);