Disable quick reactions button when no permissions (#7412)

Author: t3chguy

src/components/views/messages/ReactionsRow.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import classNames from "classnames";
-import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 
@@ -27,7 +26,7 @@ import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/Co
 import ContextMenu, { aboveLeftOf, useContextMenu } from "../../structures/ContextMenu";
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ReactionsRowButton from "./ReactionsRowButton";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
@@ -76,10 +75,12 @@ interface IState {
 
 @replaceableComponent("views.messages.ReactionsRow")
 export default class ReactionsRow extends React.PureComponent<IProps, IState> {
-    static contextType = MatrixClientContext;
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
-    constructor(props, context) {
+    constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
+        this.context = context;
 
         this.state = {
             myReactions: this.getMyReactions(),
@@ -143,7 +144,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         if (!reactions) {
             return null;
         }
-        const userId = this.context.getUserId();
+        const userId = this.context.room.client.getUserId();
         const myReactions = reactions.getAnnotationsBySender()[userId];
         if (!myReactions) {
             return null;
@@ -165,6 +166,11 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
             return null;
         }
 
+        const cli = this.context.room.client;
+        const room = cli.getRoom(mxEvent.getRoomId());
+        const isPeeking = room.getMyMembership() !== "join";
+        const canReact = !isPeeking && this.context.canReact;
+
         let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
             const count = events.size;
             if (!count) {
@@ -183,6 +189,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
                 mxEvent={mxEvent}
                 reactionEvents={events}
                 myReactionEvent={myReactionEvent}
+                disabled={!canReact}
             />;
         }).filter(item => !!item);
 
@@ -203,11 +210,8 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
             </a>;
         }
 
-        const cli = this.context;
-
         let addReactionButton;
-        const room = cli.getRoom(mxEvent.getRoomId());
-        if (room.getMyMembership() === "join" && room.currentState.maySendEvent(EventType.Reaction, cli.getUserId())) {
+        if (room.getMyMembership() === "join" && this.context.canReact) {
             addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
         }
 

src/components/views/messages/ReactionsRowButton.tsx

@@ -37,6 +37,8 @@ interface IProps {
     reactionEvents: Set<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
+    disabled?: boolean;
 }
 
 interface IState {
@@ -121,12 +123,12 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 label = reactors;
             }
         }
-        const isPeeking = room.getMyMembership() !== "join";
+
         return <AccessibleButton
             className={classes}
             aria-label={label}
             onClick={this.onClick}
-            disabled={isPeeking}
+            disabled={this.props.disabled}
             onMouseOver={this.onMouseOver}
             onMouseLeave={this.onMouseLeave}
         >