[PAY HUZAIFA][HOLD ON #15212] [$1000] The 'new messages' floating indicator doesnt go away after clicking it

[kavimuru]

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

---

Action Performed:

1. Open a chat with more than 50 messages (just so we can scroll 2-3 times page height)
2. Go to a message in the middle of the chat
3. Mark it as unread
4. Now click on the 'New Messages' floating button that should not be visible, it will scroll to bottom on click
5. Now scroll to top
6. Notice the 'New Messages' button is still there.

Expected Result:

The floating 'new messages' button should disappear after it is pressed and user is scrolled to bottom

Actual Result:

The floating 'new messages' button remains visible

Workaround:

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

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.30-5
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-15.at.5.52.02.PM.mov

Recording.1056.mp4

Expensify/Expensify Issue URL:
Issue reported by: @huzaifa-99
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686833432496709

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b010060f9e3fbd46
• Upwork Job ID: 1671682043008094208
• Last Price Increase: 2023-06-22

[melvin-bot]

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

[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

[jliexpensify]

Weird one - I can repro on v1.3.30-5.

[melvin-bot]

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

[melvin-bot]

Current assignee @jliexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[jeet-dhandha]

Proposal

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

• The problem is that when we press on New Messages button it takes us to the latest message but doesn't mark it as read.
• Also when we scroll manually down to the latest message it doesn't mark it as read too.

What is root cause of that problem?

• The root cause of this problem is that we are not setting newMarkerReportActionID as empty string when we are pressing on `New Messages`` button or when we are scrolling manually down to the latest message.

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

Affected File Code:

• We should set newMarkerReportActionID as empty string when we are pressing on New Messages button.
  https://github.com/Expensify/App/blob/e6c4b4e2f0bf9f42e57bebdd7720ee776ab6c93a/src/pages/home/report/ReportActionsView.js

    scrollToBottomAndMarkReportAsRead() {
        ReportScrollManager.scrollToBottom();
        Report.readNewestAction(this.props.report.reportID);
+       this.setState({newMarkerReportActionID: ''});
    }

• And also call same function scrollToBottomAndMarkReportAsRead when we are scrolling manually down to the latest message.
  

  App/src/pages/home/report/ReportActionsView.js

  Lines 311 to 314 in e6c4b4e

  	trackScroll({nativeEvent}) {
  	this.currentScrollOffset = -nativeEvent.contentOffset.y;
  	this.toggleFloatingMessageCounter();
  	}

    trackScroll({nativeEvent}) {
        this.currentScrollOffset = -nativeEvent.contentOffset.y;
        
+       // If the user scrolls to the top of the list, we want to mark the report as read
+       if(nativeEvent.contentOffset.y === 0 ) {
+           this.scrollToBottomAndMarkReportAsRead();
+       }

        this.toggleFloatingMessageCounter();
    }

Fixed:

Fix--NEwMessages.mp4

What alternative solutions did you explore? (Optional)

• N/A

[melvin-bot]

📣 @Thehamzaasif! 📣
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. 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.
2. 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.
3. 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>

[wildan-m]

@Thehamzaasif please use this template for your proposal. More info about contributing guide can be read here.

[ghost]

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

The problem we are trying to solve is that when the user presses the "New Messages" button or manually scrolls down to the latest message in the Expensify application, the message is not marked as read. This behavior is undesirable as it can lead to confusion and difficulty in tracking unread messages.

What is the root cause of that problem?
The root cause of this problem is that the current code does not include the necessary logic to mark the message as read when the user performs these actions.

Changes:

Instead of relying on the newMarkerReportActionID state, we can modify the code to directly mark the message as read when the user triggers the "New Messages" button or manually scrolls down to the latest message. Here's an alternative approach:

In the scrollToBottomAndMarkReportAsRead function (ReportActionsView.js):

Remove the line this.setState({ newMarkerReportActionID: '' }); as we won't be using the newMarkerReportActionID state.
In the trackScroll function (ReportActionsView.js):

Remove the check for nativeEvent.contentOffset.y === 0 and the call to this.scrollToBottomAndMarkReportAsRead();.
Update the onClick handler for the "New Messages" button:

Locate the code that handles the "New Messages" button click event and add the following line after scrolling to the latest message:

Report.readNewestAction(this.props.report.reportID);

Update the code that handles manual scrolling to the latest message:

Locate the code that handles the manual scrolling event to the latest message (e.g., in a scroll event listener).
After scrolling to the latest message, add the following line:

Report.readNewestAction(this.props.report.reportID);

By making these alternative changes, the message will be marked as read directly when the user triggers the "New Messages" button or manually scrolls down to the latest message. This approach bypasses the need for the newMarkerReportActionID state and ensures that the message is correctly marked as read, addressing the problem effectively.

[wildan-m]

Proposal

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

The 'new messages' floating indicator doesn't go away after clicking it and the scroll reaches the bottom

What is the root cause of that problem?

We are not adding isUnread check here

App/src/pages/home/report/ReportActionsView.js

Lines 343 to 344 in e6c4b4e

	<FloatingMessageCounter
	isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}

Also when the scroll reaches the bottom, we are not removing the marker and reading the newest action.

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

We can add ReportUtils.isUnread(this.props.report) check here

App/src/pages/home/report/ReportActionsView.js

Lines 343 to 344 in e6c4b4e

	<FloatingMessageCounter
	isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}

and modify the trackScroll function to

    trackScroll({nativeEvent}) {
        this.currentScrollOffset = -nativeEvent.contentOffset.y;

        if (this.currentScrollOffset === 0) {
            Report.readNewestAction(this.props.report.reportID);
            this.setState({newMarkerReportActionID: ''});
            return;
        }

        this.toggleFloatingMessageCounter();
    }

according to this comment:

App/src/pages/home/report/ReportActionsView.js

Lines 113 to 118 in e6c4b4e

	// We use the scroll position to determine whether the report should be marked as read and the new line indicator reset.
	// If the user is scrolled up and no new line marker is set we will set it otherwise we will do nothing so the new marker
	// stays in it's previous position.
	if (this.currentScrollOffset === 0) {
	Report.readNewestAction(this.props.report.reportID);
	this.setState({newMarkerReportActionID: ''});

We will mark the report as read and remove the new message line when y scroll position is 0.
The new message line will be removed by setting newMarkerReportActionID to ''

What alternative solutions did you explore? (Optional)

N/A

[huzaifa-99]

Proposal

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

We want to mark the comment/report action as read whenever

• the user clicks on the floating 'new message' bubble
• the user scrolls to the recent messages (i.e scroll position is 0)

which in turn removes the unread message marker and floating message bubble.

What is the root cause of that problem?

At the moment we are only marking the previous messages as read whenever a user sends a message by subscribing to action events here.

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

I think we should use the existing logic that we have here to handle the floating bubble properly and unread marker correctly. We have to

1. Remove the bubble on click by adding newActionSubscriber.callback(true, ''); after API.write in readNewestAction, the true in newActionSubscriber.callback indicates an action from the current user, this update will trigger this logic and remove the floating bubble and the unread message marker

2. And on scroll to the newest message (scroll position = 0), we can update the trackScroll method to check if scroll position is 0 and there is an unread message, based on that we can trigger Report.readNewestAction which again will trigger this logic and remove the floating bubble and the unread message marker

if(this.currentScrollOffset === 0 && this.state.newMarkerReportActionID) {
    Report.readNewestAction(this.props.report.reportID);
}

After these changes I think we should also update the code comments in the new action subscriber block here

What alternative solutions did you explore? (Optional)

N/A

[mgotz607]

Proposal

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

Once unread message is checked, the 'New Messages' indicator won't be disappeared.

What is the root cause of that problem?

The current code does not update the state - newMarkerReportActionID after unread message is checked.

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

We can update this state - newMarkerReportActionID to check the message is checked or not.

    scrollToBottomAndMarkReportAsRead() {
        ReportScrollManager.scrollToBottom();
        Report.readNewestAction(this.props.report.reportID);
        // should update state
        this.setState({newMarkerReportActionID: ''});
    }

If the user scrolls to the top of the list, we want to mark the report as read

    trackScroll({nativeEvent}) {
        this.currentScrollOffset = -nativeEvent.contentOffset.y;
        if(nativeEvent.contentOffset.y === 0 ) {
            this.scrollToBottomAndMarkReportAsRead();
        }
        this.toggleFloatingMessageCounter();
    }

What alternative solutions did you explore? (Optional)

[jliexpensify]

@fedirjh got a few proposals, could you take a look? Cheers!

[fedirjh]

@jliexpensify We have a tracking issue for the unread indicator in #15212 , I think we should either hold it or add it to the issue tracker.

[jliexpensify]

Thanks for surfacing this one @fedirjh - I'll add this one to the master issue and add HOLD onto this label. I actually think I'm assigned another tracking indicator GH, and the consensus was to HOLD to see if the master issue resolved things.

[melvin-bot]

@jliexpensify, @fedirjh Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[fedirjh]

On Hold

[jliexpensify]

Oh hold

[jliexpensify]

Still on hold

[jliexpensify]

On hold

[jliexpensify]

On hold

[jliexpensify]

On hold!

[MonilBhavsar]

This should be fixed! We can retest and close this.
Here the expected result is

• The unread marker is and floating button is visible unless user leaves the chat

[fedirjh]

The unread marker is and floating button is visible unless user leaves the chat

I just retested, and this seems to be the current behavior. I think we can close then:

CleanShot.2023-11-21.at.18.42.23.mp4

[jliexpensify]

Awesome stuff!

It looks like @huzaifa-99 needs to be paid as the bug reporter. I'll spin up a job and pay him $250 (under the old payment scheme). Thanks everyone!

[jliexpensify]

@huzaifa-99 Upworks is error-ing out on me. Can you please apply here? https://www.upwork.com/jobs/~0114cf334b1532eb43

Thanks!

[huzaifa-99]

Applied @jliexpensify. Thank you!

[jliexpensify]

Offer sent, thanks @huzaifa-99

[huzaifa-99]

Accepted @jliexpensify. thanks

[jliexpensify]

All paid and job closed!