Add a "last unread" indicator for reports

If you haven’t already, check out our contributing guidelines for onboarding!

---

Platform - version: web, ios, android, desktop - version number Version 1.0.1-444 (1.0.1-444)

Action Performed:

• Create a group chat in e.cash desktop, web, ios, android
• Send a message to the group chat
• Go offline
• Come back to the chat and look for the last message you read
• Create a marker for responses to a thread that happened since the last time you read the thread.

Expected Result:

• User should see a new message marker in all chat threads - even non-group chats
• The new message marker needs to have a height of 0 so it can fit nicely between the chats

Actual Result:

• At this time, the only method to see the last read message is looking at the time stamp.

• Currently, the only method to determine the last message you’ve read is by the date of the messages

And some guidelines for a solution in the code:

UnreadActionIndicator

This simple component will render an <Animated.View /> as a horizontally-oriented flexbox containing:

• A <Text /> component containing the word “new”
• An empty <View/> with a width but no height, and a green borderBottom (AKA a horizontal rule in React Native).

It should have a very simple animation to fade out when being hidden.

ReportActionsView

We need to make sure that the last unread comment on the report remains unread until the user leaves the report and comes back. We’ll start by writing a new function called recordLastUnreadAction. It will grab the lastUnreadAction from the report. If none is found, we’ll use the highest visible sequence number, just like recordMaxAction does now.

Then we’ll rename recordMaxAction to recordMaxVisibleAction, and replace all uses of recordMaxAction with recordLastUnreadAction, except for this one, which is triggered when an inactive report becomes active again. In that case, we’ll call scrollToAction with the sequence number of the last unread action so that we display the last unread comment in the report, then call recordMaxVisibleAction.

We’ll then create a new function called insertUnreadIndicator, which will inject an object with {type: ‘unreadIndicator’} into the sortedReportAction array in the position immediately following the lastUnreadAction.

Then we’ll update renderItem to check the type of the item, and if it is unreadIndicator, it will render an <UnreadActionIndicator /> instead of a <ReportActionItem />. In markAllRead, we’ll trigger the hide animation on the <UnreadActionIndicator />, then when it’s completed remove it from the sortedReportActions array.

[lucas-neuhaus-dev]

Do we need to “get” the unreadActionCount I think it should just be attached to the report object?

Yeah, but we still have to write a little function to get it, since ONYXKEYS.COLLECTION.REPORT returns an array with all the reports. But the name is because I was actually returning this value from the function, but I am not anymore. I’ll think of something better. Below is how I extracted the unreadActionCount:

this.unreadActionCount = _.find(this.props.reports, report => (
      report.reportID === this.props.reportID
)).unreadActionCount;

I think FlatList having a dynamic height items could also make this difficult to do.

It does. I did some tests and it misses the action index by a decent margin. The other way I can think of achieving this would be something like this. Try to calculate the height of each item on render time, do some calculations and call FlatList.scrollToOffset().

Yes so this is a practice that will end soon since we are switching to react-navigation the initial motivation as I understand it was so that these reports would get “pre-rendered” and make switching between them faster.

I see, thanks for the explanation.

[shawnborton]

Awesome, thanks for your feedback though and working through the mockups with me!