[HOLD for payment 2023-11-13] [HOLD for payment 2023-11-09] Unread message - When delete unread message green line blinks and goes to the next message

[lanitochka17]

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.94-0
Reproducible in staging?: Y
Reproducible in production?: N
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. Go to staging.new.expensify.com
2. Navigate to conversation with messages history
3. Mark any message in the middle of the conv history as Unread
4. Delete the same message

Expected Result:

Green line for the unread message should disappear when delete the message

Actual Result:

When delete unread message green line blinks and goes to the next message

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6259147_1698830750664.Recording__1316.mp4

View all open jobs on GitHub

[melvin-bot]

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

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @grgia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[grgia]

Maybe related:
#29860

[situchan]

@roksanaz please check this

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[Beamanator]

It looks like this is still happening on staging, even after #30712

[Beamanator]

This feels like such an edge case, it doesn't make much sense to me to have this block deploy

[situchan]

@roksanaz you mean #30485 caused this blinking issue?

[s-alves10]

@situchan @MonilBhavsar

I've found the root cause of this issue. 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]);

In order to fix this issue, I updated

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));
                if (!messageManuallyMarkedUnread) {
                    shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID();
                }
            } else {
                shouldDisplay = reportAction.reportActionID === unreadMarker;
            }
            return shouldDisplay;
        },
        [report.lastReadTime, sortedReportActions, 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 unreadMarker = null;
        _.each(sortedReportActions, (reportAction, index) => {
            if (!shouldDisplayNewMarker(unreadMarker, reportAction, index)) {
                return;
            }
            unreadMarker = reportAction.reportActionID;
        });
        setCurrentUnreadMarker(unreadMarker);
    }, [shouldDisplayNewMarker]);

And I think we should fix the issue mentioned #30485 (comment)

cc @roksanaz

[s-alves10]

I'm curious why the below line of code is needed

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

Line 149 in 9cecdfa

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

Looking at the comment, this state(messageManuallyMarkedUnread) looks like no longer needed.

I am expecting C+ team's feedback. Thank you in advance

[roksanaz]

@roksanaz you mean #30485 caused this blinking issue?

@situchan When I commented out the changes from #30485, the green line disappeared, so that's my guess. But it might be more complicated, I didn't investigate it thoroughly.

[situchan]

@roksanaz yes, I confirmed after that question and commented on that issue.
That's why @s-alves10 (author of that PR) proposed fix above.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.95-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Revert "27456 Chat - The green line is displayed chaotically at the recipient" #30712

If no regressions arise, payment will be issued on 2023-11-13. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@grgia] The PR that introduced the bug has been identified. Link to the PR:
• [@grgia] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@grgia] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@grgia] Determine if we should create a regression test for this bug.
• [@grgia] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@maddylewis] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[maddylewis]

@grgia - can you confirm if any payment is required for this one? I'm not seeing a contributor/C+ assigned to this issue.

[maddylewis]

asked here - https://expensify.slack.com/archives/C01SKUP7QR0/p1699649879381729

[melvin-bot]

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

[maddylewis]

hey @jliexpensify - i dropped BZ team so I'm going to un-assign myself from this issue. I've asked if there's any payment required for this one here, but there might not be any action required by a BZ team member.

i would bump that slack thread just to be certain, but this might have been resolved on a separate issue?

[jliexpensify]

Confirmed the payment here. Going to close this as Payment is being handled in #27456

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.