Use new pendingEventList functionality from matrix-js-sdk

Update react-sdk to use `pendingEventOrdering`==`detached` instead of
`end`. Look for pending events in the pendingEvent list, and use
MatrixClient.cancelPendingEvent to, uh, cancel pending events.

src/Resend.js

@@ -32,18 +32,9 @@ module.exports = {
                 event: event
             });
         });
-        dis.dispatch({
-            action: 'message_resend_started',
-            event: event
-        });
     },
 
     removeFromQueue: function(event) {
-        MatrixClientPeg.get().getScheduler().removeEventFromQueue(event);
-        var room = MatrixClientPeg.get().getRoom(event.getRoomId());
-        if (!room) {
-            return;
-        }
-        room.removeEvents([event.getId()]);
-    }
+        MatrixClientPeg.get().cancelPendingEvent(event);
+    },
 };

src/components/structures/MatrixChat.js

@@ -702,7 +702,7 @@ module.exports = React.createClass({
         UserActivity.start();
         Presence.start();
         cli.startClient({
-            pendingEventOrdering: "end",
+            pendingEventOrdering: "detached",
             initialSyncLimit: this.props.config.sync_timeline_limit || 20,
         });
     },

src/components/structures/RoomView.js

@@ -213,11 +213,6 @@ module.exports = React.createClass({
                 this.setState({
                     hasUnsentMessages: this._hasUnsentMessages(this.state.room)
                 });
-            case 'message_resend_started':
-                this.setState({
-                    room: MatrixClientPeg.get().getRoom(this.props.roomId)
-                });
-                this.forceUpdate();
                 break;
             case 'notifier_enabled':
             case 'upload_failed':
@@ -397,9 +392,7 @@ module.exports = React.createClass({
 
     _getUnsentMessages: function(room) {
         if (!room) { return []; }
-        // TODO: It would be nice if the JS SDK provided nicer constant-time
-        // constructs rather than O(N) (N=num msgs) on this.
-        return room.timeline.filter(function(ev) {
+        return room.getPendingEvents().filter(function(ev) {
             return ev.status === Matrix.EventStatus.NOT_SENT;
         });
     },

src/components/structures/TimelinePanel.js

@@ -188,7 +188,7 @@ var TimelinePanel = React.createClass({
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
             this.setState({[statekey]: false});
-            this._onTimelineUpdated();
+            this._reloadEvents();
             return r;
         });
     },
@@ -268,7 +268,7 @@ var TimelinePanel = React.createClass({
         //
         // see https://github.com/vector-im/vector-web/issues/1035
         this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false)
-            .done(this._onTimelineUpdated);
+            .done(this._reloadEvents);
     },
 
     onRoomTimelineReset: function(room) {
@@ -305,12 +305,7 @@ var TimelinePanel = React.createClass({
         // ignore events for other rooms
         if (room !== this.props.room) return;
 
-        // Once the remote echo for an event arrives, we need to turn the
-        // greyed-out event black.  When the localEchoUpdated event is raised,
-        // the nested 'event' property within one of the events in
-        // _timelineWindow will have been replaced with the new event. So
-        // all that is left to do here is to make the message-panel re-render.
-        this.forceUpdate();
+        this._reloadEvents();
     },
 
 
@@ -558,16 +553,18 @@ var TimelinePanel = React.createClass({
         // In this situation, we don't really want to defer the update of the
         // state to the next event loop, because it makes room-switching feel
         // quite slow. So we detect that situation and shortcut straight to
-        // calling _onTimelineUpdated and updating the state.
+        // calling _reloadEvents and updating the state.
 
         var onLoaded = () => {
-            this._onTimelineUpdated();
+            this._reloadEvents();
 
             this.setState({timelineLoading: false}, () => {
                 // initialise the scroll state of the message panel
                 if (!this.refs.messagePanel) {
-                    // this shouldn't happen - _onTimelineUpdated checks we're
-                    // mounted, and timelineLoading is now false.
+                    // this shouldn't happen - we know we're mounted because
+                    // we're in a setState callback, and we know
+                    // timelineLoading is now false, so render() should have
+                    // mounted the message panel.
                     console.log("can't initialise scroll state because " +
                                 "messagePanel didn't load");
                     return;
@@ -593,13 +590,23 @@ var TimelinePanel = React.createClass({
         prom.done();
     },
 
-    _onTimelineUpdated: function() {
+    // handle the completion of a timeline load or localEchoUpdate, by
+    // reloading the events from the timelinewindow and pending event list into
+    // the state.
+    _reloadEvents: function() {
         // we might have switched rooms since the load started - just bin
         // the results if so.
         if (this.unmounted) return;
 
+        var events = this._timelineWindow.getEvents();
+
+        // if we're at the end of the live timeline, append the pending events
+        if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
+            events.push(... this.props.room.getPendingEvents());
+        }
+
         this.setState({
-            events: this._timelineWindow.getEvents(),
+            events: events,
             canBackPaginate: this._timelineWindow.canPaginate(EventTimeline.BACKWARDS),
         });
     },