Make UI respond to thread events

res/css/views/messages/_MessageActionBar.scss

@@ -89,11 +89,11 @@ limitations under the License.
 }
 
 .mx_MessageActionBar_replyButton::after {
-    mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
+    mask-image: url('$(res)/img/element-icons/room/files.svg');
 }
 
 .mx_MessageActionBar_threadButton::after {
-    mask-image: url('$(res)/img/element-icons/room/files.svg');
+    mask-image: url('$(res)/img/element-icons/message/thread.svg');
 }
 
 .mx_MessageActionBar_editButton::after {

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -232,6 +232,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/files.svg');
 }
 
+.mx_RoomSummaryCard_icon_threads::before {
+    mask-image: url('$(res)/img/element-icons/message/thread.svg');
+}
+
 .mx_RoomSummaryCard_icon_share::before {
     mask-image: url('$(res)/img/element-icons/room/share.svg');
 }

src/components/structures/MessagePanel.tsx

@@ -267,6 +267,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     componentDidMount() {
         this.calculateRoomMembersCount();
         this.props.room?.on("RoomState.members", this.calculateRoomMembersCount);
+        this.props.room?.getThreads().forEach(thread => thread.fetchReplyChain());
         this.isMounted = true;
     }
 

src/components/structures/ThreadPanel.tsx

@@ -52,13 +52,6 @@ class ThreadView extends React.Component<IProps, IState> {
     public componentDidMount(): void {
         this.room.on("Thread.update", this.onThreadEventReceived);
         this.room.on("Thread.ready", this.onThreadEventReceived);
-        this.updateThreads(() => {
-            this.state.threads.forEach(thread => {
-                if (!thread.ready) {
-                    thread.fetchReplyChain();
-                }
-            });
-        });
     }
 
     public componentWillUnmount(): void {

src/components/structures/ThreadView.tsx

@@ -29,6 +29,7 @@ import MessageComposer from '../views/rooms/MessageComposer';
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { Layout } from '../../settings/Layout';
 import TimelinePanel from './TimelinePanel';
+import { Thread } from '../../../../matrix-js-sdk/src/models/thread';
 
 interface IProps {
     roomId: string;
@@ -40,6 +41,7 @@ interface IProps {
 
 interface IState {
     replyToEvent?: MatrixEvent;
+    thread?: Thread;
 }
 
 /*
@@ -50,16 +52,29 @@ class ThreadView extends React.Component<IProps, IState> {
     state = {};
 
     public componentDidMount(): void {
-        // this.props.mxEvent.getThread().on("Thread.update", this.updateThread);
-        this.props.mxEvent.getThread().once("Thread.ready", this.updateThread);
+        this.setupThread();
     }
 
     public componentWillUnmount(): void {
-        this.props.mxEvent.getThread().removeListener("Thread.update", this.updateThread);
+        if (this.state.thread) {
+            this.state.thread.removeListener("Thread.update", this.updateThread);
+            this.state.thread.removeListener("Thread.ready", this.updateThread);
+        }
     }
 
+    setupThread = () => {
+        const thread = this.props.mxEvent.getThread();
+        if (thread) {
+            thread.on("Thread.update", this.updateThread);
+            thread.once("Thread.ready", this.updateThread);
+            this.updateThread();
+        }
+    };
+
     updateThread = () => {
-        this.forceUpdate();
+        this.setState({
+            thread: this.props.mxEvent.getThread(),
+        });
     };
 
     public renderEventTile(event: MatrixEvent): JSX.Element {

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -280,7 +280,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                 { _t("Show files") }
             </Button>
-            <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomThreadsClick}>
+            <Button className="mx_RoomSummaryCard_icon_threads" onClick={onRoomThreadsClick}>
                 { _t("Show threads") }
             </Button>
             <Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>

src/components/views/rooms/EventTile.tsx

@@ -56,6 +56,7 @@ import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
 import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Thread } from '../../../../../matrix-js-sdk/src/models/thread';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -319,6 +320,8 @@ interface IState {
     reactions: Relations;
 
     hover: boolean;
+
+    thread?: Thread;
 }
 
 @replaceableComponent("views.rooms.EventTile")
@@ -355,6 +358,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             reactions: this.getReactions(),
 
             hover: false,
+
+            thread: this.props.mxEvent?.getThread(),
         };
 
         // don't do RR animations until we are mounted
@@ -455,9 +460,18 @@ export default class EventTile extends React.Component<IProps, IState> {
             client.on("Room.receipt", this.onRoomReceipt);
             this.isListeningForReceipts = true;
         }
-        this.props.mxEvent.on("Thread.update", this.forceUpdate);
+
+        this.props.mxEvent.once("Thread.ready", this.updateThread);
+        this.props.mxEvent.on("Thread.update", this.updateThread);
     }
 
+    private updateThread = (thread) => {
+        this.setState({
+            thread,
+        });
+        this.forceUpdate();
+    };
+
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -468,7 +482,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
         if (objectHasDiff(this.state, nextState)) {
             return true;
         }
@@ -497,8 +511,8 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     private renderThreadInfo(): React.ReactNode {
+        const thread = this.state.thread;
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const thread = room.getThread(this.props.mxEvent.getId());
         if (!thread || this.props.showThreadInfo === false) {
             return null;
         }