[$500] Chat - Inconsistency in displaying unread green line when navigating from thread

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

Action Performed:

Navigate to staging.new.expensify.com
Go to chat with long history
Mark the latest message as unread
Scroll up and enter a thread
Tap on the subtitle in thread to return to main chat
Scroll down and note that green line is still there
Tap on the back button
Tap on the subtitle again
Scroll down and note that the green line is gone
Tap on the back button twice

Expected Result:

The green line for unread message will not show up since the unread message is visited and the green line is gone in Step 9

Actual Result:

The green line for unread message reappears

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6267891_1699386933157.Screen_Recording_20231107_222134_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01e2d8d823ccdf91aa
Upwork Job ID: 1721983249610829824
Last Price Increase: 2024-04-11
Automatic offers:

Ollyws | Reviewer | 0
FitseTLT | Contributor | 0

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

@JmillsExpensify

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

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

@Ollyws

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

@Ollyws

This issue will be fixed by #30696 (comment)

@Ollyws

Will you take a look?

Proposal

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

There are some inconsistencies in displaying unread green line marker when navigating from and to thread

What is the root cause of that problem?

The main issue is in weird logic of the following code

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

Lines 324 to 330 in 9cecdfa

    
           if (!shouldDisplayNewMarker(reportAction, index)) { 
        
               return; 
        
           } 
        
           markerFound = true; 
        
           if (!currentUnreadMarker && currentUnreadMarker !== reportAction.reportActionID) { 
        
               setCurrentUnreadMarker(reportAction.reportActionID); 
        
           }

Why can't we set currentUnreadMarker if that is not a null. I think this is wrong. currentUnreadMarker should be able to change when it's not a null
During the iteration, currentUnreadMarker can be changed and the iteration would be started again because the dependency changes. This forces re-render
We have redundant dependencies below. All other dependencies except shouldDisplayNewMarker are already shouldDisplayNewMarker's dependencies. No needs to add here

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

Line 335 in 9cecdfa

}, [sortedReportActions, report.lastReadTime, messageManuallyMarkedUnread, shouldDisplayNewMarker, currentUnreadMarker]);

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

Update

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

Lines 300 to 335 in 9cecdfa

    
           const shouldDisplayNewMarker = useCallback( 
        
               (reportAction, index) => { 
        
                   let shouldDisplay = false; 
        
                   if (!currentUnreadMarker) { 
        
                       const nextMessage = sortedReportActions[index + 1]; 
        
                       const isCurrentMessageUnread = isMessageUnread(reportAction, report.lastReadTime); 
        
                       shouldDisplay = isCurrentMessageUnread && (!nextMessage || !isMessageUnread(nextMessage, report.lastReadTime)); 
        
                       if (!messageManuallyMarkedUnread) { 
        
                           shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID(); 
        
                       } 
        
                   } else { 
        
                       shouldDisplay = reportAction.reportActionID === currentUnreadMarker; 
        
                   } 
        
                   return shouldDisplay; 
        
               }, 
        
               [currentUnreadMarker, sortedReportActions, report.lastReadTime, messageManuallyMarkedUnread], 
        
           ); 
        
           useEffect(() => { 
        
               // Iterate through the report actions and set appropriate unread marker. 
        
               // This is to avoid a warning of: 
        
               // Cannot update a component (ReportActionsList) while rendering a different component (CellRenderer). 
        
               let markerFound = false; 
        
               _.each(sortedReportActions, (reportAction, index) => { 
        
                   if (!shouldDisplayNewMarker(reportAction, index)) { 
        
                       return; 
        
                   } 
        
                   markerFound = true; 
        
                   if (!currentUnreadMarker && currentUnreadMarker !== reportAction.reportActionID) { 
        
                       setCurrentUnreadMarker(reportAction.reportActionID); 
        
                   } 
        
               }); 
        
               if (!markerFound) { 
        
                   setCurrentUnreadMarker(null); 
        
               } 
        
           }, [sortedReportActions, report.lastReadTime, messageManuallyMarkedUnread, shouldDisplayNewMarker, currentUnreadMarker]);

to

    const shouldDisplayNewMarker = useCallback(
        (unreadMarker, reportAction, index) => {
            let shouldDisplay = false;
            if (!currentUnreadMarker) {
                const nextMessage = sortedReportActions[index + 1];
                const isCurrentMessageUnread = isMessageUnread(reportAction, report.lastReadTime);
                shouldDisplay = isCurrentMessageUnread && (!nextMessage || !isMessageUnread(nextMessage, report.lastReadTime));
            } else {
                shouldDisplay = reportAction.reportActionID === unreadMarker;
            }
            return shouldDisplay;
        },
        [report.lastReadTime, sortedReportActions],
    );

    useEffect(() => {
        // Iterate through the report actions and set appropriate unread marker.
        // This is to avoid a warning of:
        // Cannot update a component (ReportActionsList) while rendering a different component (CellRenderer).
        let unreadMarker = null;
        _.each(sortedReportActions, (reportAction, index) => {
            if (!shouldDisplayNewMarker(unreadMarker, reportAction, index)) {
                return;
            }
            unreadMarker = reportAction.reportActionID;
        });
        setCurrentUnreadMarker(unreadMarker);
    }, [shouldDisplayNewMarker]);

Remove the below code segments

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

Line 149 in 4f92107

    
           const [messageManuallyMarkedUnread, setMessageManuallyMarkedUnread] = useState(0);

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

Lines 193 to 206 in 4f92107

    
           useEffect(() => { 
        
               const didManuallyMarkReportAsUnread = report.lastReadTime < DateUtils.getDBTime() && ReportUtils.isUnread(report); 
        
               if (didManuallyMarkReportAsUnread) { 
        
                   // Clearing the current unread marker so that it can be recalculated 
        
                   setCurrentUnreadMarker(null); 
        
                   setMessageManuallyMarkedUnread(new Date().getTime()); 
        
                   return; 
        
               } 
        
               setMessageManuallyMarkedUnread(0); 
        
               // We only care when a new lastReadTime is set in the report 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, [report.lastReadTime]);

Update

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

Line 348 in 4f92107

shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}

to

        shouldDisplayNewMarker={shouldDisplayNewMarker(currentUnreadMarker, reportAction, index)}

This works as expected

What alternative solutions did you explore? (Optional)

Proposal

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

Inconsistency in displaying unread green line when navigating from thread

What is the root cause of that problem?

When a user reply in thread and navigate to the same report via the subtitle link (repeatedly) report screens with the same report will exist in the navigation stack so when the user navigates back they will navigate back to the report screen with the same report in it's previous state as we are not reseting currentUnreadMarker whenever the user opens a new report.

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

In RepotActionList We need to have a useEffect that runs when the screen loses focus and the current report is not top most report we should reset currentUnreadMarker so we can do that by

    useEffect(() => {
        if (prevReportID === report.reportID) {
            return;
        }
        cacheUnreadMarkers.delete(report.reportID);
        setCurrentUnreadMarker(null);
    }, [isFocused, report.reportID]);

We can also use Navigation.getTopmostReportId to get the topmost report but the above suffices as we use a global variable prevReportID to track the top most reportID

And additionally if we want we can call calculateUnreadMaker whenever the screen gets focus back and currentUnreadMarker is null so that it will recalculate unread marker if there is a new message received before navigating back 👍 and also call readNewestAction to mark it as unread same as we do if the user opened the report from LHN

@Ollyws

This issue will be fixed by #30696 (comment)

@Ollyws

Will you take a look?

@s-alves10 to proof that your solution doesn't work just on your suggested changes applied, mark as unread a report action and refresh the page now the marker is expected to be displayed as the logic of mark as unread is to have that marker when next time a user opens the report. But in your case the marker will display for a sec and it disappears when lastReadTime is changed. For your information messageManuallyMarkedUnread is used to decide not to display the marker for the user's own message or report action unless it is manually marked unread.

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

Lines 306 to 309 in b8f91a4

    
           shouldDisplay = isCurrentMessageUnread && (!nextMessage || !isMessageUnread(nextMessage, report.lastReadTime)); 
        
           if (!messageManuallyMarkedUnread) { 
        
               shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID(); 
        
           }

In my opinion, all other logic is working fine (expect the unnecessary dependencies you mentioned which we can remove) so I suggest we only fix this specific issue.

@Ollyws

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

Offer link
Upwork job

@FitseTLT

📣 @FitseTLT 🎉 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 📖

@MonilBhavsar

@MonilBhavsar We don't have access to it 😢

Oops sorry, Pasting it here

Unread tests

Different chat open:

Given a chat report between user A and user B, and user A and user C, and user A has chat view with user B open
When user C sends message to user A, and user A switches to chat view with user C
Then user A should see the new marker line above the new messages, and the new marker line should persist until userA switches to another chat view.

Same chat open(no unread message):

Given a chat report between user A and user B, and user A has chat view with user B open and no unread message and no unread marker
When user B sends message to user A
Then user A should not see any new marker line

Same chat open(with unread message):

Given a chat report between user A and user B, and user A has chat view with user B open and user A has unread messages and new marker line
When user B sends message to user A
Then the new marker line should persist until userA switches to another chat view.

Same chat open(with user scrolled up):

Given a chat report between user A and user B, and user A has chat view with user B open and has no unread messages and no new marker line
When user A scrolls up to the old chats and user B sends message to user A
Then user A should see the green badge with “New Messages” and the new marker line above the new messages, and the new marker line should persist until userA switches to another chat view.

Redirecting to chat from email notification:

Given a chat report between user A and user B, and user A is not active on chat or offline
When user B sends message to user A and user A receives email notification and clicks on the link in the message
Then user A should be redirected to the chat view with user B and see the new marker line above the new messages, and the new marker line should persist until userA switches to another chat view.

Marking message as unread:

Given a chat report between user A and user B, and user A is active on a chat view with user B
When user A marks any report as unread i.e. click on “Mark as unread”
Then user A should see the new marker line above that message, and it won’t be removed until the user revisits the chat and switches to another chat then.

Deleting a message(other than unread message):

Given a chat report between user A and user B, and user A is active on a chat view with user B, and there is an unread message and unread marker
When user B sends a new message and deletes that message (other then the message above which there is an unread marker)
Then there should be no effect on the new marker line and user A should see the new marker line, and it won’t be removed until the user switches to another chat or the sender deletes all new messages.

Deleting an unread message:

Given a chat report between user A and user B, and user A is active on a chat view with user B, and there is an unread message and unread marker
When user B deletes a message above which there is an unread marker
Then user A should should not see the unread marker and the new message that was deleted

Marking as unread and deleting a message

Given a chat report between user A and user B
User A sends message to user B and marks the last sent message as unread
User A deletes the last sent message
Then the new marker line above last message should be removed
Now user A, sends three messages to user B - m1, m2, and m3 in order
User A marks m2 as unread
Then New marker line should be above m2
Now user A deletes m2
Then new marker line should be above next message i.e m3 in this case

Thx

@FitseTLT

@FitseTLT what's the ETA for the PR?

@MonilBhavsar

@MonilBhavsar After #40315 now the subtitle link will goBack instead of navigate So this bug is not reproducible anymore as we can't have two report screen with the same report id simultaneously by using subtitle link.

Okay, thanks for clarifying. Let's reopen if reproducible

Navigation Menu

Repository navigation

[$500] Chat - Inconsistency in displaying unread green line when navigating from thread #31026

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

66 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (!shouldDisplayNewMarker(reportAction, index)) {
	return;
	}
	markerFound = true;
	if (!currentUnreadMarker && currentUnreadMarker !== reportAction.reportActionID) {
	setCurrentUnreadMarker(reportAction.reportActionID);
	}

	const shouldDisplayNewMarker = useCallback(
	(reportAction, index) => {
	let shouldDisplay = false;
	if (!currentUnreadMarker) {
	const nextMessage = sortedReportActions[index + 1];
	const isCurrentMessageUnread = isMessageUnread(reportAction, report.lastReadTime);
	shouldDisplay = isCurrentMessageUnread && (!nextMessage \|\| !isMessageUnread(nextMessage, report.lastReadTime));
	if (!messageManuallyMarkedUnread) {
	shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID();
	}
	} else {
	shouldDisplay = reportAction.reportActionID === currentUnreadMarker;
	}
	return shouldDisplay;
	},
	[currentUnreadMarker, sortedReportActions, report.lastReadTime, messageManuallyMarkedUnread],
	);

	useEffect(() => {
	// Iterate through the report actions and set appropriate unread marker.
	// This is to avoid a warning of:
	// Cannot update a component (ReportActionsList) while rendering a different component (CellRenderer).
	let markerFound = false;
	_.each(sortedReportActions, (reportAction, index) => {
	if (!shouldDisplayNewMarker(reportAction, index)) {
	return;
	}
	markerFound = true;
	if (!currentUnreadMarker && currentUnreadMarker !== reportAction.reportActionID) {
	setCurrentUnreadMarker(reportAction.reportActionID);
	}
	});
	if (!markerFound) {
	setCurrentUnreadMarker(null);
	}
	}, [sortedReportActions, report.lastReadTime, messageManuallyMarkedUnread, shouldDisplayNewMarker, currentUnreadMarker]);

	useEffect(() => {
	const didManuallyMarkReportAsUnread = report.lastReadTime < DateUtils.getDBTime() && ReportUtils.isUnread(report);
	if (didManuallyMarkReportAsUnread) {
	// Clearing the current unread marker so that it can be recalculated
	setCurrentUnreadMarker(null);
	setMessageManuallyMarkedUnread(new Date().getTime());
	return;
	}

	setMessageManuallyMarkedUnread(0);

	// We only care when a new lastReadTime is set in the report
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [report.lastReadTime]);

[$500] Chat - Inconsistency in displaying unread green line when navigating from thread #31026

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 7, 2023

melvin-bot commented on Nov 7, 2023

melvin-bot commented on Nov 7, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Nov 7, 2023

dummy-1111 commented on Nov 8, 2023

dummy-1111 commented on Nov 8, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

FitseTLT commented on Nov 8, 2023

Proposal

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

What is the root cause of that problem?

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

FitseTLT commented on Nov 8, 2023

66 remaining items

melvin-bot commented on Apr 12, 2024

melvin-bot commented on Apr 12, 2024

FitseTLT commented on Apr 12, 2024

MonilBhavsar commented on Apr 12, 2024

FitseTLT commented on Apr 12, 2024

MonilBhavsar commented on Apr 23, 2024

FitseTLT commented on Apr 23, 2024

MonilBhavsar commented on Apr 23, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions