From 2160440ff14c957e87a7dcfdebe35368699a24fd Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 21 Jul 2015 18:05:22 +0100
Subject: [PATCH] Add and impl resend button. Update UI when failing to send
 messages.

---
 skins/base/css/molecules/MessageTile.css     |  4 ++++
 skins/base/views/molecules/MessageTile.js    |  9 ++++++--
 src/controllers/molecules/MessageComposer.js |  4 ++++
 src/controllers/molecules/MessageTile.js     | 22 ++++++++++++++++++++
 src/controllers/organisms/RoomView.js        |  2 ++
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css
index 9b548c5e9..45882de6d 100644
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@@ -74,3 +74,7 @@ limitations under the License.
 .mx_MessageTile_highlight {
     color: #00f;
 }
+
+.mx_MessageTile_msgOption {
+    float: right;
+}
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index 7eca20305..572ee0d52 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@@ -57,8 +57,7 @@ module.exports = React.createClass({
             mx_MessageTile_continuation: this.props.continuation,
         });
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
-        var avatar;
-        var sender;
+        var avatar, sender, resend;
         if (!this.props.continuation) {
             avatar = (
                 <div className="mx_MessageTile_avatar">
@@ -67,10 +66,16 @@ module.exports = React.createClass({
             );
             sender = <SenderProfile mxEvent={this.props.mxEvent} />;
         }
+        if (this.props.mxEvent.status === "not_sent" && !this.state.resending) {
+            resend = <button className="mx_MessageTile_msgOption" onClick={this.onResend}>
+                Resend
+            </button>;
+        }
         return (
             <div className={classes}>
                 { avatar }
                 { timestamp }
+                { resend }
                 { sender }
                 <TileType mxEvent={this.props.mxEvent} />
             </div>
diff --git a/src/controllers/molecules/MessageComposer.js b/src/controllers/molecules/MessageComposer.js
index 2ece5636a..c73e9f25c 100644
--- a/src/controllers/molecules/MessageComposer.js
+++ b/src/controllers/molecules/MessageComposer.js
@@ -232,6 +232,10 @@ module.exports = {
             dis.dispatch({
                 action: 'message_sent'
             });
+        }, function() {
+            dis.dispatch({
+                action: 'message_send_failed'
+            });
         });
         this.refs.textarea.getDOMNode().value = '';
         ev.preventDefault();
diff --git a/src/controllers/molecules/MessageTile.js b/src/controllers/molecules/MessageTile.js
index 953e33b51..47b616e72 100644
--- a/src/controllers/molecules/MessageTile.js
+++ b/src/controllers/molecules/MessageTile.js
@@ -23,6 +23,28 @@ module.exports = {
         var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
         return actions.tweaks.highlight;
+    },
+
+    getInitialState: function() {
+        return {
+            resending: false
+        };
+    },
+
+    onResend: function() {
+        var self = this;
+        self.setState({
+            resending: true
+        });
+        MatrixClientPeg.get().resendEvent(
+            this.props.mxEvent, MatrixClientPeg.get().getRoom(
+                this.props.mxEvent.getRoomId()
+            )
+        ).finally(function() {
+            self.setState({
+                resending: false
+            });
+        })
     }
 };
 
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 8465b2ce8..332572a5a 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -79,10 +79,12 @@ module.exports = {
 
     onAction: function(payload) {
         switch (payload.action) {
+            case 'message_send_failed':
             case 'message_sent':
                 this.setState({
                     room: MatrixClientPeg.get().getRoom(this.props.roomId)
                 });
+                this.forceUpdate();
                 break;
             case'notifier_enabled':
                 this.forceUpdate();