[HOLD for payment 2024-04-03] HIGH: [Reliability] [$500] Unread fevicon does not show for new messages / unread messages

[m-natarajan]

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.4.51-3
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: @AndrewGable
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710193817230399

Action Performed:

1. Sign in to a account as user A
2. Sign in to another account in another device as B
3. Send a message from B to A

Expected Result:

Fevicon should display unread icon

Actual Result:

Does not show

Workaround:

unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.2850.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011928bada81510714
• Upwork Job ID: 1768019508229373952
• Last Price Increase: 2024-03-13
• Automatic offers:
• situchan | Reviewer | 0
• gijoe0295 | Contributor | 0

[melvin-bot]

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

[gijoe0295]

Proposal

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

Unread fevicon does not show for new messages / unread messages.

What is the root cause of that problem?

This is about module importing in JS. In UnreadIndicatorUpdater, we used export default to export function:

App/src/libs/UnreadIndicatorUpdater/index.ts

Line 12 in 34930fe

export default function getUnreadReportsForUnreadIndicator(reports: OnyxCollection<Report>, currentReportID: string) {

When we used import UnreadIndicatorUpdater from './libs/UnreadIndicatorUpdater' in Expensify.tsx, it only imported the exported function, not executed the top-level code in the module including Onyx.connect:

App/src/Expensify.tsx

Line 33 in 34930fe

import UnreadIndicatorUpdater from './libs/UnreadIndicatorUpdater';

This has happened since we migrated Expensify to TS.

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

We should use import './libs/UnreadIndicatorUpdater' just like we did here:

App/src/Expensify.tsx

Line 29 in 34930fe

import './libs/Notification/PushNotification/subscribePushNotification';

What alternative solutions did you explore? (Optional)

NA

[situchan]

I'd like to review this as C+ since I have context while reviewing similar issues:

• MEDIUM: [$500] Unread indicator is showing in the fevicon even though there is nothing in LHN #31276
• LOW: [$500] Unread notification in fevicon does not update when the user is in another tab #32225

[melvin-bot]

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

[melvin-bot]

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

[askavyblr]

Proposal

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

Unread favicon does not show for new messages

What is the root cause of that problem?

We need to update unreadReports and sync

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

App/src/libs/UnreadIndicatorUpdater/index.ts

Line 42 in 13f8bc0

const unreadReports = getUnreadReportsForUnreadIndicator(allReports, currentReportID);

What alternative solutions did you explore? (Optional)

N/A

[jeremy-croff]

Proposal

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

The favicon for unread is missing! Great catch btw

What is the root cause of that problem?

This is a regression from the typescript migration: #25231
There is functional difference between this and javascript. Changing to the previous javascript file mitigates this issue.

I believe this is a case of "Side effect imports" to understand the issue in depth.
Typescript has to be configured in order to preserve unused side effects, but without that, it will clean it up unused imports as an optimization. This is different from JS.

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

I agree with the previous post that we should import everything with import './libs/UnreadIndicatorUpdater' in the Expensify.tsx file to execute all the side effects. I just wanted to mention the Root Cause Analysis (RCA) and link the regression. We can also eliminate the lint exclusions // eslint-disable-next-line @typescript-eslint/no-unused-vars.

Confirmed this solution with the docs from https://www.typescriptlang.org/docs/handbook/2/modules.html

What alternative solutions did you explore? (Optional)

[Santhosh-Sellavel]

I'd like to review this as C+ since I have context while reviewing similar issues:

• MEDIUM: [$500] Unread indicator is showing in the fevicon even though there is nothing in LHN #31276
• LOW: [$500] Unread notification in fevicon does not update when the user is in another tab #32225

@garrettmknight Please assign @situchan as C+ here, I'll unassign myself here.