From 75f8765f886144ab7d1a7b8c28ef93963dd26243 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 21 Mar 2016 16:49:07 +0000
Subject: [PATCH] Add 'cancel all' option to 'unsent messages' bar

Also, make sure we hide said bar when unsent messages are cancelled.
---
 src/Resend.js                              |  4 ++++
 src/components/structures/RoomStatusBar.js | 15 ++++++++++++---
 src/components/structures/RoomView.js      |  9 +++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/Resend.js b/src/Resend.js
index b1df1eeb4b..ecf504e780 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -36,5 +36,9 @@ module.exports = {
 
     removeFromQueue: function(event) {
         MatrixClientPeg.get().cancelPendingEvent(event);
+        dis.dispatch({
+            action: 'message_send_cancelled',
+            event: event
+        });
     },
 };
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index da895b9332..530ea4699f 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/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>
             );
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 423e98055e..e6da12fdc7 100644
--- a/src/components/structures/RoomView.js
+++ b/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}
                 />