[$500] Web - When a user changes their profile status, the app brings you to the end of the conversation.

[lanitochka17]

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

---

Version Number: 1.4.13.0
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Launch the app
2. Log in with any account
3. Open the 1:1 conversation
4. Scroll to the middle
5. Go to the seating - Profile - Status
6. Change the status

Expected Result:

When a user changes their profile status, the app should stay in the same conversation position

Actual Result:

When a user changes their profile status, the app brings you to the end of the conversation

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6313458_1702578893863.Recording__5707.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017a47704cf8762519
• Upwork Job ID: 1735371288086798336
• Last Price Increase: 2024-01-04

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017a47704cf8762519

[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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)

[FitseTLT]

Proposal

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

When a user changes their profile status, the app brings you to the end of the conversation.

What is the root cause of that problem?

Currently we are popingToTop after saving a profile status as we set setShouldPopAllStateOnUP when we come from the status button flow (not profile > status flow) here

App/src/pages/home/sidebar/AvatarWithOptionalStatus.js

Lines 32 to 39 in 904cf56

	const showStatusPage = useCallback(() => {
	if (isCreateMenuOpen) {
	// Prevent opening Settings page when click profile avatar quickly after clicking FAB icon
	return;
	}
	Navigation.setShouldPopAllStateOnUP();
	Navigation.navigate(ROUTES.SETTINGS_STATUS);

so the page is unnecessarily reloading and the report screen is scrolled to bottom creating a disturbing user experience and I think we should avoid this unnecessary reloading.

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

We should use goBack when we come from the status button flow without fallbackRoute we can do that by saving an indicator that the user comes from the status button flow (like fromStatusButonFlow in onyx) here

App/src/pages/home/sidebar/AvatarWithOptionalStatus.js

Lines 32 to 39 in 904cf56

	const showStatusPage = useCallback(() => {
	if (isCreateMenuOpen) {
	// Prevent opening Settings page when click profile avatar quickly after clicking FAB icon
	return;
	}
	Navigation.setShouldPopAllStateOnUP();
	Navigation.navigate(ROUTES.SETTINGS_STATUS);

App/src/pages/settings/Profile/CustomStatus/StatusPage.js

Line 72 in 904cf56

const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(ROUTES.SETTINGS_PROFILE, false, true), []);

 const navigateBackToPreviousScreen = useCallback(() => {
        if (fromStatusButtonFlow) {
            resetFromStatusButtonFlow();
            Navigation.goBack();
        } else Navigation.goBack(ROUTES.SETTINGS_PROFILE, false, true);
    }, []);

The necessity of saving it in onyx is to make it work perfectly on page refresh. otherwise, we can also use global variable just similar to shouldPopAllStateOnUP. By the way, currently, if you press the status button and then on the status page refresh and press back on the status page it navigates to profile page which is wrong (related bug) it should pop the RHP as it would if you haven't refreshed.

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

If we open another chat, then open the status page from the sidebar (settings) avatar, and then close it, a new chat will open.

What is the root cause of that problem?

When we open the status page from the sidebar avatar, we set shouldPopAllStateOnUP.

App/src/pages/home/sidebar/AvatarWithOptionalStatus.js

Lines 38 to 39 in 3a44f77

	Navigation.setShouldPopAllStateOnUP();
	Navigation.navigate(ROUTES.SETTINGS_STATUS);

Then, on pressing back/save, we call goBack with shouldPopToTop (3rd param) as true.

App/src/pages/settings/Profile/CustomStatus/StatusPage.js

Line 72 in 3a44f77

const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(ROUTES.SETTINGS_PROFILE, false, true), []);

If both shouldPopAllStateOnUP and shouldPopToTop are true, it will pop all screens up to the LHN.

App/src/libs/Navigation/Navigation.ts

Lines 146 to 152 in 3a44f77

	if (shouldPopToTop) {
	if (shouldPopAllStateOnUP) {
	shouldPopAllStateOnUP = false;
	navigationRef.current?.dispatch(StackActions.popToTop());
	return;
	}
	}

So, the current report is also popped out from the stack, and a new one will be added.

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

I would like to propose a quite different solution. First of all, I think we shouldn't use setShouldPopAllStateOnUP. I see 1 flaw with that approach.

If we open the status page from the sidebar avatar, shouldPopAllStateOnUP will be true. If we close the status page by pressing the overlay, shouldPopAllStateOnUP will stay true (we only reset shouldPopAllStateOnUP when calling goBack).

Because it's still true if we open the status page from the profile page and press back, it will pop out all screens, even though it should go back to the profile page.

So, the solution I would like to propose is to have a different route path for the status page, depending on where we open it. If we open it from the sidebar avatar, we will navigate to /status, but if we open it from the profile page, then we will navigate to the same route we have now, that is /settings/profile/status.

App/src/pages/home/sidebar/AvatarWithOptionalStatus.js

Lines 38 to 39 in 3a44f77

	Navigation.setShouldPopAllStateOnUP();
	Navigation.navigate(ROUTES.SETTINGS_STATUS);

Navigation.navigate(ROUTES.STATUS);

Then, based on the current route, we can decide whether we need the fallback route or not.

const navigateBackToPreviousScreen = useCallback(() => {
    const path = Navigation.getActiveRoute();
    const fallbackRoute = path.startsWith(ROUTES.SETTINGS_PROFILE) ? ROUTES.SETTINGS_PROFILE : '';
    // or const fallbackRoute = route.name === SCREENS.SETTINGS.PROFILE.STATUS ? ROUTES.SETTINGS_PROFILE : '';
    Navigation.goBack(fallbackRoute);
}, []);

Here is how you add the new route

1. Add a new entry to ROUTES.ts (this is the route path)
   STATUS: 'status'
2. Add a new entry to SCREENS.ts (this is the route name)
   STATUS: 'Status'
3. Add a new entry to linkingConfig.ts (binding it up, you can add it above SCREENS.SETTINGS.PROFILE.STATUS)

[SCREENS.STATUS]: {
    path: ROUTES.STATUS,
    exact: true,
},

4. Add a new screen in ModalStackNavigators.tsx, specifically in SettingsModalStackNavigator navigator. (you can add it above SCREENS.SETTINGS.PROFILE.STATUS)

[SCREENS.STATUS]: () => require('../../../pages/settings/Profile/CustomStatus/StatusPage').default as React.ComponentType,