Add 'cancel all' option to 'unsent messages' bar

src/Resend.js

@@ -36,5 +36,9 @@ module.exports = {
 
     removeFromQueue: function(event) {
         MatrixClientPeg.get().cancelPendingEvent(event);
+        dis.dispatch({
+            action: 'message_send_cancelled',
+            event: event
+        });
     },
 };

src/components/structures/RoomStatusBar.js

@@ -49,6 +49,10 @@ module.exports = React.createClass({
         // 'unsent messages' bar
         onResendAllClick: React.PropTypes.func,
 
+        // callback for when the user clicks on the 'cancel all' button in the
+        // 'unsent messages' bar
+        onCancelAllClick: React.PropTypes.func,
+
         // callback for when the user clicks on the 'scroll to bottom' button
         onScrollToBottomClick: React.PropTypes.func,
 
@@ -223,9 +227,14 @@ module.exports = React.createClass({
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
                         <a className="mx_RoomStatusBar_resend_link"
-                            onClick={ this.props.onResendAllClick }>
-                        Resend all now
-                        </a> or select individual messages to re-send.
+                          onClick={ this.props.onResendAllClick }>
+                            Resend all
+                        </a> or <a 
+                          className="mx_RoomStatusBar_resend_link"
+                          onClick={ this.props.onCancelAllClick }>
+                            cancel all
+                        </a> now. You can also select individual messages to
+                        resend or cancel.
                     </div>
                 </div>
             );

src/components/structures/RoomView.js

@@ -214,6 +214,7 @@ module.exports = React.createClass({
         switch (payload.action) {
             case 'message_send_failed':
             case 'message_sent':
+            case 'message_send_cancelled':
                 this.setState({
                     hasUnsentMessages: this._hasUnsentMessages(this.state.room)
                 });
@@ -501,6 +502,13 @@ module.exports = React.createClass({
         });
     },
 
+    onCancelAllClick: function() {
+        var eventsToResend = this._getUnsentMessages(this.state.room);
+        eventsToResend.forEach(function(event) {
+            Resend.removeFromQueue(event);
+        });
+    },
+
     onJoinButtonClicked: function(ev) {
         var self = this;
 
@@ -1209,6 +1217,7 @@ module.exports = React.createClass({
                 atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
                 hasActiveCall={inCall}
                 onResendAllClick={this.onResendAllClick}
+                onCancelAllClick={this.onCancelAllClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
                 />