From 025c78b8dc9e95a0ddf87155b97a3e7977047d28 Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 31 Dec 2024 16:22:42 +0700 Subject: [PATCH 1/6] fix: incorrect page is displayed when refreshing the page --- .../settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index 2add4009bb56..4f3d41876e1f 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import type {ValueOf} from 'type-fest'; import Button from '@components/Button'; import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper'; @@ -23,7 +23,7 @@ import DelegateMagicCodeModal from './DelegateMagicCodeModal'; type ConfirmDelegatePageProps = PlatformStackScreenProps; -function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { +function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -33,6 +33,9 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { const {isOffline} = useNetwork(); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false); + useEffect(() => { + navigation.setParams({showValidateActionModal: String(isValidateCodeActionModalVisible)}); + }, [isValidateCodeActionModalVisible, navigation]); const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login); const avatarIcon = personalDetails?.avatar ?? FallbackAvatar; From c98a3a5dc9c9b3581200885e102819b9f62dc18c Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 31 Dec 2024 16:42:17 +0700 Subject: [PATCH 2/6] fix: lint --- src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index 4f3d41876e1f..0f4a598c9844 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -68,7 +68,7 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { {translate('delegate.confirmCopilot')} Date: Fri, 10 Jan 2025 09:57:30 +0700 Subject: [PATCH 3/6] fix: disable modal animation after refreshing page --- src/components/ValidateCodeActionModal/index.tsx | 2 ++ src/components/ValidateCodeActionModal/type.ts | 3 +++ .../Security/AddDelegate/ConfirmDelegatePage.tsx | 10 ++++++++-- .../Security/AddDelegate/DelegateMagicCodeModal.tsx | 4 +++- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx index c25401d33494..ddb0b06c74c6 100644 --- a/src/components/ValidateCodeActionModal/index.tsx +++ b/src/components/ValidateCodeActionModal/index.tsx @@ -29,6 +29,7 @@ function ValidateCodeActionModal({ hasMagicCodeBeenSent, isLoading, shouldHandleNavigationBack, + disableAnimation, }: ValidateCodeActionModalProps) { const themeStyles = useThemeStyles(); const firstRenderRef = useRef(true); @@ -65,6 +66,7 @@ function ValidateCodeActionModal({ hideModalContentWhileAnimating useNativeDriver shouldUseModalPaddingStyle={false} + animationInTiming={disableAnimation ? 1 : undefined} > ; const showValidateActionModal = route.params.showValidateActionModal === 'true'; const {isOffline} = useNetwork(); + const shouldDisableModalAnimationRef = useRef(true); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false); useEffect(() => { @@ -52,7 +53,10 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { text={translate('delegate.addCopilot')} style={styles.mt6} pressOnEnter - onPress={() => setIsValidateCodeActionModalVisible(true)} + onPress={() => { + shouldDisableModalAnimationRef.current = false; + setIsValidateCodeActionModalVisible(true); + }} /> ); @@ -83,6 +87,8 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { shouldShowRightIcon /> void; shouldHandleNavigationBack?: boolean; + disableAnimation?: boolean; }; -function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible, shouldHandleNavigationBack}: DelegateMagicCodeModalProps) { +function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible, shouldHandleNavigationBack, disableAnimation}: DelegateMagicCodeModalProps) { const {translate} = useLocalize(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); @@ -49,6 +50,7 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal return ( Date: Fri, 17 Jan 2025 10:31:45 +0700 Subject: [PATCH 4/6] fix: use useState instead of useRef --- .../settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index 0be27ac3a885..e02e67795658 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -31,7 +31,7 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { const role = route.params.role as ValueOf; const showValidateActionModal = route.params.showValidateActionModal === 'true'; const {isOffline} = useNetwork(); - const shouldDisableModalAnimationRef = useRef(true); + const [shouldDisableModalAnimation, setShouldDisableModalAnimation] = useState(true); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false); useEffect(() => { @@ -54,7 +54,7 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { style={styles.mt6} pressOnEnter onPress={() => { - shouldDisableModalAnimationRef.current = false; + setShouldDisableModalAnimation(false); setIsValidateCodeActionModalVisible(true); }} /> @@ -87,8 +87,7 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { shouldShowRightIcon /> Date: Fri, 17 Jan 2025 10:32:18 +0700 Subject: [PATCH 5/6] fix: lint --- src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index e02e67795658..d055c045506c 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useRef, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import type {ValueOf} from 'type-fest'; import Button from '@components/Button'; import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper'; From e49143e116756753a1458bcdb662f887234b6159 Mon Sep 17 00:00:00 2001 From: truph01 Date: Fri, 17 Jan 2025 10:37:27 +0700 Subject: [PATCH 6/6] fix: lint --- .../Security/AddDelegate/ConfirmDelegatePage.tsx | 4 ++-- .../AddDelegate/DelegateMagicCodeModal.tsx | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index d055c045506c..97441b7340d7 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -15,7 +15,7 @@ import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -38,7 +38,7 @@ function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) { navigation.setParams({showValidateActionModal: String(isValidateCodeActionModalVisible)}); }, [isValidateCodeActionModalVisible, navigation]); - const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login); + const personalDetails = getPersonalDetailByEmail(login); const avatarIcon = personalDetails?.avatar ?? FallbackAvatar; const formattedLogin = formatPhoneNumber(login ?? ''); const displayName = personalDetails?.displayName ?? formattedLogin; diff --git a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx index 9db3b3f536cd..ee85bf5ab638 100644 --- a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx +++ b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx @@ -3,10 +3,10 @@ import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; -import * as User from '@libs/actions/User'; -import * as ErrorUtils from '@libs/ErrorUtils'; +import {requestValidateCodeAction} from '@libs/actions/User'; +import {getLatestError} from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; -import * as Delegate from '@userActions/Delegate'; +import {addDelegate, clearDelegateErrorsByField} from '@userActions/Delegate'; import type CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -26,7 +26,7 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login); const addDelegateErrors = account?.delegatedAccess?.errorFields?.addDelegate?.[login]; - const validateLoginError = ErrorUtils.getLatestError(addDelegateErrors); + const validateLoginError = getLatestError(addDelegateErrors); useEffect(() => { if (!currentDelegate || !!currentDelegate.pendingFields?.email || !!addDelegateErrors) { @@ -45,7 +45,7 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal if (!validateLoginError) { return; } - Delegate.clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate'); + clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate'); }; return ( @@ -57,9 +57,9 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal validateError={validateLoginError} isVisible={isValidateCodeActionModalVisible} title={translate('delegate.makeSureItIsYou')} - sendValidateCode={() => User.requestValidateCodeAction()} + sendValidateCode={() => requestValidateCodeAction()} hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent} - handleSubmitForm={(validateCode) => Delegate.addDelegate(login, role, validateCode)} + handleSubmitForm={(validateCode) => addDelegate(login, role, validateCode)} descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})} /> );