Merge pull request #49358 from HezekielT/migrate-FormWrapper-from-wit…

…hOnyx-to-useOnyx

Migrate form wrapper from with onyx to use onyx

src/components/Form/FormWrapper.tsx

@@ -3,8 +3,7 @@ import type {RefObject} from 'react';
 // 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,13 @@ import ScrollView from '@components/ScrollView';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import type {OnyxFormKey} from '@src/ONYXKEYS';
 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 +42,6 @@ type FormWrapperProps = ChildrenProps &
 function FormWrapper({
     onSubmit,
     children,
-    formState,
     errors,
     inputRefs,
     submitButtonText,
@@ -69,6 +62,9 @@ function FormWrapper({
     const styles = useThemeStyles();
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
+
+    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`);
+
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
 
     const onFixTheErrorsLinkPressed = useCallback(() => {
@@ -189,10 +185,4 @@ function FormWrapper({
 
 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;