Merge pull request #3170 from matrix-org/bwindels/handle-associated-failures

Handle associated event send failures

src/components/structures/ScrollPanel.js

@@ -214,6 +214,9 @@ module.exports = React.createClass({
     // after an update to the contents of the panel, check that the scroll is
     // where it ought to be, and set off pagination requests if necessary.
     checkScroll: function() {
+        if (this.unmounted) {
+            return;
+        }
         this._restoreSavedScrollState();
         this.checkFillState();
     },

src/components/views/context_menus/MessageContextMenu.js

@@ -29,6 +29,10 @@ import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
 
+function canCancel(eventStatus) {
+    return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
+}
+
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
 
@@ -90,6 +94,23 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onResendEditClick: function() {
+        Resend.resend(this.props.mxEvent.replacingEvent());
+        this.closeMenu();
+    },
+
+    onResendRedactionClick: function() {
+        Resend.resend(this.props.mxEvent.localRedactionEvent());
+        this.closeMenu();
+    },
+
+    onResendReactionsClick: function() {
+        for (const reaction of this._getUnsentReactions()) {
+            Resend.resend(reaction);
+        }
+        this.closeMenu();
+    },
+
     e2eInfoClicked: function() {
         this.props.e2eInfoCallback();
         this.closeMenu();
@@ -148,7 +169,25 @@ module.exports = React.createClass({
     },
 
     onCancelSendClick: function() {
-        Resend.removeFromQueue(this.props.mxEvent);
+        const mxEvent = this.props.mxEvent;
+        const editEvent = mxEvent.replacingEvent();
+        const redactEvent = mxEvent.localRedactionEvent();
+        const pendingReactions = this._getPendingReactions();
+
+        if (editEvent && canCancel(editEvent.status)) {
+            Resend.removeFromQueue(editEvent);
+        }
+        if (redactEvent && canCancel(redactEvent.status)) {
+            Resend.removeFromQueue(redactEvent);
+        }
+        if (pendingReactions.length) {
+            for (const reaction of pendingReactions) {
+                Resend.removeFromQueue(reaction);
+            }
+        }
+        if (canCancel(mxEvent.status)) {
+            Resend.removeFromQueue(this.props.mxEvent);
+        }
         this.closeMenu();
     },
 
@@ -217,10 +256,42 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    _getReactions(filter) {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const eventId = this.props.mxEvent.getId();
+        return room.getPendingEvents().filter(e => {
+            const relation = e.getRelation();
+            return relation &&
+                relation.rel_type === "m.annotation" &&
+                relation.event_id === eventId &&
+                filter(e);
+        });
+    },
+
+    _getPendingReactions() {
+        return this._getReactions(e => canCancel(e.status));
+    },
+
+    _getUnsentReactions() {
+        return this._getReactions(e => e.status === EventStatus.NOT_SENT);
+    },
+
     render: function() {
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
+        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
+        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
+        const unsentReactionsCount = this._getUnsentReactions().length;
+        const pendingReactionsCount = this._getPendingReactions().length;
+        const allowCancel = canCancel(mxEvent.status) ||
+            canCancel(editStatus) ||
+            canCancel(redactStatus) ||
+            pendingReactionsCount !== 0;
         let resendButton;
+        let resendEditButton;
+        let resendReactionsButton;
+        let resendRedactionButton;
         let redactButton;
         let cancelButton;
         let forwardButton;
@@ -233,11 +304,36 @@ module.exports = React.createClass({
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+        if (!mxEvent.isRedacted()) {
+            if (eventStatus === EventStatus.NOT_SENT) {
+                resendButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
+                        { _t('Resend') }
+                    </div>
+                );
+            }
 
-        if (eventStatus === EventStatus.NOT_SENT) {
-            resendButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
-                    { _t('Resend') }
+            if (editStatus === EventStatus.NOT_SENT) {
+                resendEditButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
+                        { _t('Resend edit') }
+                    </div>
+                );
+            }
+
+            if (unsentReactionsCount !== 0) {
+                resendReactionsButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
+                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
+                    </div>
+                );
+            }
+        }
+
+        if (redactStatus === EventStatus.NOT_SENT) {
+            resendRedactionButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
+                    { _t('Resend removal') }
                 </div>
             );
         }
@@ -250,7 +346,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT) {
+        if (allowCancel) {
             cancelButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
                     { _t('Cancel Sending') }
@@ -352,6 +448,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageContextMenu">
                 { resendButton }
+                { resendEditButton }
+                { resendReactionsButton }
+                { resendRedactionButton }
                 { redactButton }
                 { cancelButton }
                 { forwardButton }

src/components/views/elements/MessageEditor.js

@@ -31,6 +31,7 @@ import {renderModel} from '../../../editor/render';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import {MatrixClient} from 'matrix-js-sdk';
 import classNames from 'classnames';
+import {EventStatus} from 'matrix-js-sdk';
 
 export default class MessageEditor extends React.Component {
     static propTypes = {
@@ -195,12 +196,24 @@ export default class MessageEditor extends React.Component {
         }, contentBody);
 
         const roomId = this.props.editState.getEvent().getRoomId();
+        this._cancelPreviousPendingEdit();
         this.context.matrixClient.sendMessage(roomId, content);
 
         dis.dispatch({action: "edit_event", event: null});
         dis.dispatch({action: 'focus_composer'});
     }
 
+    _cancelPreviousPendingEdit() {
+        const originalEvent = this.props.editState.getEvent();
+        const previousEdit = originalEvent.replacingEvent();
+        if (previousEdit && (
+            previousEdit.status === EventStatus.QUEUED ||
+            previousEdit.status === EventStatus.NOT_SENT
+        )) {
+            this.context.matrixClient.cancelPendingEvent(previousEdit);
+        }
+    }
+
     _onAutoCompleteConfirm = (completion) => {
         this.model.autoComplete.onComponentConfirm(completion);
     }

src/components/views/rooms/EventTile.js

@@ -681,7 +681,7 @@ module.exports = withMatrixClient(React.createClass({
             </div> : null;
 
         let reactionsRow;
-        if (SettingsStore.isFeatureEnabled("feature_reactions")) {
+        if (SettingsStore.isFeatureEnabled("feature_reactions") && !isRedacted) {
             const ReactionsRow = sdk.getComponent('messages.ReactionsRow');
             reactionsRow = <ReactionsRow
                 mxEvent={this.props.mxEvent}