Show new marker indicator while user is scrolled up!

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

From conclusions based on this discussion! https://expensify.slack.com/archives/C01GTK53T8Q/p1628782470250300

Action Performed:

Open any user chat window.
Scroll up through the history
When a new message arrives, a new messages badge is shown.
Click the badge will scroll down, but there is no new marker indication above the new message received

Expected Result:

On scroll back below should show a new marker indicator like this, above a new message.

Actual Result:

No indicator after scroll down.

Simulator.Screen.Recording.-.iPhone.12.-.2021-08-18.at.13.10.49.mp4

Workaround:

Can the user still use Expensify without this being fixed? Yes
It's an improvement.

Platform:

Where is this issue occurring? All

Web
iOS
Android
Desktop App
Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on GitHub

@cdraeger11

Triggered auto assignment to @cdraeger11 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

@parasharrajat

Updated Proposal

A part of the solution is already discussed here #4357 (comment)

From these lines

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

Lines 130 to 137 in bdcafa3

    
           // Since we want the New marker to remain in place even if newer messages come in, we set it once on mount. 
        
           // We determine the last read action by deducting the number of unread actions from the total number. 
        
           // Then, we add 1 because we want the New marker displayed over the oldest unread sequence. 
        
           const oldestUnreadSequenceNumber = this.props.report.unreadActionCount === 0 
        
               ? 0 
        
               : (this.props.report.maxSequenceNumber - this.props.report.unreadActionCount) + 1; 
        
           setNewMarkerPosition(this.props.reportID, oldestUnreadSequenceNumber);

A method updateUnreadIndicatorPosition will be created.

Waiting for PR #4773 to merge, will update the complete proposal again. Because the PR is related to markerBadge.
Based on the confirmation from here need to reuse logic from @parasharrajat work!

Changes been merged:

Invoking the updateUnreadIndicatorPosition from the below lines,

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

Lines 394 to 396 in 170ec90

    
           updateLocalUnreadActionCount() { 
        
               this.setState(prevState => ({localUnreadActionCount: prevState.localUnreadActionCount + this.props.report.unreadActionCount})); 
        
           }

Like shown below,

@cdraeger11

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

@cdraeger11

@cdraeger11 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

@cdraeger11

@cdraeger11 Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@francoisl