[$250] Web - Endless loading appears clicking on https://staging. new.expensify.com/details in concierge

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #10820

Action Performed:

1. Go to NewDot and login
2. Go to /details
3. Send message 'https://staging.new.expensify.com/details'
   in any chat room and click on it

Expected Result:

Details page opens

Actual Result:

Endless loading appears

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.0.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5729950_10820_-_web.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @francoisl (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[francoisl]

It looks like the details page expects a login param - e.g. https://staging.new.expensify.com/details?login=concierge%40expensify.com works as you would expect.

App/src/pages/DetailsPage.js

Lines 31 to 32 in 9a98116

	/** login passed via route /details/:login */
	login: PropTypes.string,

Doesn't look like a bug to me, I'll reassign to the triage team for a second opinion.

[melvin-bot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[aimane-chnaif]

Proposal

We should leave this page and go back to the root page.
This is already handled when DetailsPage component is mounted

App/src/pages/DetailsPage.js

Lines 70 to 77 in 9a98116

	componentDidMount() {
	if (lodashGet(this.props.route.params, 'login')) {
	return;
	}
	// Leave the page when the login information is not available
	Navigation.dismissModal();
	}

Then, why does this issue happen?
It happens because modal cannot be dismissed before modal is fully visible (isVisibility set to true)

Solution:
We can subscribe Modal.isVisibility from Onyx and dismiss modal only after modal is fully visible. so handle this on componentDidUpdate (for web) after subscribing ONYXKEYS.MODAL, as well as componentDidMount (for mobile)

Updated code:

App/src/pages/DetailsPage.js

Lines 208 to 215 in 9a98116

	withOnyx({
	session: {
	key: ONYXKEYS.SESSION,
	},
	personalDetails: {
	key: ONYXKEYS.PERSONAL_DETAILS,
	},
	}),

    withOnyx({
        session: {
            key: ONYXKEYS.SESSION,
        },
        personalDetails: {
            key: ONYXKEYS.PERSONAL_DETAILS,
        },
        modal: {
            key: ONYXKEYS.MODAL,
        },
    }),

clone componentDidMount code into componentDidUpdate

    componentDidUpdate() {
        if (lodashGet(this.props.route.params, 'login')) {
            return;
        }

        // Leave the page when the login information is not available
        Navigation.dismissModal();
    }

After this fix, nothing happens when click https://staging.new.expensify.com/details

10966.mov

[jboniface]

job post