From afadb23f89e3dcaf3ce35de2619172c741704542 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 21 Dec 2015 10:46:32 +0000
Subject: [PATCH 1/2] Fix bug with date separator flashing up on scrollback

Refactor the event-tile generation loop to go forwards rather than backwards,
which makes it easier to figure out whether we are displaying a continuation of
the previous event, and whether we need a date separator.

Also only display the date separator at the top of the room if there's no more
scrollback to be shown.

This fixes vector-im/vector-web#431
---
 src/components/structures/RoomView.js | 61 +++++++++++++++------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e7b97021df..aafc9b8906 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -399,6 +399,12 @@ module.exports = React.createClass({
         }
     },
 
+    // return true if there's more messages in the backlog which we aren't displaying
+    _canPaginate: function() {
+        return (this.state.messageCap < this.state.room.timeline.length) ||
+            this.state.room.oldState.paginationToken;
+    },
+
     onResendAllClick: function() {
         var eventsToResend = this._getUnsentMessages(this.state.room);
         eventsToResend.forEach(function(event) {
@@ -681,7 +687,10 @@ module.exports = React.createClass({
             return ret;
         }
 
-        for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
+
+        var prevEvent = null; // the last event we showed
+        var startIdx = Math.max(0, this.state.room.timeline.length-this.state.messageCap);
+        for (var i = startIdx; i < this.state.room.timeline.length; i++) {
             var mxEv = this.state.room.timeline[i];
 
             if (!EventTile.haveTileForEvent(mxEv)) {
@@ -694,49 +703,45 @@ module.exports = React.createClass({
                 }
             }
 
+            // is this a continuation of the previous message?
             var continuation = false;
-            var last = false;
-            var dateSeparator = null;
-            if (i == this.state.room.timeline.length - 1) {
-                last = true;
-            }
-            if (i > 0 && count < this.state.messageCap - 1) {
-                if (this.state.room.timeline[i].sender &&
-                    this.state.room.timeline[i - 1].sender &&
-                    (this.state.room.timeline[i].sender.userId ===
-                        this.state.room.timeline[i - 1].sender.userId) &&
-                    (this.state.room.timeline[i].getType() ==
-                        this.state.room.timeline[i - 1].getType())
+            if (prevEvent !== null) {
+                if (mxEv.sender &&
+                    prevEvent.sender &&
+                    (mxEv.sender.userId === prevEvent.sender.userId) &&
+                    (mxEv.getType() == prevEvent.getType())
                     )
                 {
                     continuation = true;
                 }
-
-                var ts0 = this.state.room.timeline[i - 1].getTs();
-                var ts1 = this.state.room.timeline[i].getTs();
-                if (new Date(ts0).toDateString() !== new Date(ts1).toDateString()) {
-                    dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
-                    continuation = false;
-                }
             }
 
-            if (i === 1) { // n.b. 1, not 0, as the 0th event is an m.room.create and so doesn't show on the timeline
-                var ts1 = this.state.room.timeline[i].getTs();
-                dateSeparator = <li key={ts1}><DateSeparator ts={ts1}/></li>;
+            // do we need a date separator since the last event?
+            var ts1 = mxEv.getTs();
+            if ((prevEvent == null && !this._canPaginate()) ||
+                (prevEvent != null &&
+                 new Date(prevEvent.getTs()).toDateString() !== new Date(ts1).toDateString())) {
+                var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
+                ret.push(dateSeparator);
                 continuation = false;
             }
 
+            var last = false;
+            if (i == this.state.room.timeline.length - 1) {
+                // XXX: we might not show a tile for the last event.
+                last = true;
+            }
+
             var eventId = mxEv.getId();
-            ret.unshift(
+            ret.push(
                 <li key={eventId} ref={this._collectEventNode.bind(this, eventId)} data-scroll-token={eventId}>
                     <EventTile mxEvent={mxEv} continuation={continuation} last={last}/>
                 </li>
             );
-            if (dateSeparator) {
-                ret.unshift(dateSeparator);
-            }
-            ++count;
+
+            prevEvent = mxEv;
         }
+
         return ret;
     },
 

From 360806a8f1958f52eb92dfdf96829e34d5212a05 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <github@rvanderhoff.org.uk>
Date: Tue, 22 Dec 2015 11:04:39 +0000
Subject: [PATCH 2/2] RoomView: add whitespace for disambiguation

---
 src/components/structures/RoomView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index aafc9b8906..0f02085638 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -689,7 +689,7 @@ module.exports = React.createClass({
 
 
         var prevEvent = null; // the last event we showed
-        var startIdx = Math.max(0, this.state.room.timeline.length-this.state.messageCap);
+        var startIdx = Math.max(0, this.state.room.timeline.length - this.state.messageCap);
         for (var i = startIdx; i < this.state.room.timeline.length; i++) {
             var mxEv = this.state.room.timeline[i];