From 83af38a85f7f57270452bef935a921221c7b51e6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Jun 2021 15:56:37 +0100 Subject: [PATCH 1/4] Fix multiple timeline panels handling composer and edit events --- src/components/structures/RoomView.tsx | 1 + src/components/structures/TimelinePanel.js | 44 ++++++++++++---------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 885851e8e6..3809090bbd 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2025,6 +2025,7 @@ export default class RoomView extends React.Component { manageReadReceipts={!this.state.isPeeking} sendReadReceiptOnLoad={!this.state.wasContextSwitch} manageReadMarkers={!this.state.isPeeking} + manageComposerDispatches={true} hidden={hideMessagePanel} highlightedEventId={highlightedEventId} eventId={this.state.initialEventId} diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 03d0b5c6d7..a1e8fa7ded 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -72,6 +72,8 @@ class TimelinePanel extends React.Component { manageReadReceipts: PropTypes.bool, sendReadReceiptOnLoad: PropTypes.bool, manageReadMarkers: PropTypes.bool, + // with this enabled it'll listen and react to Action.ComposerInsert and `edit_event` + manageComposerDispatches: PropTypes.bool, // true to give the component a 'display: none' style. hidden: PropTypes.bool, @@ -446,29 +448,33 @@ class TimelinePanel extends React.Component { break; case "edit_event": { - const editState = payload.event ? new EditorStateTransfer(payload.event) : null; - this.setState({editState}, () => { - if (payload.event && this._messagePanel.current) { - this._messagePanel.current.scrollToEventIfNeeded( - payload.event.getId(), - ); - } - }); + if (this.props.manageComposerDispatches) { + const editState = payload.event ? new EditorStateTransfer(payload.event) : null; + this.setState({editState}, () => { + if (payload.event && this._messagePanel.current) { + this._messagePanel.current.scrollToEventIfNeeded( + payload.event.getId(), + ); + } + }); + } break; } case Action.ComposerInsert: { - // re-dispatch to the correct composer - if (this.state.editState) { - dis.dispatch({ - ...payload, - action: "edit_composer_insert", - }); - } else { - dis.dispatch({ - ...payload, - action: "send_composer_insert", - }); + if (this.props.manageComposerDispatches) { + // re-dispatch to the correct composer + if (this.state.editState) { + dis.dispatch({ + ...payload, + action: "edit_composer_insert", + }); + } else { + dis.dispatch({ + ...payload, + action: "send_composer_insert", + }); + } } break; } From fd9e891647c856478e05ed3647573e57651799f7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Jun 2021 16:02:34 +0100 Subject: [PATCH 2/4] Clean up by pulling listeners up to parent RoomView --- src/components/structures/RoomView.tsx | 29 +++++++++++++++- src/components/structures/TimelinePanel.js | 40 ++++------------------ 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 3809090bbd..b92d51d8ed 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; +import EditorStateTransfer from "../../utils/EditorStateTransfer"; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -192,6 +193,7 @@ export interface IState { // whether or not a spaces context switch brought us here, // if it did we don't want the room to be marked as read as soon as it is loaded. wasContextSwitch?: boolean; + editState?: EditorStateTransfer; } @replaceableComponent("structures.RoomView") @@ -815,6 +817,32 @@ export default class RoomView extends React.Component { case 'focus_search': this.onSearchClick(); break; + + case "edit_event": { + const editState = payload.event ? new EditorStateTransfer(payload.event) : null; + this.setState({ editState }, () => { + if (payload.event) { + this.messagePanel?.scrollToEventIfNeeded(payload.event.getId()); + } + }); + break; + } + + case Action.ComposerInsert: { + // re-dispatch to the correct composer + if (this.state.editState) { + dis.dispatch({ + ...payload, + action: "edit_composer_insert", + }); + } else { + dis.dispatch({ + ...payload, + action: "send_composer_insert", + }); + } + break; + } } }; @@ -2025,7 +2053,6 @@ export default class RoomView extends React.Component { manageReadReceipts={!this.state.isPeeking} sendReadReceiptOnLoad={!this.state.wasContextSwitch} manageReadMarkers={!this.state.isPeeking} - manageComposerDispatches={true} hidden={hideMessagePanel} highlightedEventId={highlightedEventId} eventId={this.state.initialEventId} diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index a1e8fa7ded..61b7fc0555 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -447,38 +447,6 @@ class TimelinePanel extends React.Component { this.forceUpdate(); break; - case "edit_event": { - if (this.props.manageComposerDispatches) { - const editState = payload.event ? new EditorStateTransfer(payload.event) : null; - this.setState({editState}, () => { - if (payload.event && this._messagePanel.current) { - this._messagePanel.current.scrollToEventIfNeeded( - payload.event.getId(), - ); - } - }); - } - break; - } - - case Action.ComposerInsert: { - if (this.props.manageComposerDispatches) { - // re-dispatch to the correct composer - if (this.state.editState) { - dis.dispatch({ - ...payload, - action: "edit_composer_insert", - }); - } else { - dis.dispatch({ - ...payload, - action: "send_composer_insert", - }); - } - } - break; - } - case "scroll_to_bottom": this.jumpToLiveTimeline(); break; @@ -872,6 +840,12 @@ class TimelinePanel extends React.Component { } }; + scrollToEventIfNeeded = (eventId) => { + if (this._messagePanel.current) { + this._messagePanel.current.scrollToEventIfNeeded(eventId); + } + } + /* scroll to show the read-up-to marker. We put it 1/3 of the way down * the container. */ @@ -1479,7 +1453,7 @@ class TimelinePanel extends React.Component { tileShape={this.props.tileShape} resizeNotifier={this.props.resizeNotifier} getRelationsForEvent={this.getRelationsForEvent} - editState={this.state.editState} + editState={this.props.editState} showReactions={this.props.showReactions} layout={this.props.layout} enableFlair={SettingsStore.getValue(UIFeature.Flair)} From c708afe21636976eb4009b0f2b2e4bc3b2330e8f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Jun 2021 16:03:52 +0100 Subject: [PATCH 3/4] Pull scroll_to_bottom up a level similarly to prevent it firing on NotifPanel/FilePanel when sending a message --- src/components/structures/RoomView.tsx | 4 ++++ src/components/structures/TimelinePanel.js | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index b92d51d8ed..3e6cfa864a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -843,6 +843,10 @@ export default class RoomView extends React.Component { } break; } + + case "scroll_to_bottom": + this.messagePanel?.jumpToLiveTimeline(); + break; } }; diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 61b7fc0555..4b51a5ecf5 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -446,10 +446,6 @@ class TimelinePanel extends React.Component { case "ignore_state_changed": this.forceUpdate(); break; - - case "scroll_to_bottom": - this.jumpToLiveTimeline(); - break; } }; From e43df0e3c664f423faa2abf3fdbe64d51e78a701 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Jun 2021 16:11:38 +0100 Subject: [PATCH 4/4] delint --- src/components/structures/TimelinePanel.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 4b51a5ecf5..ad20d38139 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -34,12 +34,10 @@ import * as sdk from "../../index"; import { Key } from '../../Keyboard'; import Timer from '../../utils/Timer'; import shouldHideEvent from '../../shouldHideEvent'; -import EditorStateTransfer from '../../utils/EditorStateTransfer'; import { haveTileForEvent } from "../views/rooms/EventTile"; import { UIFeature } from "../../settings/UIFeature"; import { replaceableComponent } from "../../utils/replaceableComponent"; import { arrayFastClone } from "../../utils/arrays"; -import { Action } from "../../dispatcher/actions"; const PAGINATE_SIZE = 20; const INITIAL_SIZE = 20;