[$500] Android - Status - On tapping save, "clear status" is not shown before navigating to previous page

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.29.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 site in mweb/app
2. Tap profile
3. Tap status
4. Select an emoji
5. Enter a message
6. Tap save
7. Note, on tapping save, "clear status" is shown/not shown before navigating to previous page in mweb and Android

Expected Result:

When tapping save, there must be consistent behaviour on showing/not showing "clear status" in mweb & Android before navigating to previous page.

Actual Result:

After selecting status emoji, entering message, on tapping save "clear status " is seen before navigating to previous page in mweb but not in Android. Inconsistent behaviour is shown.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6350163_1705922791419.g.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01378cdeab58829dc2
• Upwork Job ID: 1749427027673931776
• Last Price Increase: 2024-01-22

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01378cdeab58829dc2

[melvin-bot]

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

[FitseTLT]

Proposal

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

Android - Status - On tapping save, "clear status" is not shown before navigating to previous page

What is the root cause of that problem?

We show the clear status when there is status emoji or text

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

Lines 182 to 183 in 52adf77

	{(!!currentUserEmojiCode || !!currentUserStatusText) && (
	<MenuItem

whose value depends on the status read from the currentUserPersonalDetails so the inconsistency of the display is caused by the difference on whether the onyx update comes before the navigation animation ends or not

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

To make it consistent we can use a ref (on save button press) that will be set when we set status emoji or text from both empty to some non-empty value and we should not allow the display of the button when that ref is set so that the button consistently will not be displayed while the user is navigated away after pressing the save button.

What alternative solutions did you explore? (Optional)

[paultsimura]

Proposal

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

The "Clear status" button is shown for a moment before navigating to a previous screen.

What is the root cause of that problem?

The button is shown based on this condition:

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

Lines 182 to 191 in 5e71037

	{(!!currentUserEmojiCode || !!currentUserStatusText) && (
	<MenuItem
	title={translate('statusPage.clearStatus')}
	titleStyle={styles.ml0}
	icon={Expensicons.Trashcan}
	onPress={clearStatus}
	iconFill={theme.danger}
	wrapperStyle={[styles.pl2]}
	/>
	)}

And the status is persisted & navigation happens here:

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

Lines 83 to 92 in 5e71037

	User.updateCustomStatus({
	text: statusText,
	emojiCode,
	clearAfter: clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER ? clearAfterTime : '',
	});
	User.clearDraftCustomStatus();
	InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

So between the status is persisted and navigation, which happens after interactions, the button is displayed briefly.

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

I don't see a need for using the InteractionManager.runAfterInteractions here (asked to clarify), IMO we can just remove it:

            User.updateCustomStatus({
                text: statusText,
                emojiCode,
                clearAfter: clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER ? clearAfterTime : '',
            });

            User.clearDraftCustomStatus();
            navigateBackToPreviousScreen();

This way, we will not wait for interactions (i.e. until the status is persisted and the draft status is removed), navigate back, and let the updates happen asynchronously.

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @sabal9991! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[sabal9991]

Solution Proposal for GitHub Issue #34886

Issue Title: Clear Status Button Not Showing on Android
GitHub Issue: Expensify/App/issues/34886

Description:
When executing the React Native project on an Android device, the "Clear Status" button is not displaying on the status page. This issue occurs when selecting an emoji and entering text before navigating back to the profile page.

Steps to Reproduce:

Navigate to the status page.
Select an emoji and enter text.
Attempt to navigate back to the profile page.
Expected Behavior:
The "Clear Status" button should be visible when an emoji and text are selected.

Actual Behavior:
The "Clear Status" button is not showing as expected.

Potential Causes and Checks:

Condition Check:

Ensure that the condition !!currentUserEmojiCode || !!currentUserStatusText is evaluating to true.
Logging:

Add console.log statements to inspect the values of currentUserEmojiCode and currentUserStatusText.
Update Draft Status:

Check if User.clearDraftCustomStatus() and User.updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()}) behave as expected.
Effect Dependencies:

Verify the dependencies of the useEffect hook for handling draft status.
External Dependencies:

Ensure external components, like the EmojiPicker, are not causing unexpected side effects.
Styling:

Confirm that the styling of the "Clear Status" button is not causing it to be hidden or overlapped.
Navigation Flow:

Double-check the navigation flow to ensure it doesn't interfere with the button's visibility.
Proposal:
To address the "Clear Status" button visibility issue on Android, I propose the following steps:

Condition Check:

Review the condition !!currentUserEmojiCode || !!currentUserStatusText and make adjustments if necessary. Ensure it accurately reflects the desired visibility criteria.
Logging:

Implement additional logging statements to capture the values of currentUserEmojiCode and currentUserStatusText during the button rendering process. This will help diagnose whether the condition is met.
Update Draft Status:

Ensure that the calls to User.clearDraftCustomStatus() and User.updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()}) are correctly updating the draft status.
Effect Dependencies:

Validate the dependencies in the useEffect hook related to handling draft status. Ensure it triggers appropriately based on changes in currentUserEmojiCode and currentUserClearAfter.
External Dependencies:

Examine external components (e.g., EmojiPicker) for any unexpected interactions that might impact the rendering of the "Clear Status" button.
Styling:

Check the styling of the "Clear Status" button to ensure it is not set to be hidden or overlapped by other elements.
Navigation Flow:

Review the navigation flow to ensure that navigating back to the profile page is not causing unintended re-renders or state changes.
Next Steps:
If this proposal is accepted, I will proceed with the suggested changes and provide a detailed pull request on the Expensify/App GitHub repository. The pull request will include relevant code modifications, screenshots, and confirmation of testing on all platforms.

Contributor Guidelines:
Before submitting the proposal, I have reviewed the Contributor Guidelines to ensure compliance with Expensify's contribution standards.

Payment Terms:
As per the documented CONTRIBUTING.md, payment amounts are variable, dependent on any regressions caused by the work.

I look forward to your feedback and the opportunity to contribute to the resolution of this issue.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[sabal9991]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0157ed7158e8dea6f2

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[anmurali]

Tested on iOS native and Android native and the behavior is consistent. Cannot reproduce.

[paultsimura]

@anmurali this is the Web platform that has a faulty behavior: the "Clear status" button appears before the right-hand modal fully closes. It should appear only on the second opening of the modal after the status is set.

Screen.Recording.2024-01-25.at.08.21.31.mov

[kbecciv]

Issue is reproducible on build 1.4.33.1

34780.Web.mp4

[melvin-bot]

@anmurali this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@anmurali Huh... This is 4 days overdue. Who can take care of this?

[anmurali]

Discussed here
Closing as this seems really trivial.