Fix 49456

src/components/Form/FormProvider.tsx

@@ -1,10 +1,9 @@
 import {useFocusEffect} from '@react-navigation/native';
 import lodashIsEqual from 'lodash/isEqual';
 import type {ForwardedRef, MutableRefObject, ReactNode, RefAttributes} from 'react';
 import React, {createRef, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
@@ -13,7 +12,6 @@
 import type {OnyxFormKey} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Form} from '@src/types/form';
-import type {Network} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {RegisterInput} from './FormContext';
 import FormContext from './FormContext';
@@ -41,30 +39,19 @@
     }
 }
 
-type FormProviderOnyxProps = {
-    /** Contains the form state that must be accessed outside the component */
-    formState: OnyxEntry<Form>;
-
-    /** Contains draft values for each input in the form */
-    draftValues: OnyxEntry<Form>;
-
-    /** Information about the network */
-    network: OnyxEntry<Network>;
-};
-
-type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProviderOnyxProps &
+type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = 
     FormProps<TFormID> & {
         /** Children to render. */
         children: ((props: {inputValues: FormOnyxValues<TFormID>}) => ReactNode) | ReactNode;
 
         /** Callback to validate the form */
         validate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
 
         /** Should validate function be called when input loose focus */
         shouldValidateOnBlur?: boolean;
 
         /** Should validate function be called when the value of the input is changed */
         shouldValidateOnChange?: boolean;
 
         /** Whether to remove invisible characters from strings before validation and submission */
         shouldTrimValues?: boolean;
@@ -86,16 +73,17 @@
         shouldValidateOnBlur = true,
         shouldValidateOnChange = true,
         children,
-        formState,
-        network,
         enabledWhenOffline = false,
-        draftValues,
         onSubmit,
         shouldTrimValues = true,
         ...rest
     }: FormProviderProps,
     forwardedRef: ForwardedRef<FormRef>,
 ) {
+
+    const [network] = useOnyx(ONYXKEYS.NETWORK);
+    const [formState] = useOnyx(formID);
+    const [draftValues] = useOnyx(`${formID}Draft`);
     const {preferredLocale, translate} = useLocalize();
     const inputRefs = useRef<InputRefs>({});
     const touchedInputs = useRef<Record<string, boolean>>({});
@@ -105,7 +93,7 @@
 
     const onValidate = useCallback(
         (values: FormOnyxValues, shouldClearServerError = true) => {
             const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(values) : values;
 
             if (shouldClearServerError) {
                 FormActions.clearErrors(formID);
@@ -250,7 +238,7 @@
     }));
 
     const registerInput = useCallback<RegisterInput>(
-        (inputID, shouldSubmitForm, inputProps) => {
+        (inputID , shouldSubmitForm, inputProps) => {
             const newRef: MutableRefObject<InputComponentBaseProps> = inputRefs.current[inputID] ?? inputProps.ref ?? createRef();
             if (inputRefs.current[inputID] !== newRef) {
                 inputRefs.current[inputID] = newRef;
@@ -264,8 +252,8 @@
                 // We force the form to set the input value from the defaultValue props if there is a saved valid value
                 inputValues[inputID] = inputProps.defaultValue;
             } else if (inputValues[inputID] === undefined) {
                 // We want to initialize the input value if it's undefined
                 inputValues[inputID] = inputProps.defaultValue ?? getInitialValueByType(inputProps.valueType);
             }
 
             const errorFields = formState?.errorFields?.[inputID] ?? {};
@@ -398,19 +386,6 @@
 
 FormProvider.displayName = 'Form';
 
-export default withOnyx<FormProviderProps, FormProviderOnyxProps>({
-    network: {
-        key: ONYXKEYS.NETWORK,
-    },
-    // withOnyx typings are not able to handle such generic cases like this one, since it's a generic component we need to cast the keys to any
-    formState: {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
-        key: ({formID}) => formID as any,
-    },
-    draftValues: {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
-        key: (props) => `${props.formID}Draft` as any,
-    },
-})(forwardRef(FormProvider)) as <TFormID extends OnyxFormKey>(props: Omit<FormProviderProps<TFormID> & RefAttributes<FormRef>, keyof FormProviderOnyxProps>) => ReactNode;
+export default forwardRef(FormProvider) as <TFormID extends OnyxFormKey>(props: FormProviderProps<TFormID>) => ReactNode;
 
 export type {FormProviderProps};

src/components/Form/FormWrapper.tsx

@@ -3,8 +3,7 @@
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView, StyleProp, View, ViewStyle} from 'react-native';
 import {Keyboard} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormElement from '@components/FormElement';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
@@ -13,18 +12,11 @@
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import type {Form} from '@src/types/form';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {FormInputErrors, FormProps, InputRefs} from './types';
 
-type FormWrapperOnyxProps = {
-    /** Contains the form state that must be accessed outside the component */
-    formState: OnyxEntry<Form>;
-};
-
 type FormWrapperProps = ChildrenProps &
-    FormWrapperOnyxProps &
     FormProps & {
         /** Submit button styles */
         submitButtonStyles?: StyleProp<ViewStyle>;
@@ -48,7 +40,6 @@
 function FormWrapper({
     onSubmit,
     children,
-    formState,
     errors,
     inputRefs,
     submitButtonText,
@@ -69,6 +60,9 @@
     const styles = useThemeStyles();
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
+
+    const [formState] = useOnyx(`${formID}`);
+
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
 
     const onFixTheErrorsLinkPressed = useCallback(() => {
@@ -114,9 +108,9 @@
                     <FormAlertWithSubmitButton
                         buttonText={submitButtonText}
                         isDisabled={isSubmitDisabled}
                         isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
                         isLoading={!!formState?.isLoading}
                         message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
@@ -189,10 +183,4 @@
 
 FormWrapper.displayName = 'FormWrapper';
 
-export default withOnyx<FormWrapperProps, FormWrapperOnyxProps>({
-    formState: {
-        // withOnyx typings are not able to handle such generic cases like this one, since it's a generic component we need to cast the keys to any
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
-        key: (props) => props.formID as any,
-    },
-})(FormWrapper);
+export default FormWrapper;