Merge pull request #21281 from allroundexperts/fix-20610

feat: wrap contact method validate function inside a callback
Expensify · Jun 24, 2023 · 820fa93 · 820fa93
2 parents 70bf90d + a455bfd
commit 820fa93
Showing 1 changed file with 46 additions and 39 deletions.
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -54,59 +54,66 @@ const defaultProps = {
     loginList: {},
 };
 
-function NewContactMethodPage(props) {
-    const loginInputRef = useRef(null);
+const getPhoneLogin = (phoneOrEmail) => {
+    if (_.isEmpty(phoneOrEmail)) {
+        return '';
+    }
 
-    const getPhoneLogin = (phoneOrEmail) => {
-        if (_.isEmpty(phoneOrEmail)) {
-            return '';
-        }
+    return LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(phoneOrEmail));
+};
 
-        return LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(phoneOrEmail));
-    };
+const validateNumber = (values) => {
+    const parsedPhoneNumber = parsePhoneNumber(values);
 
-    const validateNumber = (values) => {
-        const parsedPhoneNumber = parsePhoneNumber(values);
+    if (parsedPhoneNumber.possible) {
+        return parsedPhoneNumber.number.e164 + CONST.SMS.DOMAIN;
+    }
 
-        if (parsedPhoneNumber.possible) {
-            return parsedPhoneNumber.number.e164 + CONST.SMS.DOMAIN;
-        }
+    return '';
+};
 
-        return '';
-    };
+const addNewContactMethod = (values) => {
+    const phoneLogin = getPhoneLogin(values.phoneOrEmail);
+    const validateIfnumber = validateNumber(phoneLogin);
+    const submitDetail = (validateIfnumber || values.phoneOrEmail).trim().toLowerCase();
 
-    const validate = (values) => {
-        const phoneLogin = getPhoneLogin(values.phoneOrEmail);
-        const validateIfnumber = validateNumber(phoneLogin);
+    User.addNewContactMethodAndNavigate(submitDetail, values.password);
+};
 
-        const errors = {};
+function NewContactMethodPage(props) {
+    const loginInputRef = useRef(null);
 
-        if (_.isEmpty(values.phoneOrEmail)) {
-            ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.contactMethodRequired');
-        }
+    const validate = React.useCallback(
+        (values) => {
+            const phoneLogin = getPhoneLogin(values.phoneOrEmail);
+            const validateIfnumber = validateNumber(phoneLogin);
 
-        if (!_.isEmpty(values.phoneOrEmail) && !(parsePhoneNumber(phoneLogin).possible || Str.isValidEmail(values.phoneOrEmail))) {
-            ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.invalidContactMethod');
-        }
+            const errors = {};
 
-        if (!_.isEmpty(values.phoneOrEmail) && lodashGet(props.loginList, validateIfnumber || values.phoneOrEmail.toLowerCase())) {
-            ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.enteredMethodIsAlreadySubmited');
-        }
+            if (_.isEmpty(values.phoneOrEmail)) {
+                ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.contactMethodRequired');
+            }
 
-        if (!Permissions.canUsePasswordlessLogins(props.betas) && _.isEmpty(values.password)) {
-            errors.password = 'contacts.genericFailureMessages.passwordRequired';
-        }
+            if (!_.isEmpty(values.phoneOrEmail) && !(parsePhoneNumber(phoneLogin).possible || Str.isValidEmail(values.phoneOrEmail))) {
+                ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.invalidContactMethod');
+            }
 
-        return errors;
-    };
+            if (!_.isEmpty(values.phoneOrEmail) && lodashGet(props.loginList, validateIfnumber || values.phoneOrEmail.toLowerCase())) {
+                ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.enteredMethodIsAlreadySubmited');
+            }
 
-    const addNewContactMethod = (values) => {
-        const phoneLogin = getPhoneLogin(values.phoneOrEmail);
-        const validateIfnumber = validateNumber(phoneLogin);
-        const submitDetail = (validateIfnumber || values.phoneOrEmail).trim().toLowerCase();
+            if (!Permissions.canUsePasswordlessLogins(props.betas) && _.isEmpty(values.password)) {
+                errors.password = 'contacts.genericFailureMessages.passwordRequired';
+            }
 
-        User.addNewContactMethodAndNavigate(submitDetail, values.password);
-    };
+            return errors;
+        },
+        // We don't need `props.loginList` because when submitting this form
+        // the props.loginList gets updated, causing this function to run again.
+        // https://github.com/Expensify/App/issues/20610
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
 
     return (
         <ScreenWrapper