From 3dcf0d0b7edf6a641d74baa7b4b102f6decb1694 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 15 Oct 2021 10:25:42 +0100 Subject: [PATCH 1/4] Fix incorrect logic to hide thread relations --- src/components/structures/MessagePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index c1d22ecedff..79aeea8321c 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; } From 17c4cc91afaa0b41ceb8634039bc65add5e5e507 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 15 Oct 2021 10:26:04 +0100 Subject: [PATCH 2/4] Reconcile threads root with its children before displaying it --- src/components/views/rooms/EventTile.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 9d608c2833c..c6798f1f15b 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -531,8 +531,13 @@ export default class EventTile extends React.Component { return null; } - const thread = this.state.thread; 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; } From 6baa6c8f65035633b86d4e7aec2e571b201c68ef Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 15 Oct 2021 11:08:33 +0100 Subject: [PATCH 3/4] Listen to new thread to render info on timeline --- src/components/structures/ThreadView.tsx | 15 ++++++++++++--- src/components/views/rooms/EventTile.tsx | 14 ++++++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 34622128349..7bd6415cd33 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 c6798f1f15b..9fd9a567302 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -475,6 +475,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) => { @@ -516,6 +519,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) { @@ -526,6 +532,14 @@ 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; From 93fc24c875e15526c10cf29cd60443d78d5798c4 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 15 Oct 2021 14:47:02 +0100 Subject: [PATCH 4/4] Adding renderThreadInfo comment to explain data accessor --- src/components/views/rooms/EventTile.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 467481c6797..44bf500f50b 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -546,6 +546,12 @@ export default class EventTile extends React.Component { return null; } + /** + * 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());