[$500] [Wave Collect] [Ideal Nav] Display the home route when the app restarts on mobile platforms

[hayata-suenaga]

Clear the value for the LAST_VISITED_PATH Onyx key on mobile platforms (i.e. iOS and Android) so that when the app restarts on these platforms, the home route is displayed instead of the last visited route.

Internal Slack discussion

Related issues:

• IOU - App resumes in IOU flow when killing app in confirmation page and relaunching app

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e8861874ab17080a
• Upwork Job ID: 1754921316058124288
• Last Price Increase: 2024-02-13
• Automatic offers:
• HezekielT | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Display the home route when the app restarts on mobile platforms.

What is the root cause of that problem?

NA

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

We should use AppState to get the state of the app and whenever app is being inactive we can clear LAST_VISITED_PATH using updateLastVisitedPath. We will run this only if the device is an android or ios native device. We can add this logic in App.ts file or in NavigationRoot file.

App/src/libs/actions/App.ts

Line 507 in b5bb986

function updateLastVisitedPath(path: string) {

App/src/libs/actions/App.ts

Lines 138 to 144 in b5bb986

	let appState: AppStateStatus;
	AppState.addEventListener('change', (nextAppState) => {
	if (nextAppState.match(/inactive|background/) && appState === 'active') {
	Log.info('Flushing logs as app is going inactive', true, {}, true);
	}
	appState = nextAppState;
	});

Only run when isNative is true:
const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;

Since there is no simple way to trigger a function when app is being closed we can set the lastVisitedPath in ONYX to an empty string and save the value in a variable and if the app again comes in focus we will set the lastVisitedPath in ONYX to the original value which was there before the app was inactive.

Demo code, can be simplified and tested during the PR

    const [lastVisitedPathBeforeInactive, setLastVisitedPathBeforeInactive] = useState(props.lastVisitedPath);
    const isAppActive = useRef(false);
    const platform = getPlatform();
    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;


    useEffect(() => {
        if (!isNative) {
            return;
        }
        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
            if (nextAppState.match(/inactive|background/)) {
                isAppActive.current = false;
                setLastVisitedPathBeforeInactive(props.lastVisitedPath);
                updateLastVisitedPath('');
            } else {
                isAppActive.current = true;
                updateLastVisitedPath(lastVisitedPathBeforeInactive);
            }
        });

        return () => {
            appStateSubscription.remove();
        };
    }, [props.disableKeyboard, props.lastVisitedPath, lastVisitedPathBeforeInactive, isNative]);

    useEffect(() => {
        if (!isNative) {
            return;
        }
        if (isAppActive.current) {
            updateLastVisitedPath(props.lastVisitedPath);
        }
    }, [props.lastVisitedPath, isNative]);

Result

navigate_to_homepage_after_restart.mp4

app_restart.mp4

[bernhardoj]

Proposal

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

We want to show the home instead of the last visited route when restarting the native app.

What is the root cause of that problem?

We have a logic here to show the last visited route if exists on all platforms.

App/src/libs/Navigation/NavigationRoot.tsx

Lines 71 to 89 in 7f4cdce

	const initialState = useMemo(
	() => {
	if (!lastVisitedPath) {
	return undefined;
	}
	const path = initialUrl ? getPathFromURL(initialUrl) : null;
	// For non-nullable paths we don't want to set initial state
	if (path) {
	return;
	}
	const {adaptedState} = getAdaptedStateFromPath(lastVisitedPath, linkingConfig.config);
	return adaptedState;
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[],
	);

And now we want to change it.

Based on the OP, we want to clear the last visited route/path onyx when the app is closed, but there is no way to know whether the app is closed.

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

Instead of trying to clear it when the app is closed, we can create a new platform-specific file called shouldOpenLastVisitedPath that will return false for native.ts, then return early if shouldOpenLastVisitedPath is false.

if (!lastVisitedPath || !shouldOpenLastVisitedPath()) {
    return undefined;
}

What alternative solutions did you explore? (Optional)

Or we can create a platform-specific file for updateLastVisitedPath that will do nothing for the native file.

App/src/libs/actions/App.ts

Lines 507 to 509 in 7f4cdce

	function updateLastVisitedPath(path: string) {
	Onyx.merge(ONYXKEYS.LAST_VISITED_PATH, path);
	}

[dylanexpensify]

@rushatgabhane can we get reviews?

[HezekielT]

Proposal

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

Display the home route when the app is restarted.

What is root cause of that problem?

Based on the current implementation we always show the last visited path when opening the app but for native platforms we want to chage that and navigate the user home route instead when the app is opened.

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

When we open the app for the first time or after killing it, we always perform some setup actions while initializing the onyx such as clearing the error which prevents an error from appearing when the app is opened after killing it which means we can also follow a similar approach to address this issue which is to initialize ONYXKEYS.LAST_VISITED_PATH to '' for native platforms. This will cause the app to open the home route instead of the last visited chat when restarting it.

App/src/setup/index.js

Lines 33 to 34 in a1b1595

	// Clear any loading and error messages so they do not appear on app startup
	[ONYXKEYS.SESSION]: {loading: false},

We can do that by adding the following line of code in initialKeyStates

[ONYXKEYS.LAST_VISITED_PATH]: initializeLastVisitedPath()

where initializeLastVisitedPath function is defined as

function initializeLastVisitedPath() {
    if(!(getPlatform() === CONST.PLATFORM.IOS || getPlatform() === CONST.PLATFORM.ANDROID())) {
        return;
    }
    return '';
}

given that this is how we perform actions such as clearing an error, we might as well use a similar approach to redirect the user to home route.

This works as expected.

What alternative solutions did you explore? (Optional)

None

[rushatgabhane]

i like @bernhardoj's proposal

#35927 (comment)

🎀👀🎀

[melvin-bot]

Current assignee @hayata-suenaga is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[HezekielT]

@rushatgabhane What do you think about my proposal?

[bernhardoj]

I think @HezekielT suggestion is nicer.

[hayata-suenaga]

@rushatgabhane can you check @HezekielT's proposal again? @bernhardoj thinks @HezekielT's proposal is better

[melvin-bot]

@rushatgabhane, @dylanexpensify, @hayata-suenaga Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[hayata-suenaga]

bump @rushatgabhane

[hayata-suenaga]

there is an additional discussion on this issue

It's an internal link. I'll post updates once the discussion concludes.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[hayata-suenaga]

bumped the comment in the Slack thread

[dylanexpensify]

thank you!

[hayata-suenaga]

I confirmed that we want to display the Home route when the app restarts on mobile platforms. And by "Home" route, we mean the chat list screen without any workspace filter applied.

@rushatgabhane, please look at this comment and confirm who we should assign the issue to. 🙇

[rushatgabhane]

@hayata-suenaga We can assign @HezekielT, i like their proposal better because setup is the place Onyx is initialized

[melvin-bot]

📣 @HezekielT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[hayata-suenaga]

@HezekielT this is a HIGH priority issue. If you could prioritize this one, we'd appreciate it 🙇

[HezekielT]

Thanks @bernhardoj for the suggestion. I really appreciate that. Thanks @rushatgabhane as well for reconsidering my proposal.

[HezekielT]

@hayata-suenaga PR is ready

[dylanexpensify]

PR merged! Pending payout if no regressions!

[dylanexpensify]

coming up!

[rushatgabhane]

created money req - https://staging.new.expensify.com/r/2577190139543546

[JmillsExpensify]

Mind adding a payment summary @dylanexpensify?

[dylanexpensify]

Payment summary:

• Contributor: @HezekielT $500
• Contributor+: @rushatgabhane $500

Please apply/request

[JmillsExpensify]

$500 approved for @rushatgabhane based on summary.

[HezekielT]

@dylanexpensify Friendly bump for payment

[dylanexpensify]

Done!