From c8e08b03cb42c910e794662e400f1029ec48565c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Mar 2022 10:05:53 +0000 Subject: [PATCH 1/3] Extract ThreadSummary into its own component --- src/components/views/rooms/EventTile.tsx | 58 +------------ src/components/views/rooms/ThreadSummary.tsx | 89 ++++++++++++++++++++ 2 files changed, 93 insertions(+), 54 deletions(-) create mode 100644 src/components/views/rooms/ThreadSummary.tsx diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 28073fed324..58a6842af6c 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -75,7 +75,6 @@ import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNo import { NotificationStateEvents } from '../../../stores/notifications/NotificationState'; import { NotificationColor } from '../../../stores/notifications/NotificationColor'; import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton'; -import { CardContext } from '../right_panel/BaseCard'; import { copyPlaintext } from '../../../utils/strings'; import { DecryptionFailureTracker } from '../../../DecryptionFailureTracker'; import RedactedBody from '../messages/RedactedBody'; @@ -83,6 +82,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { shouldDisplayReply } from '../../../utils/Reply'; import PosthogTrackers from "../../../PosthogTrackers"; import TileErrorBoundary from '../messages/TileErrorBoundary'; +import ThreadSummary, { ThreadMessagePreview } from './ThreadSummary'; export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations; @@ -348,7 +348,6 @@ interface IState { isQuoteExpanded?: boolean; thread: Thread; - threadReplyCount: number; threadLastReply: MatrixEvent; threadLastSender: RoomMember | null; threadNotification?: NotificationCountType; @@ -397,7 +396,6 @@ export class UnwrappedEventTile extends React.Component { hover: false, thread, - threadReplyCount: thread?.length, threadLastReply: thread?.replyToEvent, threadLastSender: thread?.replyToEvent?.sender, }; @@ -559,7 +557,6 @@ export class UnwrappedEventTile extends React.Component { this.setState({ threadLastReply: thread?.replyToEvent, threadLastSender: thread?.replyToEvent?.sender, - threadReplyCount: thread?.length, thread, }); }; @@ -658,64 +655,17 @@ export class UnwrappedEventTile extends React.Component { { this.state.thread.length } - { this.renderThreadLastMessagePreview() } + ; } - private renderThreadLastMessagePreview(): JSX.Element | null { - const { threadLastReply } = this.state; - const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(threadLastReply); - - const sender = this.state.thread?.roomState.getSentinelMember(threadLastReply.getSender()); - return <> - - { threadMessagePreview && ( -
- - { threadMessagePreview } - -
- ) } - ; - } - private renderThreadInfo(): React.ReactNode { if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) { return (

{ _t("From a thread") }

); - } else if (this.state.threadReplyCount && this.state.thread.id === this.props.mxEvent.getId()) { - let count: string | number = this.state.threadReplyCount; - if (!this.context.narrow) { - count = _t("%(count)s reply", { - count: this.state.threadReplyCount, - }); - } - return ( - - { context => - { - showThread({ rootEvent: this.props.mxEvent, push: context.isCard }); - PosthogTrackers.trackInteraction("WebRoomTimelineThreadSummaryButton", ev); - }} - aria-label={_t("Open thread")} - > - - { count } - - { this.renderThreadLastMessagePreview() } - - } - - ); + } else if (this.state.thread?.id === this.props.mxEvent.getId()) { + return ; } } diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx new file mode 100644 index 00000000000..78e296ee8cd --- /dev/null +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -0,0 +1,89 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { useContext } from "react"; +import { Thread, ThreadEvent } from "matrix-js-sdk/src/models/thread"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + +import { _t } from "../../../languageHandler"; +import { CardContext } from "../right_panel/BaseCard"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import { showThread } from "../../../dispatcher/dispatch-actions/threads"; +import PosthogTrackers from "../../../PosthogTrackers"; +import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; +import RoomContext from "../../../contexts/RoomContext"; +import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore"; +import MemberAvatar from "../avatars/MemberAvatar"; + +interface IProps { + mxEvent: MatrixEvent; + thread: Thread; +} + +const ThreadSummary = ({ mxEvent, thread }: IProps) => { + const roomContext = useContext(RoomContext); + const cardContext = useContext(CardContext); + const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length); + + let countSection: string | number = count; + if (!roomContext.narrow) { + countSection = _t("%(count)s reply", { count }); + } + + return ( + { + showThread({ + rootEvent: mxEvent, + push: cardContext.isCard, + }); + PosthogTrackers.trackInteraction("WebRoomTimelineThreadSummaryButton", ev); + }} + aria-label={_t("Open thread")} + > + + { countSection } + + + + ); +}; + +export const ThreadMessagePreview = ({ thread }: Pick) => { + const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.lastReply()); + const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(lastReply); + + const sender = thread.roomState.getSentinelMember(lastReply.getSender()); + return <> + + { threadMessagePreview && ( +
+ + { threadMessagePreview } + +
+ ) } + ; +}; + +export default ThreadSummary; From cc1f4a6fb5f3a1ab64e225bbd421c6d33570bdd9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Mar 2022 10:13:38 +0000 Subject: [PATCH 2/3] Clean up EventTile and extract more thread logic to hooks --- src/components/views/rooms/EventTile.tsx | 28 +------------------- src/components/views/rooms/ThreadSummary.tsx | 12 ++++++--- 2 files changed, 10 insertions(+), 30 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 58a6842af6c..3481a63d551 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -348,8 +348,6 @@ interface IState { isQuoteExpanded?: boolean; thread: Thread; - threadLastReply: MatrixEvent; - threadLastSender: RoomMember | null; threadNotification?: NotificationCountType; } @@ -396,8 +394,6 @@ export class UnwrappedEventTile extends React.Component { hover: false, thread, - threadLastReply: thread?.replyToEvent, - threadLastSender: thread?.replyToEvent?.sender, }; // don't do RR animations until we are mounted @@ -512,11 +508,6 @@ export class UnwrappedEventTile extends React.Component { const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); room?.on(ThreadEvent.New, this.onNewThread); - - if (this.state.threadLastReply?.isEncrypted()) { - this.state.threadLastReply.once(MatrixEventEvent.Decrypted, this.onEventDecryption); - MatrixClientPeg.get().decryptEventIfNeeded(this.state.threadLastReply); - } } private setupNotificationListener = (thread: Thread): void => { @@ -554,11 +545,7 @@ export class UnwrappedEventTile extends React.Component { this.setupNotificationListener(thread); } - this.setState({ - threadLastReply: thread?.replyToEvent, - threadLastSender: thread?.replyToEvent?.sender, - thread, - }); + this.setState({ thread }); }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -598,7 +585,6 @@ export class UnwrappedEventTile extends React.Component { if (this.threadState) { this.threadState.off(NotificationStateEvents.Update, this.onThreadStateUpdate); } - this.state.threadLastReply?.removeListener(MatrixEventEvent.Decrypted, this.onEventDecryption); } componentDidUpdate(prevProps: IProps, prevState: IState, snapshot) { @@ -607,20 +593,8 @@ export class UnwrappedEventTile extends React.Component { MatrixClientPeg.get().on(RoomEvent.Receipt, this.onRoomReceipt); this.isListeningForReceipts = true; } - - if (this.state.threadLastReply !== prevState.threadLastReply) { - if (this.state.threadLastReply.isEncrypted()) { - this.state.threadLastReply.once(MatrixEventEvent.Decrypted, this.onEventDecryption); - MatrixClientPeg.get().decryptEventIfNeeded(this.state.threadLastReply); - } - prevState.threadLastReply?.removeListener(MatrixEventEvent.Decrypted, this.onEventDecryption); - } } - private onEventDecryption = () => { - this.forceUpdate(); - }; - private onNewThread = (thread: Thread) => { if (thread.id === this.props.mxEvent.getId()) { this.updateThread(thread); diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 78e296ee8cd..673db12cffa 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -27,6 +27,8 @@ import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import RoomContext from "../../../contexts/RoomContext"; import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore"; import MemberAvatar from "../avatars/MemberAvatar"; +import { useAsyncMemo } from "../../../hooks/useAsyncMemo"; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; interface IProps { mxEvent: MatrixEvent; @@ -64,8 +66,12 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { }; export const ThreadMessagePreview = ({ thread }: Pick) => { + const cli = useContext(MatrixClientContext); const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.lastReply()); - const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(lastReply); + const preview = useAsyncMemo(async () => { + await cli.decryptEventIfNeeded(lastReply); + return MessagePreviewStore.instance.generatePreviewForEvent(lastReply); + }, [lastReply]); const sender = thread.roomState.getSentinelMember(lastReply.getSender()); return <> @@ -76,10 +82,10 @@ export const ThreadMessagePreview = ({ thread }: Pick) => { height={24} className="mx_ThreadInfo_avatar" /> - { threadMessagePreview && ( + { preview && (
- { threadMessagePreview } + { preview }
) } From f914180df947d80dbf39ebef9c70931593b7135b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Mar 2022 10:16:38 +0000 Subject: [PATCH 3/3] Hide thread summary if 0 replies and i18n --- src/components/views/rooms/ThreadSummary.tsx | 1 + src/i18n/strings/en_EN.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 673db12cffa..2a5865fddc9 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -39,6 +39,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { const roomContext = useContext(RoomContext); const cardContext = useContext(CardContext); const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length); + if (!count) return null; // We don't want to show a thread summary if the thread doesn't have replies yet let countSection: string | number = count; if (!roomContext.narrow) { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 96b054a83e8..2d75327de86 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1661,9 +1661,6 @@ "Edit message": "Edit message", "Mod": "Mod", "From a thread": "From a thread", - "%(count)s reply|other": "%(count)s replies", - "%(count)s reply|one": "%(count)s reply", - "Open thread": "Open thread", "This event could not be displayed": "This event could not be displayed", "Your key share request has been sent - please check your other sessions for key share requests.": "Your key share request has been sent - please check your other sessions for key share requests.", "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.": "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.", @@ -1884,6 +1881,9 @@ "Admin Tools": "Admin Tools", "Revoke invite": "Revoke invite", "Invited by %(sender)s": "Invited by %(sender)s", + "%(count)s reply|other": "%(count)s replies", + "%(count)s reply|one": "%(count)s reply", + "Open thread": "Open thread", "Jump to first unread message.": "Jump to first unread message.", "Mark all as read": "Mark all as read", "Unable to access your microphone": "Unable to access your microphone",