Add edits and replies to the right panel timeline & prepare the timelineCard to share code with threads (#7262)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>

src/components/structures/RightPanel.tsx

@@ -339,8 +339,12 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 if (!SettingsStore.getValue("feature_maximised_widgets")) break;
                 panel = <TimelineCard
                     room={this.props.room}
+                    timelineSet={this.props.room.getUnfilteredTimelineSet()}
                     resizeNotifier={this.props.resizeNotifier}
-                    onClose={this.onClose} />;
+                    onClose={this.onClose}
+                    permalinkCreator={this.props.permalinkCreator}
+                    e2eStatus={this.props.e2eStatus}
+                />;
                 break;
             case RightPanelPhases.FilePanel:
                 panel = <FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />;

src/components/views/right_panel/TimelineCard.tsx

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+import { EventSubscription } from "fbemitter";
+import { EventTimelineSet, IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { Thread } from 'matrix-js-sdk/src/models/thread';
 
 import BaseCard from "./BaseCard";
@@ -27,10 +28,16 @@ import { Layout } from '../../../settings/enums/Layout';
 import TimelinePanel from '../../structures/TimelinePanel';
 import { E2EStatus } from '../../../utils/ShieldUtils';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import RoomContext from '../../../contexts/RoomContext';
+import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
-
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
+import { ActionPayload } from '../../../dispatcher/payloads';
+import { Action } from '../../../dispatcher/actions';
+import RoomViewStore from '../../../stores/RoomViewStore';
+import ContentMessages from '../../../ContentMessages';
+import UploadBar from '../../structures/UploadBar';
+import SettingsStore from '../../../settings/SettingsStore';
 
 interface IProps {
     room: Room;
@@ -38,24 +45,103 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator?: RoomPermalinkCreator;
     e2eStatus?: E2EStatus;
-    initialEvent?: MatrixEvent;
+    timelineSet?: EventTimelineSet;
-    initialEventHighlighted?: boolean;
+    timelineRenderingType?: TimelineRenderingType;
+    showComposer?: boolean;
+    composerRelation?: IEventRelation;
 }
 interface IState {
     thread?: Thread;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
+    initialEventId?: string;
+    initialEventHighlighted?: boolean;
+
+    // settings:
+    showReadReceipts?: boolean;
 }
 
 @replaceableComponent("structures.TimelineCard")
 export default class TimelineCard extends React.Component<IProps, IState> {
     static contextType = RoomContext;
 
+    private dispatcherRef: string;
+    private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
+    private roomStoreToken: EventSubscription;
+    private settingWatchers: string[];
+
     constructor(props: IProps) {
         super(props);
-        this.state = {};
+        this.state = {
+            showReadReceipts: false,
+        };
+        this.settingWatchers = [];
     }
 
+    public componentDidMount(): void {
+        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+        this.dispatcherRef = dis.register(this.onAction);
+    }
+
+    public componentWillUnmount(): void {
+        // Remove RoomStore listener
+        if (this.roomStoreToken) {
+            this.roomStoreToken.remove();
+        }
+        dis.unregister(this.dispatcherRef);
+        for (const watcher of this.settingWatchers) {
+            SettingsStore.unwatchSetting(watcher);
+        }
+    }
+
+    private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
+        const roomId = this.props.room.roomId;
+        const newState: Pick<IState, any> = {
+            // roomLoading: RoomViewStore.isRoomLoading(),
+            // roomLoadError: RoomViewStore.getRoomLoadError(),
+
+            showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+            initialEventId: RoomViewStore.getInitialEventId(),
+            initialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
+            replyToEvent: RoomViewStore.getQuotingEvent(),
+        };
+
+        this.settingWatchers = this.settingWatchers.concat([
+            SettingsStore.watchSetting("showReadReceipts", roomId, (...[,,, value]) =>
+                this.setState({ showReadReceipts: value as boolean }),
+            ),
+        ]);
+        this.setState(newState);
+    };
+
+    private onAction = (payload: ActionPayload): void => {
+        switch (payload.action) {
+            case Action.EditEvent:
+                this.setState({
+                    editState: payload.event ? new EditorStateTransfer(payload.event) : null,
+                }, () => {
+                    if (payload.event) {
+                        this.timelinePanelRef.current?.scrollToEventIfNeeded(payload.event.getId());
+                    }
+                });
+                break;
+            default:
+                break;
+        }
+    };
+
+    private onScroll = (): void => {
+        if (this.state.initialEventId && this.state.initialEventHighlighted) {
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: this.props.room.roomId,
+                event_id: this.state.initialEventId,
+                highlighted: false,
+                replyingToEvent: this.state.replyToEvent,
+            });
+        }
+    };
+
     private renderTimelineCardHeader = (): JSX.Element => {
         return <div className="mx_TimelineCard__header">
             <span>{ _t("Chat") }</span>
@@ -63,41 +149,59 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     };
 
     public render(): JSX.Element {
-        return (
+        const highlightedEventId = this.state.initialEventHighlighted
-            <BaseCard
+            ? this.state.initialEventId
-                className="mx_ThreadPanel mx_TimelineCard"
+            : null;
-                onClose={this.props.onClose}
-                withoutScrollContainer={true}
-                header={this.renderTimelineCardHeader()}
-            >
-                <TimelinePanel
-                    showReadReceipts={false} // TODO: RR's cause issues with limited horizontal space
-                    manageReadReceipts={true}
-                    manageReadMarkers={false} // No RM support in the TimelineCard
-                    sendReadReceiptOnLoad={true}
-                    timelineSet={this.props.room.getUnfilteredTimelineSet()}
-                    showUrlPreview={true}
-                    layout={Layout.Group}
-                    hideThreadedMessages={false}
-                    hidden={false}
-                    showReactions={true}
-                    className="mx_RoomView_messagePanel mx_GroupLayout"
-                    permalinkCreator={this.props.permalinkCreator}
-                    membersLoaded={true}
-                    editState={this.state.editState}
-                    eventId={this.props.initialEvent?.getId()}
-                    resizeNotifier={this.props.resizeNotifier}
-                />
 
-                <MessageComposer
+        return (
-                    room={this.props.room}
+            <RoomContext.Provider value={{
-                    resizeNotifier={this.props.resizeNotifier}
+                ...this.context,
-                    replyToEvent={this.state.replyToEvent}
+                timelineRenderingType: this.props.timelineRenderingType ?? this.context.timelineRenderingType,
-                    permalinkCreator={this.props.permalinkCreator}
+                liveTimeline: this.props.timelineSet.getLiveTimeline(),
-                    e2eStatus={this.props.e2eStatus}
+            }}>
-                    compact={true}
+                <BaseCard
-                />
+                    className="mx_ThreadPanel mx_TimelineCard"
-            </BaseCard>
+                    onClose={this.props.onClose}
+                    withoutScrollContainer={true}
+                    header={this.renderTimelineCardHeader()}
+                >
+                    <TimelinePanel
+                        ref={this.timelinePanelRef}
+                        showReadReceipts={/*this.state.showReadReceipts*/ false} // TODO: RR's cause issues with limited horizontal space
+                        manageReadReceipts={true}
+                        manageReadMarkers={false} // No RM support in the TimelineCard
+                        sendReadReceiptOnLoad={true}
+                        timelineSet={this.props.timelineSet}
+                        showUrlPreview={true}
+                        layout={Layout.Group}
+                        hideThreadedMessages={false}
+                        hidden={false}
+                        showReactions={true}
+                        className="mx_RoomView_messagePanel mx_GroupLayout"
+                        permalinkCreator={this.props.permalinkCreator}
+                        membersLoaded={true}
+                        editState={this.state.editState}
+                        eventId={this.state.initialEventId}
+                        resizeNotifier={this.props.resizeNotifier}
+                        highlightedEventId={highlightedEventId}
+                        onUserScroll={this.onScroll}
+                    />
+
+                    { ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0 && (
+                        <UploadBar room={this.props.room} relation={this.props.composerRelation} />
+                    ) }
+
+                    <MessageComposer
+                        room={this.props.room}
+                        relation={this.props.composerRelation}
+                        resizeNotifier={this.props.resizeNotifier}
+                        replyToEvent={this.state.replyToEvent}
+                        permalinkCreator={this.props.permalinkCreator}
+                        e2eStatus={this.props.e2eStatus}
+                        compact={true}
+                    />
+                </BaseCard>
+            </RoomContext.Provider>
         );
     }
 }