De-duplicate reactions by sender to account for faulty/malicious servers (matrix-org#11340)

* De-duplicate reactions by sender to account for faulty/malicious servers * Fix copyrights

Author: t3chguy

src/components/views/messages/ReactionsRow.tsx

@@ -18,6 +18,7 @@ import React, { SyntheticEvent } from "react";
 import classNames from "classnames";
 import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
 import { Relations, RelationsEvent } from "matrix-js-sdk/src/models/relations";
+import { uniqBy } from "lodash";
 
 import { _t } from "../../../languageHandler";
 import { isContentActionable } from "../../../utils/EventUtils";
@@ -177,6 +178,10 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
  if (!count) {
  return null;
  }
+ // Deduplicate the events as per the spec https://spec.matrix.org/v1.7/client-server-api/#annotations-client-behaviour
+ // This isn't done by the underlying data model as applications may still need access to the whole list of events
+ // for moderation purposes.
+ const deduplicatedEvents = uniqBy([...events], (e) => e.getSender());
  const myReactionEvent = myReactions?.find((mxEvent) => {
  if (mxEvent.isRedacted()) {
  return false;
@@ -187,9 +192,9 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
  <ReactionsRowButton
  key={content}
  content={content}
- count={count}
+ count={deduplicatedEvents.length}
  mxEvent={mxEvent}
- reactionEvents={events}
+ reactionEvents={deduplicatedEvents}
  myReactionEvent={myReactionEvent}
  disabled={
  !this.context.canReact ||

src/components/views/messages/ReactionsRowButton.tsx

@@ -31,8 +31,8 @@ interface IProps {
  content: string;
  // The count of votes for this key
  count: number;
- // A Set of Matrix reaction events for this key
- reactionEvents: Set<MatrixEvent>;
+ // A list of Matrix reaction events for this key
+ reactionEvents: MatrixEvent[];
  // A possible Matrix event if the current user has voted for this type
  myReactionEvent?: MatrixEvent;
  // Whether to prevent quick-reactions by clicking on this reaction

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -27,8 +27,8 @@ interface IProps {
  mxEvent: MatrixEvent;
  // The reaction content / key / emoji
  content: string;
- // A Set of Matrix reaction events for this key
- reactionEvents: Set<MatrixEvent>;
+ // A list of Matrix reaction events for this key
+ reactionEvents: MatrixEvent[];
  visible: boolean;
 }