Navigating to a chat you can't access results in a blank screen

[marcaaron]

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. Got an email for a report comment and clicked the link
2. Was logged into E.cash with an account that could not access said report
3. Landed on an empty report

Expected Result:

Get redirected to a 404 page or something.

Actual Result:

LHN is visible but report view displays a white screen with no additional information

Workaround:

N/A

Platform:

All

Version Number: version: "1.0.74-0"
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 @bfitzexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[dklymenk]

Hello, if you decide to make this external I have a proposal.

It should be as simple as refactoring ReportView to render the error instead of ReportActionsView and ReportActionCompose, if there is no reportID for requested report in local storage.

const ReportView = ({reportID, report, session}) => {
    if (!report.reportID) {
        return (
            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                <Text style={[styles.h1]}>404</Text>
            </View>
        );
    }
    return (
        <View nativeID={CONST.REPORT.DROP_NATIVE_ID} key={reportID} style={[styles.flex1, styles.justifyContentEnd]}>
            <ReportActionsView reportID={reportID} />

            {session.shouldShowComposeInput && (
                <SwipeableView onSwipeDown={() => Keyboard.dismiss()}>
                    <ReportActionCompose
                        onSubmit={text => addAction(reportID, text)}
                        reportID={reportID}
                    />
                </SwipeableView>
            )}
            <KeyboardSpacer />
        </View>
    );
};

and also map report to props via withOnyx:

export default withOnyx({
    report: {
        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
    },
    session: {
        key: ONYXKEYS.SESSION,
    },
})(ReportView);

also adjust proptypes accordingly.

It will look like this:

I'll obviously adjust the looks and text to whatever is required by your design team.

The benefit of doing it like this over redirecting to some different page is the fact that user can use sidebar to switch to a chat he has access to and start chatting right away. Or logout and login with his second account to open the chat he didn't have access to with his previous account. Basically, all the UI is available right away, thus better UX.

[aliabbasmalik8]

PROPOSAL

We can throw an error if we have no access to that chat and catch an error in ErrorBoundary as we already using ErrorBoundary. right now there is no fallback UI so we can show a simple and appropriate message for now.

Thanks

[MelvinBot]

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

[Beamanator]

Good find, looks like it's easily reproducible by just navigating to https://staging.expensify.cash/r/25 - a.k.a. a report you don't have access to. Marking External 👍

[MelvinBot]

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