diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index c1d22ecedf..79aeea8321 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -460,7 +460,7 @@ export default class MessagePanel extends React.Component { // Checking if the message has a "parentEventId" as we do not // want to hide the root event of the thread - if (mxEv.isThreadRoot && this.props.hideThreadedMessages + if (mxEv.isThreadRelation && this.props.hideThreadedMessages && SettingsStore.getValue("feature_thread")) { return false; } diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 3462212834..7bd6415cd3 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -48,10 +48,8 @@ interface IProps { } interface IState { - replyToEvent?: MatrixEvent; thread?: Thread; editState?: EditorStateTransfer; - } @replaceableComponent("structures.ThreadView") @@ -69,11 +67,16 @@ export default class ThreadView extends React.Component { public componentDidMount(): void { this.setupThread(this.props.mxEvent); this.dispatcherRef = dis.register(this.onAction); + + const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); + room.on(ThreadEvent.New, this.onNewThread); } public componentWillUnmount(): void { this.teardownThread(); dis.unregister(this.dispatcherRef); + const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); + room.on(ThreadEvent.New, this.onNewThread); } public componentDidUpdate(prevProps) { @@ -135,11 +138,17 @@ export default class ThreadView extends React.Component { } }; + private onNewThread = (thread: Thread) => { + if (thread.id === this.props.mxEvent.getId()) { + this.teardownThread(); + this.setupThread(this.props.mxEvent); + } + }; + private updateThread = (thread?: Thread) => { if (thread) { this.setState({ thread, - replyToEvent: thread.replyToEvent, }); } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 1aab27ee5d..44bf500f50 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -476,6 +476,9 @@ export default class EventTile extends React.Component { this.props.mxEvent.once(ThreadEvent.Ready, this.updateThread); this.props.mxEvent.on(ThreadEvent.Update, this.updateThread); } + + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); + room.on(ThreadEvent.New, this.onNewThread); } private updateThread = (thread) => { @@ -517,6 +520,9 @@ export default class EventTile extends React.Component { this.props.mxEvent.off(ThreadEvent.Ready, this.updateThread); this.props.mxEvent.off(ThreadEvent.Update, this.updateThread); } + + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); + room.off(ThreadEvent.New, this.onNewThread); } componentDidUpdate(prevProps, prevState, snapshot) { @@ -527,12 +533,32 @@ export default class EventTile extends React.Component { } } + private onNewThread = (thread: Thread) => { + if (thread.id === this.props.mxEvent.getId()) { + this.updateThread(thread); + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); + room.off(ThreadEvent.New, this.onNewThread); + } + }; + private renderThreadInfo(): React.ReactNode { if (!SettingsStore.getValue("feature_thread")) { return null; } - const thread = this.state.thread; + /** + * Accessing the threads value through the room due to a race condition + * that will be solved when there are proper backend support for threads + * We currently have no reliable way to discover than an event is a thread + * when we are at the sync stage + */ + const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); + const thread = room.threads.get(this.props.mxEvent.getId()); + + if (thread && !thread.ready) { + thread.addEvent(this.props.mxEvent, true); + } + if (!thread || this.props.showThreadInfo === false || thread.length <= 1) { return null; }