[HOLD for payment 2024-05-30] [$500] Desktop - Chat isn't marked as read if user clicks on notification from Notification Center

[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.4.28-0
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:

1. Open Desktop App
2. Login as User A
3. From the second device with account of User B sent a message to User A
4. User A received Notification
5. Wait until Notification goes to the Notification center
6. Open Notification center and click on this received notification

Expected Result:

User goes to the correct chat, new messages are marked as read and this chat is no longer marked in bold

Actual Result:

Chat is marked in bold

If User clicks on a notification BEFORE it goes to the notification center, the chat will be marked as read.

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

Bug6347879_1705685269809.Desktop-Notification-in-center-message-not-read.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011a42b3684380c039
• Upwork Job ID: 1748411136068030464
• Last Price Increase: 2024-01-19
• Automatic offers:
• ishpaul777 | Reviewer | 28118184
• wildan-m | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[mirimichaelson]

Proposal

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

We want to make sure the chat is mark ed as read when messages have gone into the Notification Center and are clicked from there.

What is the root cause of that problem?

The root of the problem is that the App is not in the ‘Visible’ state when the Notification Center message is clicked, by virtue of the Notification Centre being in front of it. There’s a small if statement in ReportActionsList.js which ensures that if the app isn’t visible (Visibility.isVisible()), messages will not be marked as read, and therefore will remain bold. (Even if they've been clicked on through the Notification Center. The app being visible happens just a little too late.)

if (Visibility.isVisible() && scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD) {
     Report.readNewestAction(report.reportID);
} else {
     readActionSkipped.current = true;
}

Checking the visibility & preventing messages from being marked as read is useful in some cases, ie receiving messages if you’re afk, but unhelpful in multiple other cases where the same bug shows up;

1. You click on a notification within the Notification Center

2. Click on a notification before it goes into the Notification Center, if you have another tab open in front of Expensify (same bug as this ticket)

3. You’re already chatting to someone and receive new messages. The bolding of the text doesn’t go away, until you click to another chat and back again. So again, the same bug. (See the attached video)
   Screen Recording 2024-01-20 at 04.10.11.mov.zip

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

This is the first bug I’m looking into, so I don’t know exactly what your desired behaviour is. I have some suggestions, so I'm game to listen to what makes the most sense to you in terms of chat functionality :) !

1. Add a visibility check to the useEffect that runs this code:
   This does not cause any extra re-runs, and fixes the problem.

What alternative solutions did you explore? (Optional)

1. The simple code fix is removing isVisible , although this will mean that messages will be marked as read, even if the user is viewing other apps in front of it. However, this will only happen if they are on the chat page already, and they'll open it up first thing.

2. Adding to the functionality that makes chats visible:

Right now, the functionality for updating to the ‘Read’ state requires clicking on a message in the sidebar, (although this doesn't work for the chat you're currently on.). An option is adding additional functionality so that if a user clicks within their chat, and/or on the chat title in the left hand sidebar, it will trigger the useEffect to update, and mark messages as read.

Let me know what you think! :)

[melvin-bot]

📣 @mirimichaelson! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[mirimichaelson]

Contributor details
Your Expensify account email: miriammichaelson@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01cce98dffb320182a

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[JeremyCroff]

Proposal

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

The unread status styling of a report does not disappear when clicking on the OS notification when it's docked in the Notification Center.

What is the root cause of that problem?

At https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionsList.js#L211 The utility that exposes the Visibility has a stale reference to the document state. Since it's returning false even when it is visible, it won't call the update last read timestamp call keeping it unread.

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

If you replace the Visibility.isVisible() with the actual document.visibilityState === 'visible', it will behave as expected. I believe the stale reference does not reference the actual electron window document.

What alternative solutions did you explore? (Optional)

I explored removing the visibility, but this impact the user experience. Also looked at other window methods such as hidden, and focus.