diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js index 675d99e1874..015e69d6b6c 100644 --- a/src/components/views/messages/ReactionDimension.js +++ b/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) { diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index 7242fa9144e..a58990a8a57 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/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