From d4ca1babbe5228d028ebcc9ca1e89f66f1955337 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 26 May 2021 16:47:21 +0100
Subject: [PATCH] Update reactions row on event decryption

This fixes a race (perhaps revealed by the recent lazy decryption work) where
the reactions row have reactions to show, but the event would not be decrypted,
so they wouldn't render. Adding a decryption listener gets things moving again.

Fixes https://github.com/vector-im/element-web/issues/17461
---
 .../views/messages/ReactionsRow.tsx           | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx
index f5910473ff..797f997d27 100644
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@@ -81,18 +81,38 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
     constructor(props, context) {
         super(props, context);
 
-        if (props.reactions) {
-            props.reactions.on("Relations.add", this.onReactionsChange);
-            props.reactions.on("Relations.remove", this.onReactionsChange);
-            props.reactions.on("Relations.redaction", this.onReactionsChange);
-        }
-
         this.state = {
             myReactions: this.getMyReactions(),
             showAll: false,
         };
     }
 
+    componentDidMount() {
+        const { mxEvent, reactions } = this.props;
+
+        if (mxEvent.isBeingDecrypted() || mxEvent.shouldAttemptDecryption()) {
+            mxEvent.once("Event.decrypted", this.onDecrypted);
+        }
+
+        if (reactions) {
+            reactions.on("Relations.add", this.onReactionsChange);
+            reactions.on("Relations.remove", this.onReactionsChange);
+            reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        const { mxEvent, reactions } = this.props;
+
+        mxEvent.off("Event.decrypted", this.onDecrypted);
+
+        if (reactions) {
+            reactions.off("Relations.add", this.onReactionsChange);
+            reactions.off("Relations.remove", this.onReactionsChange);
+            reactions.off("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
     componentDidUpdate(prevProps) {
         if (prevProps.reactions !== this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
@@ -102,21 +122,9 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         }
     }
 
-    componentWillUnmount() {
-        if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
-        }
+    private onDecrypted = () => {
+        // Decryption changes whether the event is actionable
+        this.forceUpdate();
     }
 
     onReactionsChange = () => {