Merge pull request #1353 from matrix-org/luke/feature-sticky-date-separators

Implement sticky date separators

package.json

@@ -73,6 +73,7 @@
     "react-addons-css-transition-group": "15.3.2",
     "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-sticky": "^6.0.1",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",

src/DateUtils.js

@@ -30,6 +30,18 @@ function getDaysArray() {
     ];
 }
 
+function getLongDaysArray() {
+    return [
+        _t('Sunday'),
+        _t('Monday'),
+        _t('Tuesday'),
+        _t('Wednesday'),
+        _t('Thursday'),
+        _t('Friday'),
+        _t('Saturday'),
+    ];
+}
+
 function getMonthsArray() {
     return [
         _t('Jan'),
@@ -96,6 +108,38 @@ module.exports = {
         });
     },
 
+    formatDateSeparator: function(date) {
+        const days = getDaysArray();
+        const longDays = getLongDaysArray();
+        const months = getMonthsArray();
+
+        const today = new Date();
+        const yesterday = new Date();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return _t('Today');
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return _t('Yesterday');
+        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return longDays[date.getDay()];
+        } else if (today.getTime() - date.getTime() < 365 * 24 * 60 * 60 * 1000) {
+            return _t('%(weekDayName)s, %(monthName)s %(day)s', {
+                weekDayName: days[date.getDay()],
+                monthName: months[date.getMonth()],
+                day: date.getDate(),
+                fullYear: date.getFullYear(),
+            });
+        } else {
+            return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s', {
+                weekDayName: days[date.getDay()],
+                monthName: months[date.getMonth()],
+                day: date.getDate(),
+                fullYear: date.getFullYear(),
+            });
+        }
+    },
+
     formatTime: function(date, showTwelveHour=false) {
         if (showTwelveHour) {
           return twelveHourTime(date);

src/components/structures/MessagePanel.js

@@ -61,9 +61,6 @@ module.exports = React.createClass({
         // for pending messages.
         ourUserId: React.PropTypes.string,
 
-        // true to suppress the date at the start of the timeline
-        suppressFirstDateSeparator: React.PropTypes.bool,
-
         // whether to show read receipts
         showReadReceipts: React.PropTypes.bool,
 
@@ -517,10 +514,10 @@ module.exports = React.createClass({
 
     _wantsDateSeparator: function(prevEvent, nextEventDate) {
         if (prevEvent == null) {
-            // first event in the panel: depends if we could back-paginate from
+            // First event in the panel always wants a DateSeparator
-            // here.
+            return true;
-            return !this.props.suppressFirstDateSeparator;
         }
+
         const prevEventDate = prevEvent.getDate();
         if (!nextEventDate || !prevEventDate) {
             return false;

src/components/structures/TimelinePanel.js

@@ -1147,7 +1147,6 @@ var TimelinePanel = React.createClass({
                           highlightedEventId={ this.props.highlightedEventId }
                           readMarkerEventId={ this.state.readMarkerEventId }
                           readMarkerVisible={ this.state.readMarkerVisible }
-                          suppressFirstDateSeparator={ this.state.canBackPaginate }
                           showUrlPreview={ this.props.showUrlPreview }
                           showReadReceipts={ this.props.showReadReceipts }
                           ourUserId={ MatrixClientPeg.get().credentials.userId }

test/components/structures/TimelinePanel-test.js

@@ -234,7 +234,6 @@ describe('TimelinePanel', function() {
             // 5 times, and we should have given up paginating
             expect(client.paginateEventTimeline.callCount).toEqual(5);
             expect(messagePanel.props.backPaginating).toBe(false);
-            expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
 
             // now, if we update the events, there shouldn't be any
             // more requests.
@@ -339,7 +338,6 @@ describe('TimelinePanel', function() {
         awaitScroll().then(() => {
             // we should now have loaded the first few events
             expect(messagePanel.props.backPaginating).toBe(false);
-            expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
 
             // back-paginate until we hit the start
             return backPaginate();
@@ -347,7 +345,6 @@ describe('TimelinePanel', function() {
             // hopefully, we got to the start of the timeline
             expect(messagePanel.props.backPaginating).toBe(false);
 
-            expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
             var events = scryEventTiles(panel);
             expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]);