[HOLD for payment 2023-07-03] [$1000] Profile page loads infinitely with accountID is undefined

[kavimuru]

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

---

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Login with any account
3. Open with URL https://staging.new.expensify.com/a/undefined

Expected Result:

Profile page should show ''Hmm... it's not here"

Actual Result:

Profile page loads infinitely

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.28-3
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Screencast from 09-06-2023 13_35_24.webm

Recording.980.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686292516315989

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b5268811dd99e507
• Upwork Job ID: 1670909262930079744
• Last Price Increase: 2023-06-19

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kavimuru]

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

With accountID being undefined string, openPublicProfilePage isn't called in useEffect.

App/src/pages/ProfilePage.js

Lines 96 to 100 in 82ce35f

	useEffect(() => {
	if (accountID > 0) {
	PersonalDetails.openPublicProfilePage(accountID);
	}
	}, [accountID]);

So details always an empty object, hasMinimumDetails is false, isLoading is true

App/src/pages/ProfilePage.js

Lines 124 to 125 in 82ce35f

	const hasMinimumDetails = !_.isEmpty(details.avatar);
	const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details);

And loading component always displays

App/src/pages/ProfilePage.js

Line 212 in 82ce35f

{!hasMinimumDetails && isLoading && <FullScreenLoadingIndicator style={styles.flex1} />}

What changes do you think we should make in order to solve the problem?

We should check accountID is valid or not in here to change isLoading to false if accountID is invalid
(lodashGet(details, 'isLoading', false) || _.isEmpty(details)) && (accountID > 0)

App/src/pages/ProfilePage.js

Line 125 in 82ce35f

const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details);

What alternative solutions did you explore? (Optional)

[Pujan92]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile page loads infinitely with accountID is undefined

What is the root cause of that problem?

Seems the variable isLoading is not derived and assigned correctly to the Views. isLoading we are updating optimistically with the OpenPublicProfilePage api.

What changes do you think we should make in order to solve the problem?

• We should depend only on optimistic isLoading value
  const isLoading = lodashGet(details, 'isLoading', false);
  

  App/src/pages/ProfilePage.js

  Line 125 in 9fda6a5

  const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details);

• For showing the profile details we also need to check isLoading
{hasMinimumDetails && !isLoading && (
  

  App/src/pages/ProfilePage.js

  Line 140 in 9fda6a5

  {hasMinimumDetails && (

• To show loading indicator we can only use isLoading value
  {isLoading && <FullScreenLoadingIndicator style={styles.flex1} />}
  

  App/src/pages/ProfilePage.js

  Line 212 in 9fda6a5

  {!hasMinimumDetails && isLoading && <FullScreenLoadingIndicator style={styles.flex1} />}

Result

Screen.Recording.2023-06-16.at.3.33.40.AM.mp4

[hungvu193]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Infinite loading when user open invalid profile page.

What is the root cause of that problem?

We are checking if the accountID > 0 here to load the user profile, but for some cases this validation is not enough (ie: for route: 0x100000000) which made PersonalDetails.openPublicProfilePage(accountID); never called and isLoading is always true which caused the issue

App/src/pages/ProfilePage.js

Lines 97 to 99 in f6008bb

	if (accountID > 0) {
	PersonalDetails.openPublicProfilePage(accountID);
	}

What changes do you think we should make in order to solve the problem?

Instead of checking accountID > 0 we should have a validation for accountID route. Let say that accountId should be a number. (After personalDetails refactor they're now all number 😄 ). But we can improve this validation based on the requirement.

1. Add a account route validation

// we can change this validation base on requirement of accountId route
function isValidAccountRoute(accountId) {
    return CONST.REGEX.NUMBER.test(accountId) && accountId > 0;
}

2. Update useEffect condition

    useEffect(() => {
        if (isValidAccountRoute(routeName))) {
            PersonalDetails.openPublicProfilePage(accountID);
        }
    }, [accountID]);

3. Update condition to prevent infinite loading

    // if the accountId is invalid then we should show the blocking view instead of infinite loading
    const isLoading = (lodashGet(details, 'isLoading', false) || _.isEmpty(details)) && ValidationUtil.isValidAccountRoute(accountID);
    const shouldShowBlockingView = (!hasMinimumDetails && !isLoading) || !ValidationUtil.isValidAccountRoute(accountID);

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[anmurali]

Reproduced, added an external label for contributors to pick up

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b5268811dd99e507