Update reactions when redacted

This updates the reaction state in the reaction row and action bar when a
reaction is redacted.

Part of https://github.com/vector-im/riot-web/issues/9574

src/components/views/messages/ReactionDimension.js

@@ -32,11 +32,36 @@ export default class ReactionDimension extends React.PureComponent {
         super(props);
 
         this.state = {
-            selected: this.getInitialSelection(),
+            selected: this.getSelection(),
         };
+
+        if (props.reactions) {
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
     }
 
-    getInitialSelection() {
+    componentWillReceiveProps(nextProps) {
+        if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        this.setState({
+            selected: this.getSelection(),
+        });
+    }
+
+    getSelection() {
         const myReactions = this.getMyReactions();
         if (!myReactions) {
             return null;
@@ -45,6 +70,9 @@ export default class ReactionDimension extends React.PureComponent {
         let selected = null;
         for (const { key, content } of options) {
             const reactionExists = myReactions.some(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
                 return mxEvent.getContent()["m.relates_to"].key === content;
             });
             if (reactionExists) {

src/components/views/messages/ReactionsRow.js

@@ -28,6 +28,34 @@ export default class ReactionsRow extends React.PureComponent {
         reactions: PropTypes.object,
     }
 
+    constructor(props) {
+        super(props);
+
+        if (props.reactions) {
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        // TODO: Call `onHeightChanged` as needed
+        this.forceUpdate();
+    }
+
     render() {
         const { mxEvent, reactions } = this.props;
 
@@ -37,7 +65,10 @@ export default class ReactionsRow extends React.PureComponent {
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
-            const count = events.length;
+            const count = events.size;
+            if (!count) {
+                return null;
+            }
             return <ReactionsRowButton
                 key={content}
                 content={content}