Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: incorrect page is displayed when refreshing the page #54680

Merged
merged 16 commits into from
Feb 24, 2025
Merged

fix: incorrect page is displayed when refreshing the page #54680

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
025c78b
fix: incorrect page is displayed when refreshing the page
truph01 Dec 31, 2024
c98a3a5
fix: lint
truph01 Dec 31, 2024
7a83b03
merge main
truph01 Jan 10, 2025
13d0c65
fix: disable modal animation after refreshing page
truph01 Jan 10, 2025
d70595e
merge main
truph01 Jan 14, 2025
4ed9e5a
merge maiin
truph01 Jan 17, 2025
ca4b1e7
fix: use useState instead of useRef
truph01 Jan 17, 2025
728ac39
fix: lint
truph01 Jan 17, 2025
e49143e
fix: lint
truph01 Jan 17, 2025
f429543
merge main
truph01 Jan 29, 2025
15c3b56
fix: add comment
truph01 Jan 29, 2025
669eb15
merge main
truph01 Jan 30, 2025
c986d69
fix: add comment
truph01 Jan 30, 2025
f44a299
merge main
truph01 Jan 31, 2025
c0ad5d2
merge main
truph01 Feb 19, 2025
45c2e9e
fix: Show loading indicator when the magic modal is showing
truph01 Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/ValidateCodeActionModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function ValidateCodeActionModal({
hasMagicCodeBeenSent,
isLoading,
shouldHandleNavigationBack,
disableAnimation,
threeDotsMenuItems = [],
onThreeDotsButtonPress = () => {},
}: ValidateCodeActionModalProps) {
Expand Down Expand Up @@ -70,6 +71,8 @@ function ValidateCodeActionModal({
hideModalContentWhileAnimating
useNativeDriver
shouldUseModalPaddingStyle={false}
// If `disableAnimation` is true, set `animationInTiming` to 1 to disable the animation effect
animationInTiming={disableAnimation ? 1 : undefined}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@truph01 can you please put a comment here explaining why this is needed ? the git blame will not explain to others why we needed this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just added comment

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let me rephrase 😅 , I meant that we need explanation for this change and not what this expression does

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the comment 'set animationInTiming to 1 to disable the animation effect' already clarifies the change. Do you have any suggestions for it?

Just so you know, the line animationInTiming={disableAnimation ? 1 : undefined} is already in use in our app without any comment.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the comment 'set animationInTiming to 1 to disable the animation effect' already clarifies the change. Do you have any suggestions for it?

It's not about the change but more of the functionality, In the checklist we have:

I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.

Just so you know, the line animationInTiming={disableAnimation ? 1 : undefined} is already in use in our app without any comment.

There should had been a comment explaning it, i will raise this one internally but in the meantime please explain why we needed to make the change

Copy link
Contributor Author

@truph01 truph01 Jan 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you suggesting that we add a comment explaining why this change fixes the issue? If so, I think it would be better to add the comment to this line:

image

The comment could be:
'We should disable the animation initially and only enable it when the user manually opens the modal to ensure it appears immediately when refreshing the page.'

About the animationInTiming={disableAnimation ? 1 : undefined}, we can discuss internally adding the comment since this line has also been used in other places in the past.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works for me!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated it

>
<ScreenWrapper
includeSafeAreaPaddingBottom
Expand Down
3 changes: 3 additions & 0 deletions src/components/ValidateCodeActionModal/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ type ValidateCodeActionModalProps = {
/** Whether handle navigation back when modal show. */
shouldHandleNavigationBack?: boolean;

/** Whether disable the animations */
disableAnimation?: boolean;

/** List of menu items for more(three dots) menu */
threeDotsMenuItems?: PopoverMenuItem[];

Expand Down
20 changes: 14 additions & 6 deletions src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,26 +15,30 @@ 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';
import DelegateMagicCodeModal from './DelegateMagicCodeModal';

type ConfirmDelegatePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM>;

function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) {
const {translate} = useLocalize();

const styles = useThemeStyles();
const login = route.params.login;
const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
const showValidateActionModal = route.params.showValidateActionModal === 'true';
const {isOffline} = useNetwork();
const [shouldDisableModalAnimation, setShouldDisableModalAnimation] = useState(true);

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false);
useEffect(() => {
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;
Expand All @@ -49,7 +53,10 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
text={translate('delegate.addCopilot')}
style={styles.mt6}
pressOnEnter
onPress={() => setIsValidateCodeActionModalVisible(true)}
onPress={() => {
setShouldDisableModalAnimation(false);
setIsValidateCodeActionModalVisible(true);
}}
/>
);

Expand All @@ -65,7 +72,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
<DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
<Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>
<MenuItem
avatarID={personalDetails?.accountID ?? -1}
avatarID={personalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID}
iconType={CONST.ICON_TYPE_AVATAR}
icon={avatarIcon}
title={displayName}
Expand All @@ -80,6 +87,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
shouldShowRightIcon
/>
<DelegateMagicCodeModal
disableAnimation={shouldDisableModalAnimation}
shouldHandleNavigationBack
login={login}
role={role}
Expand Down
18 changes: 10 additions & 8 deletions src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -17,15 +17,16 @@ type DelegateMagicCodeModalProps = {
isValidateCodeActionModalVisible: boolean;
onClose?: () => 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);
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) {
Expand All @@ -44,20 +45,21 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal
if (!validateLoginError) {
return;
}
Delegate.clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate');
clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate');
};

return (
<ValidateCodeActionModal
disableAnimation={disableAnimation}
shouldHandleNavigationBack={shouldHandleNavigationBack}
clearError={clearError}
onClose={onBackButtonPress}
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 ?? ''})}
/>
);
Expand Down
Loading