[Due for payment 2025-02-19] [$250] Chat - New message marker is not displayed when the chat opened offline

[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: 9.0.90.1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/2778002
Issue reported by: Applause - Internal Team

Action Performed:

Preconditions: Two accounts needed, both gmail users. User A and User B signed in on different devices and sent some messages to each other in 1:1 chat.

1. User A: navigate away from the chat with User B
2. User B: send a message to User A
3. User A: make sure that new message was received, do not open the chat
4. User A: disable the internet connection and open the unread chat

Expected Result:

New message line is displayed above the new message when the unread chat is opened offline

Actual Result:

New message line is not displayed above the new message when the unread chat is opened offline. New message line appears when user enables the internet connection while viewing the chat

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6727730_1738174677714.Recording__356.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886672337192640227
• Upwork Job ID: 1886672337192640227
• Last Price Increase: 2025-02-04
• Automatic offers:
• nkdengineer | Contributor | 106010390

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-29 20:45:40 UTC.

Proposal

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

Chat - New message marker is not displayed when the chat opened offline

What is the root cause of that problem?

We only check for shouldDisplayNewMarker starting from earliestReceivedOfflineMessageIndex

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

Lines 326 to 329 in 2e04450

	const startIndex = earliestReceivedOfflineMessageIndex ?? 0;
	// Scan through each visible report action until we find the appropriate action to show the unread marker
	for (let index = startIndex; index < sortedVisibleReportActions.length; index++) {

but when the report is opened while offline the lastOnlineAt is never set so lastOnlineAt is undefinedwasActionCreatedWhileOffline will return true early here

App/src/libs/ReportActionsUtils.ts

Lines 1867 to 1869 in 2e04450

	if (!lastOnlineAt) {
	return true;
	}

so it will assume other actions are created while offline so earliestReceivedOfflineMessageIndex will have a wrong value

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

The main purpose of checking if message was created while offline is to mark message received while a user was viewing a report offline and turned online but the message was created while the user was offline but if lastOnlineAt is not set it means the report is opened while offline and never turned online so we don't need to check whether the message was received while offline so remove this code

App/src/libs/ReportActionsUtils.ts

Lines 1866 to 1869 in 2e04450

	// The user was never online.
	if (!lastOnlineAt) {
	return true;
	}

change to

if (!lastOfflineAt || !lastOnlineAt) {
        return false;
    }

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A

What alternative solutions did you explore? (Optional)

To avoid unnecessary wasMessageReceivedWhileOffline calculation we can early return 0 here if either lastOnlineAt or lastOfflineAt don't exist because in both cases we don't want the calculation

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

Lines 260 to 261 in 2e04450

	const earliestReceivedOfflineMessageIndex = useMemo(() => {
	// Create a list of (sorted) indices of message that were received while offline

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@jjcoffee - can you please review if this proposal will fix the issue? Thanks!

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-05 03:29:21 UTC.

Proposal

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

New message line is not displayed above the new message when the unread chat is opened offline. New message line appears when user enables the internet connection while viewing the chat

What is the root cause of that problem?

Here's the logic to show the unread marker

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

Lines 283 to 286 in 582a892

	const isEarliestReceivedOfflineMessage = index === earliestReceivedOfflineMessageIndex;
	if (isEarliestReceivedOfflineMessage && !isNextMessageUnread) {
	return true;
	}

Let's say there's a new message from user B and user A hasn't been seen yet.

If user A open the chat with user B while online, lastOnlineAt is set to current time => this condition is false => the earliestReceivedOfflineMessageIndex will be the the last message (the new one), so we can see the unread marker

But if user A open chat while offline, lastOnlineAt is set to undefined => this condition is true for every action => the earliestReceivedOfflineMessageIndex will be the the first message (the CREATED message), so we don't see the unread marker

The problem here is we're using the component state, that would be reset if users go to other chat. And in wasActionCreatedWhileOffline, we should return false when lastOnlineAt is undefined.

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

We should use Onyx state to store lastOfflineAt then update it only when the network change from online to offline. For lastOnlineAt we can keep the current logic.

In lib/actions/Network.ts

let isOffline: boolean | undefined;


let preferredLocale;

Onyx.connect({
    key: ONYXKEYS.NVP_PREFERRED_LOCALE,
    callback: (value) => {
        if (!value) {
            return;
        }
        preferredLocale = value;
    },
});

Onyx.connect({
    key: ONYXKEYS.NETWORK,
    callback: (val) => {
        if(!val?.lastOfflineAt){
            setNetworkLastOffline(DateUtils.getLocalDateFromDatetime(preferredLocale))
        }

        const newIsOffline = val?.isOffline || val?.shouldForceOffline
        if(newIsOffline && isOffline === false){
            setNetworkLastOffline(DateUtils.getLocalDateFromDatetime(preferredLocale))
        }
        isOffline = newIsOffline
    },
});

function setNetworkLastOffline(lastOfflineAt: Date) {
    Onyx.merge(ONYXKEYS.NETWORK, {lastOfflineAt});
}

then in useNetworkWithOfflineStatus

   const prevIsOffline = usePrevious(isOffline);
    const [network] = useOnyx(ONYXKEYS.NETWORK)
    const {preferredLocale} = useLocalize();

    // The last time/date the user went/was offline. If the user was never offline, it is set to undefined.
    const lastOfflineAt = useRef(isOffline ? network?.lastOfflineAt : undefined);

    // The last time/date the user went/was online. If the user was never online, it is set to undefined.
    const lastOnlineAt = useRef(isOffline ? undefined : DateUtils.getLocalDateFromDatetime(preferredLocale));

    useEffect(() => {
        if (isOffline && !prevIsOffline) {
            lastOfflineAt.current = DateUtils.getLocalDateFromDatetime(preferredLocale);
        } 

        if(!isOffline && prevIsOffline){
            lastOnlineAt.current = DateUtils.getLocalDateFromDatetime(preferredLocale);
        }
    }, [isOffline, preferredLocale, prevIsOffline]);  

Finally, update these lines to

// The user never was never offline.
    if (!lastOfflineAt || !lastOnlineAt) {
        return false;
    }

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is UI issue so no need for unit test

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

POC

POC.mov