From 74f39af7ea041e68d3009fc403827d40275f4a43 Mon Sep 17 00:00:00 2001
From: Vivek Kumar <vivek@expensify.com>
Date: Thu, 27 Apr 2023 20:26:02 +0530
Subject: [PATCH 1/2] refactored the component to functional

---
 src/pages/settings/NewPasswordForm.js | 100 ++++++++++++--------------
 1 file changed, 44 insertions(+), 56 deletions(-)

diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index 845af7219abe..229ca0505504 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Text from '../../components/Text';
@@ -23,74 +23,62 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-class NewPasswordForm extends React.Component {
-    constructor(props) {
-        super(props);
+const NewPasswordForm = (props) => {
+    const [passwordHintError, setPasswordHintError] = useState(false);
 
-        this.state = {
-            passwordHintError: false,
-        };
-    }
+    const isValidPassword = () => {
+        props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
+    };
 
-    componentDidUpdate(prevProps) {
-        const passwordChanged = (this.props.password !== prevProps.password);
-        if (passwordChanged) {
-            this.props.updateIsFormValid(this.isValidForm());
-        }
-    }
-
-    onBlurNewPassword() {
-        if (this.state.passwordHintError) {
+    const onBlurNewPassword = () => {
+        if (passwordHintError) {
             return;
         }
-        if (this.props.password && !this.isValidPassword()) {
-            this.setState({passwordHintError: true});
+        if (props.password && !isValidPassword()) {
+            setPasswordHintError(true);
         }
-    }
-
-    isValidPassword() {
-        return this.props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
-    }
+    };
 
     /**
      * checks if the password invalid
      * @returns {Boolean}
     */
-    isInvalidPassword() {
-        return this.state.passwordHintError && this.props.password && !this.isValidPassword();
-    }
+    const isInvalidPassword = () => passwordHintError && props.password && !isValidPassword();
 
-    isValidForm() {
-        return this.isValidPassword();
-    }
+    const isValidForm = () => {
+        isValidPassword();
+    };
 
-    render() {
-        return (
-            <View style={styles.mb6}>
-                <TextInput
-                    autoFocus
-                    label={`${this.props.translate('setPasswordPage.enterPassword')}`}
-                    secureTextEntry
-                    autoComplete={ComponentUtils.NEW_PASSWORD_AUTOCOMPLETE_TYPE}
-                    textContentType="newPassword"
-                    value={this.props.password}
-                    onChangeText={password => this.props.updatePassword(password)}
-                    onBlur={() => this.onBlurNewPassword()}
-                />
-                <Text
-                    style={[
-                        styles.formHelp,
-                        styles.mt1,
-                        this.isInvalidPassword() && styles.formError,
-                    ]}
-                >
-                    {this.props.translate('setPasswordPage.newPasswordPrompt')}
-                </Text>
-            </View>
-        );
-    }
-}
+    useEffect(() => {
+        props.updateIsFormValid(isValidForm());
+    }, [props.password]);
+
+    return (
+        <View style={styles.mb6}>
+            <TextInput
+                autoFocus
+                label={`${props.translate('setPasswordPage.enterPassword')}`}
+                secureTextEntry
+                autoComplete={ComponentUtils.NEW_PASSWORD_AUTOCOMPLETE_TYPE}
+                textContentType="newPassword"
+                value={props.password}
+                onChangeText={password => props.updatePassword(password)}
+                onBlur={onBlurNewPassword}
+            />
+            <Text
+                style={[
+                    styles.formHelp,
+                    styles.mt1,
+                    isInvalidPassword() && styles.formError,
+                ]}
+            >
+                {props.translate('setPasswordPage.newPasswordPrompt')}
+            </Text>
+        </View>
+    );
+};
 
 NewPasswordForm.propTypes = propTypes;
+NewPasswordForm.displayName = 'NewPasswordForm';
 
 export default withLocalize(NewPasswordForm);

From cbbda3d312e0538217f5d7074d54fcc0cdcde8b1 Mon Sep 17 00:00:00 2001
From: Vivek Kumar <vivek@expensify.com>
Date: Thu, 4 May 2023 18:18:45 +0530
Subject: [PATCH 2/2] tested and updated

---
 src/pages/settings/NewPasswordForm.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index 229ca0505504..a4db398da99a 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -26,9 +26,7 @@ const propTypes = {
 const NewPasswordForm = (props) => {
     const [passwordHintError, setPasswordHintError] = useState(false);
 
-    const isValidPassword = () => {
-        props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
-    };
+    const isValidPassword = () => props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
 
     const onBlurNewPassword = () => {
         if (passwordHintError) {
@@ -45,12 +43,9 @@ const NewPasswordForm = (props) => {
     */
     const isInvalidPassword = () => passwordHintError && props.password && !isValidPassword();
 
-    const isValidForm = () => {
-        isValidPassword();
-    };
-
     useEffect(() => {
-        props.updateIsFormValid(isValidForm());
+        props.updateIsFormValid(isValidPassword());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.password]);
 
     return (