From 9eb074f27fe0785f99aebe6981c2440a06fb8372 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 2 Jun 2023 13:27:12 -0600 Subject: [PATCH 1/6] update useeffect --- src/components/Form.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 578081ad0678..a730f4a17eff 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -94,6 +94,7 @@ const Form = (props) => { const formContentRef = useRef(null); const inputRefs = useRef({}); const touchedInputs = useRef({}); + const isFirstRender = useRef(true); const {validate, translate, onSubmit, children} = props; @@ -145,8 +146,17 @@ const Form = (props) => { ); useEffect(() => { + // We want to skip Form validation on initial render. + // This also avoids a bug where we immediately clear server errors when the loading indicator unmounts and Form remounts with server errors. + if (isFirstRender.current) { + isFirstRender.current = false; + return; + } + onValidate(inputValues); - }, [onValidate, inputValues]); + + // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to revalidate the form on update if the preferred locale changed on another device so that errors get translated + }, [props.preferredLocale]); const getErrorMessage = useCallback(() => { const latestErrorMessage = ErrorUtils.getLatestErrorMessage(props.formState); From 2b03ffd5e52314f8285753300fce87e02903014e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 2 Jun 2023 13:28:13 -0600 Subject: [PATCH 2/6] update getErrorMessage --- src/components/Form.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index a730f4a17eff..7a9698a75999 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -1,4 +1,4 @@ -import React, {useState, useEffect, useCallback, useRef} from 'react'; +import React, {useState, useEffect, useCallback, useMemo, useRef} from 'react'; import lodashGet from 'lodash/get'; import {Keyboard, ScrollView, StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; @@ -158,7 +158,7 @@ const Form = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to revalidate the form on update if the preferred locale changed on another device so that errors get translated }, [props.preferredLocale]); - const getErrorMessage = useCallback(() => { + const errorMessage = useMemo(() => { const latestErrorMessage = ErrorUtils.getLatestErrorMessage(props.formState); return props.formState.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : ''); }, [props.formState]); @@ -334,9 +334,9 @@ const Form = (props) => { {props.isSubmitButtonVisible && ( 0 || Boolean(getErrorMessage()) || !_.isEmpty(props.formState.errorFields)} + isAlertVisible={_.size(errors) > 0 || Boolean(errorMessage) || !_.isEmpty(props.formState.errorFields)} isLoading={props.formState.isLoading} - message={_.isEmpty(props.formState.errorFields) ? getErrorMessage() : null} + message={_.isEmpty(props.formState.errorFields) ? errorMessage : null} onSubmit={submit} footerContent={props.footerContent} onFixTheErrorsLinkPressed={() => { @@ -372,7 +372,7 @@ const Form = (props) => { errors, formContentRef, formRef, - getErrorMessage, + errorMessage, inputRefs, inputValues, submit, From 9ddf46880fc3d2900d09a138d0407984e4ccdd0c Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 7 Jun 2023 13:38:51 -0600 Subject: [PATCH 3/6] fix typo --- src/components/Form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 7a9698a75999..2b77607745e8 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -160,7 +160,7 @@ const Form = (props) => { const errorMessage = useMemo(() => { const latestErrorMessage = ErrorUtils.getLatestErrorMessage(props.formState); - return props.formState.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : ''); + return props.formState.errors || (typeof latestErrorMessage === 'string' ? latestErrorMessage : ''); }, [props.formState]); /** From 98da014d4747e6c44b1043835bbb117ad0e3ab13 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 7 Jun 2023 15:14:37 -0600 Subject: [PATCH 4/6] rm duplicated formState.errors --- src/components/Form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 2b77607745e8..aabb75b5301f 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -160,7 +160,7 @@ const Form = (props) => { const errorMessage = useMemo(() => { const latestErrorMessage = ErrorUtils.getLatestErrorMessage(props.formState); - return props.formState.errors || (typeof latestErrorMessage === 'string' ? latestErrorMessage : ''); + return typeof latestErrorMessage === 'string' ? latestErrorMessage : ''; }, [props.formState]); /** From 3496d3549e4a44d7b17fb7f81b2a702d601709f4 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 12 Jun 2023 17:32:48 -0600 Subject: [PATCH 5/6] fix checkbox state --- src/components/CheckboxWithLabel.js | 4 ---- src/pages/EnablePayments/TermsStep.js | 2 -- 2 files changed, 6 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index a11af52f6887..a2de3d75427b 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -89,10 +89,6 @@ const CheckboxWithLabel = (props) => { setIsChecked(newState); }; - useEffect(() => { - setIsChecked(props.isChecked); - }, [props.isChecked]); - const LabelComponent = props.LabelComponent; return ( diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 75575c46435c..14594083c424 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -78,7 +78,6 @@ class TermsStep extends React.Component { ( @@ -88,7 +87,6 @@ class TermsStep extends React.Component { )} /> ( From 85e71011a819779b820b82a4fecee1d3c26232a6 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 12 Jun 2023 17:35:15 -0600 Subject: [PATCH 6/6] rm unused import --- src/components/CheckboxWithLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index a2de3d75427b..a9c2e9d286e5 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import React, {useState} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import _ from 'underscore';