Add and impl resend button. Update UI when failing to send messages.

skins/base/css/molecules/MessageTile.css

@@ -74,3 +74,7 @@ limitations under the License.
 .mx_MessageTile_highlight {
     color: #00f;
 }
+
+.mx_MessageTile_msgOption {
+    float: right;
+}

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>

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();

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
+            });
+        })
     }
 };
 

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();