diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js index aa3813c30d..0c91d0ac99 100644 --- a/src/components/views/messages/ReactionDimension.js +++ b/src/components/views/messages/ReactionDimension.js @@ -37,6 +37,7 @@ export default class ReactionDimension extends React.PureComponent { if (props.reactions) { props.reactions.on("Relations.add", this.onReactionsChange); + props.reactions.on("Relations.remove", this.onReactionsChange); props.reactions.on("Relations.redaction", this.onReactionsChange); } } @@ -44,6 +45,7 @@ export default class ReactionDimension extends React.PureComponent { componentDidUpdate(prevProps) { if (prevProps.reactions !== this.props.reactions) { this.props.reactions.on("Relations.add", this.onReactionsChange); + this.props.reactions.on("Relations.remove", this.onReactionsChange); this.props.reactions.on("Relations.redaction", this.onReactionsChange); this.onReactionsChange(); } @@ -55,6 +57,10 @@ export default class ReactionDimension extends React.PureComponent { "Relations.add", this.onReactionsChange, ); + this.props.reactions.removeListener( + "Relations.remove", + this.onReactionsChange, + ); this.props.reactions.removeListener( "Relations.redaction", this.onReactionsChange, @@ -107,7 +113,7 @@ export default class ReactionDimension extends React.PureComponent { return null; } const userId = MatrixClientPeg.get().getUserId(); - return reactions.getAnnotationsBySender()[userId]; + return [...reactions.getAnnotationsBySender()[userId].values()]; } onOptionClick = (ev) => { diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index f4bd9781bc..cd3ccb6809 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/src/components/views/messages/ReactionsRow.js @@ -34,6 +34,7 @@ export default class ReactionsRow extends React.PureComponent { if (props.reactions) { props.reactions.on("Relations.add", this.onReactionsChange); + props.reactions.on("Relations.remove", this.onReactionsChange); props.reactions.on("Relations.redaction", this.onReactionsChange); } @@ -45,6 +46,7 @@ export default class ReactionsRow extends React.PureComponent { componentDidUpdate(prevProps) { if (prevProps.reactions !== this.props.reactions) { this.props.reactions.on("Relations.add", this.onReactionsChange); + this.props.reactions.on("Relations.remove", this.onReactionsChange); this.props.reactions.on("Relations.redaction", this.onReactionsChange); this.onReactionsChange(); } @@ -56,6 +58,10 @@ export default class ReactionsRow extends React.PureComponent { "Relations.add", this.onReactionsChange, ); + this.props.reactions.removeListener( + "Relations.remove", + this.onReactionsChange, + ); this.props.reactions.removeListener( "Relations.redaction", this.onReactionsChange, @@ -80,7 +86,7 @@ export default class ReactionsRow extends React.PureComponent { return null; } const userId = MatrixClientPeg.get().getUserId(); - return reactions.getAnnotationsBySender()[userId]; + return [...reactions.getAnnotationsBySender()[userId].values()]; } render() {