Implement Date dividers within chats to distinguish `Today`, `Yesterday` and other dates.

[johnmlee101]

Feature Request: Have visible indicators when chats change days, similar to how Slack separates individual days with a bar Problem: When reading chat history, I had a hard time finding out where a discussion started a few days ago, and it required a bit of scanning each chat to see when that day occured. Solution: Add an indicator between each day of the week that changes between messages, giving indication when that message was sent in an easy way.

Slack

Whatsapp

Original report: https://expensify.slack.com/archives/C01GTK53T8Q/p1682528022290149

cc @puneetlath @flodnv

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01efa7bb6bd1169217
• Upwork Job ID: 1663961128511111168
• Last Price Increase: 2023-05-31

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[johnmlee101]

We had this detailed in our Mentions doc

[puneetlath]

Here's what we have in the mentions doc:

• In order to make more space for handles, we will shorten the timestamp to be just the time (e.g. reduce it from “Yesterday at 10:57 AM” to just “10:57 AM”).
• We will then show the date using a date label, which signifies the date between chat messages in the chat body and floats above the content at the top of the screen, similar to how Slack and WhatsApp do.

[bionanek]

Hi there! I'm Jakub from Callstack - expert contributor group - and I would like to take a look at this task ☺️

[puneetlath]

Cool! Looking forward to your proposal.

[OlimpiaZurek]

Hi. I'm Olimpia from Callstack - expert contributor group - I would like to take over this task from Jakub :-)

[OlimpiaZurek]

@puneetlath Could you give me permissions to access the mention doc? Thanks!

[OlimpiaZurek]

And are there any figma designs that I can use to get colors, pixels, etc?

[puneetlath]

@OlimpiaZurek shared the Figma mock with you: https://www.figma.com/file/WtqVXdvroIWPLj3kgFI1nM/Mentions?type=design&node-id=569%3A22196&t=lf8A82kBsxrSGPfL-1

[puneetlath]

@OlimpiaZurek when do you think you'll be able to post a proposal?

[OlimpiaZurek]

@puneetlath I should be ready with a proposal next week. It's hard to say which day exactly because I'm also working on another issues. But I've already started working on a solution and have made a lot of progress. There are a few more things I need to figure out before I can post the proposal.

[puneetlath]

Ok great. Looking forward to it.

[puneetlath]

@OlimpiaZurek do you have an updated ETA?

[OlimpiaZurek]

Since I had to finish work on another topic, I went back to work on this one today, so I probably won't be ready with a proposal this week (as we also have a workshops on Friday). I'll keep you updated.

[puneetlath]

Ok. I'd love to get this done by the end of the month if possible.

[burczu]

Hey! It's Bartek from Callstack - expert contributor group - I'll take this issue over from Olimpia.

[puneetlath]

@burczu do you have an ETA on a proposal?

[burczu]

@puneetlath I'm on it right now and should post it here today.

[burczu]

Proposal

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

We want to have visible indicators when chats change days while scrolling, similar to how Slack separates individual days with bar.

What is the root cause of that problem?

When reading chat history, it is a hard time finding out where a discussion started a few days ago, and it required a bit of scanning each chat to see when that day occurred.

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

We decided to add a floating indicator on the top of the chat list that shows where, in terms of date/time, we are in the chat. Additionally, we need to add static indicators that divides messages that were posted within the same day. Please see the example image below:

1. To implement the floating indicator we need to make some changes in the ReportActionsList component:

   • first we need to implement the onViewableItemsChanged event handler of the InvertedFlatList used in this component to render the chat items - it will help determining the index of the top item that is viewable in the viewport
   • having the index, we can get an appropriate item from the sortedReportActions array, and use its created property as a source of the date that will be displayed on the floating indicator (we need to do it inside the useEffect to change the date on the indicator everytime the index is changing while we scroll)
   • at last, we need to create a new component: ReportDateIndicator that will be responsible for displaying the floating indicator - it will show up everytime we scroll outside the very bottom of the chat

2. To implement the static indicators/dividers we need to amend two report components: ReportActionsList, ReportActionItem:

   • in the ReportActionItem component we will add a prop called showDateIndicator - if its value is true we will re-use the ReportDateIndicator component here, placing it before the item itself
   • in the ReportActionsList we would add a method called shouldDisplayStaticDateIndicator that will determine (by comparing formatted creation dates of current vs previous report item) if we need to show the static indicator/divider or not
   • in the renderItem method of the ReportActionList component we will pass the result of calling the shouldDisplayStaticDateIndicator method via showDateIndicator prop of the ReportActionItem component

3. The above changes are core ones to implent the requested feature. Additionally we will also need to make some changes in DateUtils helpers, e.g. we need to be able to display dates in the format of 5:30 PM for messages and for the dividers, we need to show it like Yesterday or May 31, etc.

4. Additionally we will need to add some styles that will allow making the indicator floating on the top (position: absolute, zIndex: 1, top, left, right set to 0).

Important: while working on this proposal we encountered an issue with the onViewableItemsChanged event handler that occurs only on the web - it seems like it has a bug and provides incorrect list of visible items. This gives us false positive results while determining the index of the top element of the list. To fully implement this proposal, we will need to spend some additional time trying to fix this issue, and perhaps making some additional PR's to the react-native-web repository (original or our forked one).

What alternative solutions did you explore? (Optional)

n/a

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.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @thesahindia (Internal)

[puneetlath]

@thesahindia what do you think of the proposal?

[thesahindia]

@thesahindia what do you think of the proposal?

It looks good to me.

Important: while working on this proposal we encountered an issue with the onViewableItemsChanged event handler that occurs only on the web - it seems like it has a bug and provides incorrect list of visible items. This gives us false positive results while determining the index of the top element of the list. To fully implement this proposal, we will need to spend some additional time trying to fix this issue, and perhaps making some additional PR's to the react-native-web repository (original or our forked one).

I think we should start by making a new issue to handle this case first.

[burczu]

Not overdue - still discussing the proposal.

[puneetlath]

Moving to weekly. We have more urgent things to handle.

[burczu]

not overdue

[puneetlath]

Hey @burczu. I'm not sure what's on your plate right now, but do you think you'll be able to pick this one back up next week?

[burczu]

Hey @puneetlath @thesahindia I think I can get back to this issue now. Regarding this comment - what we want to do here? Are we going to create another issue and work on it first?

[burczu]

Hey @burczu. I'm not sure what's on your plate right now, but do you think you'll be able to pick this one back up next week?

@puneetlath Oh, I've just noticed your comment after I posted mine ;)

[puneetlath]

Hey @puneetlath @thesahindia I think I can get back to this issue now. Regarding https://github.com/Expensify/App/issues/18101#issuecomment-1574150090 - what we want to do here? Are we going to create another issue and work on it first?

@burczu yes, let's fix that. Are you able to create GH issues in this repo or do you need me to?

[burczu]

@puneetlath please do it for me because I think it will be hard to follow the standard issue template here...

[burczu]

Daily update: I think I identified the root causes of the issue with onViewableItemsChanged:

1. The getItemLayout method implementation in the BaseInvertedFlatList seem to be incorrect - fixing this should help with showing correct date divider while scrolling, but it may be hard cause we have dynamic item height...
2. Also it looks like there is an issue in the ViewableHelper in our branch of react-native-web that is related to the inverted property of VirtualizedList - checked that when getItemLayout is disabled, the date dividers works correct but in an inverted direction

I'll continue working on this tomorrow.

[puneetlath]

@burczu sorry for the delay. Issue is here: https://github.com/Expensify/App/issues/21811

If you comment on it, I can assign you. @thesahindia do you also want to be C+ on that?

[burczu]

@puneetlath thanks! comment added

[thesahindia]

@thesahindia do you also want to be C+ on that?

I don't have the capacity right now so I will pass on that.

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.

[burczu]

Hey @puneetlath! Now that the change that was blocking this issue is merged into Expensify/react-native-web repo, we need this change to be released and the new version be imported in the Expensify/App. I'm not sure what is the process to do so?

[puneetlath]

@burczu I think you should be able to just go ahead and open a PR to update the react-native-web version in App. Similar to this: https://github.com/Expensify/App/pull/15663/files

[burczu]

@puneetlath Unfortunately, the last version of Expensify/react-native-web I can install is 0.18.16 and it does not contain changes introduced by Arek's PR. There is also some mess in this project, because the last git tag present there is 0.18.3 so it does not reflect the reality...

[puneetlath]

@burczu based on your comment in the other issue, it sounds like we should put this on hold for the react-native-web version upgrade, is that right?

[burczu]

Hey @puneetlath! Sorry for the late answer (I've already answered to your similar question in the PR). In general I don't know if this upgrade or switch to use the upstream version will happen anytime soon (@roryabraham may say more about it, I believe). I think we should go on with these changes now.

[burczu]

As the related issue is put on hold now, we should put on hold this one too, I believe.

[roryabraham]

HOLDing for https://github.com/Expensify/App/issues/16660

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.

[puneetlath]

Still on hold.