[HOLD for payment Aug 12] Infinite loading screen when the user manually enters a reportID starting without a number

[aman-atg]

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

Upwork post: https://www.upwork.com/jobs/~01810669bc6137e1a3

---

Action Performed:

1. Login to new expensify
2. Enter any letter after r/ in the URL
3. Infinite loading screen is displayed

Expected Result:

Open a chat room with Concierge and show the required error message

chatIssue.mp4

Actual Result:

bug.mp4

Workaround:

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

Platform:

Where is this issue occurring?

• Web
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[aman-atg]

Proposal

Explaination

• It's happening because we're returning NaN here as a reportID
  

  App/src/pages/home/ReportScreen.js

  Lines 61 to 66 in 69d740a

  	* @returns {Number}
  	*/
  	getReportID() {
  	const params = this.props.route.params;
  	return Number.parseInt(params.reportID, 10);
  	}

Solution

    getReportID() {
        const params = this.props.route.params;
        const id = Number.parseInt(params.reportID, 10);
        if (_.isNaN(id)) {
            handleInaccessibleReport();
        }
        return Number.parseInt(params.reportID, 10);
    }

• We can redirect the user to Concierge's Chat and show an error message by defining a reusable function inside src/libs/actions/Report.js that can be named something like handleInaccessibleReport

/**
 * Handle the navigation when report is inaccessible
 */
function handleInaccessibleReport() {
    Growl.error(translateLocal('notFound.chatYouLookingForCannotBeFound'));
    navigateToConciergeChat();
}

• This function can be reused here as well
  

  App/src/libs/actions/Report.js

  Lines 397 to 403 in 69d740a

  	.catch((err) => {
  	if (err.message === CONST.REPORT.ERROR.INACCESSIBLE_REPORT) {
  	Growl.error(translateLocal('notFound.chatYouLookingForCannotBeFound'));
  	// eslint-disable-next-line no-use-before-define
  	navigateToConciergeChat();
  	}
  	});

[kadiealexander]

I was able to reproduce this via testing. Sending to engineering!

[MelvinBot]

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