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 4 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
2 changes: 2 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 @@ -29,6 +29,7 @@ function ValidateCodeActionModal({
hasMagicCodeBeenSent,
isLoading,
shouldHandleNavigationBack,
disableAnimation,
}: ValidateCodeActionModalProps) {
const themeStyles = useThemeStyles();
const firstRenderRef = useRef(true);
Expand Down Expand Up @@ -65,6 +66,7 @@ function ValidateCodeActionModal({
hideModalContentWhileAnimating
useNativeDriver
shouldUseModalPaddingStyle={false}
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

>
<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 @@ -46,6 +46,9 @@ type ValidateCodeActionModalProps = {

/** Whether handle navigation back when modal show. */
shouldHandleNavigationBack?: boolean;

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

// eslint-disable-next-line import/prefer-default-export
Expand Down
17 changes: 13 additions & 4 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, useRef, useState} from 'react';
import type {ValueOf} from 'type-fest';
import Button from '@components/Button';
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
Expand All @@ -23,16 +23,20 @@ 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 shouldDisableModalAnimationRef = useRef(true);

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false);
useEffect(() => {
navigation.setParams({showValidateActionModal: String(isValidateCodeActionModalVisible)});
}, [isValidateCodeActionModalVisible, navigation]);

const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login);
const avatarIcon = personalDetails?.avatar ?? FallbackAvatar;
Expand All @@ -49,7 +53,10 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
text={translate('delegate.addCopilot')}
style={styles.mt6}
pressOnEnter
onPress={() => setIsValidateCodeActionModalVisible(true)}
onPress={() => {
shouldDisableModalAnimationRef.current = 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,8 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
shouldShowRightIcon
/>
<DelegateMagicCodeModal
// eslint-disable-next-line react-compiler/react-compiler
disableAnimation={shouldDisableModalAnimationRef.current}
Copy link
Contributor

Choose a reason for hiding this comment

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

why do we need to disable this one ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If not, we will encounter the lint error: Ref values (the current property) may not be accessed during render

Copy link
Contributor

Choose a reason for hiding this comment

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

yeah i mean 😅 , we shouldn't disable the error unless it's absolutely necessary, can you work through it?

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 couldn't find a way to fix the ESLint issue without disabling the lint rule. However, we are using similar logic in many places throughout the app, such as:

App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

Line 1 in 51ffc9c

/* eslint-disable react-compiler/react-compiler */

Copy link
Contributor

Choose a reason for hiding this comment

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

can you ask on open source channel, i'm not really sure about this update

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 asked here https://expensify.slack.com/archives/C01GTK53T8Q/p1736941321586909

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@allgandalf I just updated PR. Now I use state instead of ref.

shouldHandleNavigationBack
login={login}
role={role}
Expand Down
4 changes: 3 additions & 1 deletion src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@ 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);
Expand Down Expand Up @@ -49,6 +50,7 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal

return (
<ValidateCodeActionModal
disableAnimation={disableAnimation}
shouldHandleNavigationBack={shouldHandleNavigationBack}
clearError={clearError}
onClose={onBackButtonPress}
Expand Down
Loading