-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #55588 from jacobkim9881/m53884
fix:blank page appears in validate code form page
- Loading branch information
Showing
3 changed files
with
175 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React, {forwardRef, useEffect, useRef} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import Text from '@components/Text'; | ||
| import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm'; | ||
| import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {ValidateCodeActionFormProps} from './type'; | ||
|
|
||
| function ValidateCodeActionForm({ | ||
| descriptionPrimary, | ||
| descriptionSecondary, | ||
| validatePendingAction, | ||
| validateError, | ||
| handleSubmitForm, | ||
| clearError, | ||
| sendValidateCode, | ||
| hasMagicCodeBeenSent, | ||
| isLoading, | ||
| forwardedRef, | ||
| }: ValidateCodeActionFormProps) { | ||
| const themeStyles = useThemeStyles(); | ||
|
|
||
| const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); | ||
|
|
||
| const isUnmounted = useRef(false); | ||
|
|
||
| useEffect(() => { | ||
| sendValidateCode(); | ||
|
|
||
| return () => { | ||
| isUnmounted.current = true; | ||
| }; | ||
| // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| if (!isUnmounted.current) { | ||
| return; | ||
| } | ||
| clearError(); | ||
| }; | ||
| }, [clearError]); | ||
|
|
||
| return ( | ||
| <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}> | ||
| <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text> | ||
| {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>} | ||
| <ValidateCodeForm | ||
| isLoading={isLoading} | ||
| validateCodeAction={validateCodeAction} | ||
| validatePendingAction={validatePendingAction} | ||
| validateError={validateError} | ||
| handleSubmitForm={handleSubmitForm} | ||
| sendValidateCode={sendValidateCode} | ||
| clearError={clearError} | ||
| buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]} | ||
| ref={forwardedRef} | ||
| hasMagicCodeBeenSent={hasMagicCodeBeenSent} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| ValidateCodeActionForm.displayName = 'ValidateCodeActionForm'; | ||
|
|
||
| export default forwardRef<ValidateCodeFormHandle, ValidateCodeActionFormProps>((props, ref) => ( | ||
| <ValidateCodeActionForm | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| forwardedRef={ref} | ||
| /> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import type {ForwardedRef} from 'react'; | ||
| import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm'; | ||
| import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon'; | ||
|
|
||
| type ValidateCodeActionFormProps = { | ||
| /** Primary description of the modal */ | ||
| descriptionPrimary: string; | ||
|
|
||
| /** Secondary description of the modal */ | ||
| descriptionSecondary?: string | null; | ||
|
|
||
| /** The pending action for submitting form */ | ||
| validatePendingAction?: PendingAction | null; | ||
|
|
||
| /** The error of submitting */ | ||
| validateError?: Errors; | ||
|
|
||
| /** Function is called when submitting form */ | ||
| handleSubmitForm: (validateCode: string) => void; | ||
|
|
||
| /** Function to clear error of the form */ | ||
| clearError: () => void; | ||
|
|
||
| /** Function is called when validate code modal is mounted and on magic code resend */ | ||
| sendValidateCode: () => void; | ||
|
|
||
| /** If the magic code has been resent previously */ | ||
| hasMagicCodeBeenSent?: boolean; | ||
|
|
||
| /** Whether the form is loading or not */ | ||
| isLoading?: boolean; | ||
|
|
||
| /** Ref for validate code form */ | ||
| forwardedRef: ForwardedRef<ValidateCodeFormHandle>; | ||
| }; | ||
|
|
||
| // eslint-disable-next-line import/prefer-default-export | ||
| export type {ValidateCodeActionFormProps}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters