From 8d2001c58647b10d9f512aed71363fc515ecd12b Mon Sep 17 00:00:00 2001 From: Sachin Chavda Date: Sat, 21 Sep 2024 00:58:06 +0530 Subject: [PATCH] useOnyx migration --- src/components/Form/FormProvider.tsx | 41 ++++++---------------------- src/components/Form/FormWrapper.tsx | 22 ++++----------- 2 files changed, 13 insertions(+), 50 deletions(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 48fea78da0dc..c513a7e938fb 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -3,8 +3,7 @@ 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 CONST from '@src/CONST'; 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,18 +39,7 @@ function getInitialValueByType(valueType?: ValueTypeKey): InitialDefaultValue { } } -type FormProviderOnyxProps = { - /** Contains the form state that must be accessed outside the component */ - formState: OnyxEntry
; - - /** Contains draft values for each input in the form */ - draftValues: OnyxEntry; - - /** Information about the network */ - network: OnyxEntry; -}; - -type FormProviderProps = FormProviderOnyxProps & +type FormProviderProps = FormProps & { /** Children to render. */ children: ((props: {inputValues: FormOnyxValues}) => ReactNode) | ReactNode; @@ -86,16 +73,17 @@ function FormProvider( shouldValidateOnBlur = true, shouldValidateOnChange = true, children, - formState, - network, enabledWhenOffline = false, - draftValues, onSubmit, shouldTrimValues = true, ...rest }: FormProviderProps, forwardedRef: ForwardedRef, ) { + + const [network] = useOnyx(ONYXKEYS.NETWORK); + const [formState] = useOnyx(formID); + const [draftValues] = useOnyx(`${formID}Draft`); const {preferredLocale, translate} = useLocalize(); const inputRefs = useRef({}); const touchedInputs = useRef>({}); @@ -250,7 +238,7 @@ function FormProvider( })); const registerInput = useCallback( - (inputID, shouldSubmitForm, inputProps) => { + (inputID , shouldSubmitForm, inputProps) => { const newRef: MutableRefObject = inputRefs.current[inputID] ?? inputProps.ref ?? createRef(); if (inputRefs.current[inputID] !== newRef) { inputRefs.current[inputID] = newRef; @@ -398,19 +386,6 @@ function FormProvider( FormProvider.displayName = 'Form'; -export default withOnyx({ - 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 (props: Omit & RefAttributes, keyof FormProviderOnyxProps>) => ReactNode; +export default forwardRef(FormProvider) as (props: FormProviderProps) => ReactNode; export type {FormProviderProps}; diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index e9f14315486d..5fef9aee9379 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/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,11 @@ import ScrollView from '@components/ScrollView'; 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; -}; - type FormWrapperProps = ChildrenProps & - FormWrapperOnyxProps & FormProps & { /** Submit button styles */ submitButtonStyles?: StyleProp; @@ -48,7 +40,6 @@ type FormWrapperProps = ChildrenProps & function FormWrapper({ onSubmit, children, - formState, errors, inputRefs, submitButtonText, @@ -69,6 +60,9 @@ function FormWrapper({ const styles = useThemeStyles(); const formRef = useRef(null); const formContentRef = useRef(null); + + const [formState] = useOnyx(`${formID}`); + const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]); const onFixTheErrorsLinkPressed = useCallback(() => { @@ -189,10 +183,4 @@ function FormWrapper({ FormWrapper.displayName = 'FormWrapper'; -export default withOnyx({ - 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; \ No newline at end of file