From 31140ba20f24fbbf66f13c1d4b7b9dd9c6ad2d1b Mon Sep 17 00:00:00 2001 From: cretadn22 Date: Fri, 27 Sep 2024 08:53:59 +0700 Subject: [PATCH 1/3] reset error on going back --- src/components/Form/FormProvider.tsx | 8 ++++++++ src/components/Form/types.ts | 1 + .../NetSuiteImportAddCustomListPage.tsx | 5 ++++- .../NetSuiteImportAddCustomSegmentPage.tsx | 5 ++++- 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index db52c45751b7..1e4fbf81a738 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -251,8 +251,16 @@ function FormProvider( }, [inputValues], ); + + const resetError = useCallback(() => { + FormActions.clearErrors(formID); + FormActions.clearErrorFields(formID); + setErrors({}); + }, [formID]); + useImperativeHandle(forwardedRef, () => ({ resetForm, + resetError, })); const registerInput = useCallback( diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index 45899065e1ba..b8e8c49fa336 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -157,6 +157,7 @@ type FormProps = { type FormRef = { resetForm: (optionalValue: FormOnyxValues) => void; + resetError: () => void; }; type InputRefs = Record>; diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx index 6934edab7b2c..e5f9ae43e29a 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx @@ -3,7 +3,7 @@ import type {ForwardedRef} from 'react'; import {InteractionManager, View} from 'react-native'; import ConnectionLayout from '@components/ConnectionLayout'; import FormProvider from '@components/Form/FormProvider'; -import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader'; import useLocalize from '@hooks/useLocalize'; @@ -31,6 +31,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const ref: ForwardedRef = useRef(null); + const formRef = useRef(null); const config = policy?.connections?.netsuite?.options?.config; const customLists = useMemo(() => config?.syncOptions?.customLists ?? [], [config?.syncOptions]); @@ -67,6 +68,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) { return; } ref.current?.movePrevious(); + formRef.current?.resetError(); prevScreen(); }; @@ -153,6 +155,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) { = useRef(null); + const formRef = useRef(null); const config = policy?.connections?.netsuite?.options?.config; const customSegments = useMemo(() => config?.syncOptions?.customSegments ?? [], [config?.syncOptions]); @@ -67,6 +68,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps return; } ref.current?.movePrevious(); + formRef.current?.resetError(); prevScreen(); }; @@ -206,6 +208,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps renderSubStepContent ) : ( Date: Tue, 1 Oct 2024 21:39:20 +0700 Subject: [PATCH 2/3] add new instance and rename --- src/components/Form/FormProvider.tsx | 4 ++-- src/components/Form/types.ts | 2 +- src/pages/MissingPersonalDetails/index.tsx | 3 +++ .../NetSuiteImportAddCustomListPage.tsx | 2 +- .../NetSuiteImportAddCustomSegmentPage.tsx | 2 +- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 1e4fbf81a738..dfb669eaa078 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -252,7 +252,7 @@ function FormProvider( [inputValues], ); - const resetError = useCallback(() => { + const resetErrors = useCallback(() => { FormActions.clearErrors(formID); FormActions.clearErrorFields(formID); setErrors({}); @@ -260,7 +260,7 @@ function FormProvider( useImperativeHandle(forwardedRef, () => ({ resetForm, - resetError, + resetErrors, })); const registerInput = useCallback( diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index b8e8c49fa336..4ddd816af423 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -157,7 +157,7 @@ type FormProps = { type FormRef = { resetForm: (optionalValue: FormOnyxValues) => void; - resetError: () => void; + resetErrors: () => void; }; type InputRefs = Record>; diff --git a/src/pages/MissingPersonalDetails/index.tsx b/src/pages/MissingPersonalDetails/index.tsx index 5220f25be981..a6f7d87a360a 100644 --- a/src/pages/MissingPersonalDetails/index.tsx +++ b/src/pages/MissingPersonalDetails/index.tsx @@ -34,6 +34,7 @@ function MissingPersonalDetails() { const styles = useThemeStyles(); const {translate} = useLocalize(); const ref: ForwardedRef = useRef(null); + const formRef = useRef(null); const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS); const [cardList] = useOnyx(ONYXKEYS.CARD_LIST); @@ -65,6 +66,7 @@ function MissingPersonalDetails() { return; } ref.current?.movePrevious(); + formRef.current?.resetErrors(); prevScreen(); }; @@ -187,6 +189,7 @@ function MissingPersonalDetails() { /> Date: Tue, 1 Oct 2024 21:44:23 +0700 Subject: [PATCH 3/3] add type import --- src/pages/MissingPersonalDetails/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/MissingPersonalDetails/index.tsx b/src/pages/MissingPersonalDetails/index.tsx index a6f7d87a360a..cb565de6a001 100644 --- a/src/pages/MissingPersonalDetails/index.tsx +++ b/src/pages/MissingPersonalDetails/index.tsx @@ -5,7 +5,7 @@ import type {ForwardedRef} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; -import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';