From ee3d2c8c5d3f66cc259e412df3cd1c865ebe2546 Mon Sep 17 00:00:00 2001 From: Filipe Marins Date: Tue, 26 Apr 2022 18:47:56 -0300 Subject: [PATCH] refactor: add message render component --- .../Message/MessageBodyRender/index.tsx | 4 +- .../MessageList/components/MessageContent.tsx | 21 ++--------- .../MessageList/components/MessageRender.tsx | 37 +++++++++++++++++++ .../components/ThreadMessagePreview.tsx | 24 ++---------- 4 files changed, 45 insertions(+), 41 deletions(-) create mode 100644 apps/meteor/client/views/room/MessageList/components/MessageRender.tsx diff --git a/apps/meteor/client/components/Message/MessageBodyRender/index.tsx b/apps/meteor/client/components/Message/MessageBodyRender/index.tsx index c08fb4c6f7c1b..ed25356a802af 100644 --- a/apps/meteor/client/components/Message/MessageBodyRender/index.tsx +++ b/apps/meteor/client/components/Message/MessageBodyRender/index.tsx @@ -17,7 +17,7 @@ type BodyProps = { tokens: MarkdownAST; mentions: UserMention[]; channels: ChannelMention[]; - disableBigEmoji?: boolean; + disableBigEmoji: boolean; onUserMentionClick?: (username: string) => (e: MouseEvent) => void; onChannelMentionClick?: (id: string) => (e: MouseEvent) => void; }; @@ -28,7 +28,7 @@ const MessageBodyRender: FC = ({ tokens, mentions = [], channels = [], - disableBigEmoji = false, + disableBigEmoji, onUserMentionClick, onChannelMentionClick, }) => { diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx index df599da9a921c..b431e2ca8c983 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx @@ -3,10 +3,8 @@ import { IMessage, isDiscussionMessage, isThreadMainMessage, ISubscription } fro import { MessageBody } from '@rocket.chat/fuselage'; import React, { FC, memo } from 'react'; -import { isE2EEMessage } from '../../../../../lib/isE2EEMessage'; import Attachments from '../../../../components/Message/Attachments'; import MessageActions from '../../../../components/Message/MessageActions'; -import MessageBodyRender from '../../../../components/Message/MessageBodyRender'; import BroadcastMetric from '../../../../components/Message/Metrics/Broadcast'; import DiscussionMetric from '../../../../components/Message/Metrics/Discussion'; import ThreadMetric from '../../../../components/Message/Metrics/Thread'; @@ -19,9 +17,9 @@ import MessageLocation from '../../../location/MessageLocation'; import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext'; import { useMessageListShowReadReceipt } from '../contexts/MessageListContext'; import { isOwnUserMessage } from '../lib/isOwnUserMessage'; -import EncryptedMessageRender from './EncryptedMessageRender'; import ReactionsList from './MessageReactionsList'; import ReadReceipt from './MessageReadReceipt'; +import MessageRender from './MessageRender'; import PreviewList from './UrlPreview'; const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?: ISubscription; id: IMessage['_id'] }> = ({ @@ -30,7 +28,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? }) => { const { broadcast, - actions: { openRoom, openThread, openUserCard, replyBroadcast }, + actions: { openRoom, openThread, replyBroadcast }, } = useMessageActions(); const runActionLink = useMessageRunActionLink(); @@ -38,7 +36,6 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? const oembedIsEnabled = useMessageOembedIsEnabled(); const shouldShowReadReceipt = useMessageListShowReadReceipt(); const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) }; - const isEncryptedMessage = isE2EEMessage(message); const shouldShowReactionList = message.reactions && Object.keys(message.reactions).length; @@ -47,19 +44,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? return ( <> - {!isEncryptedMessage && !message.blocks && message.md && ( - - )} - - {!isEncryptedMessage && !message.blocks && !message.md && message.msg} - - {isEncryptedMessage && } + {message.blocks && } {message.attachments && } diff --git a/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx b/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx new file mode 100644 index 0000000000000..72151ffb2b038 --- /dev/null +++ b/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx @@ -0,0 +1,37 @@ +/* eslint-disable complexity */ +import { IMessage } from '@rocket.chat/core-typings'; +import React, { FC, memo } from 'react'; + +import { isE2EEMessage } from '../../../../../lib/isE2EEMessage'; +import MessageBodyRender from '../../../../components/Message/MessageBodyRender'; +import { useMessageActions } from '../../contexts/MessageContext'; +import EncryptedMessageRender from './EncryptedMessageRender'; + +const MessageRender: FC<{ message: IMessage; disableBigEmoji?: boolean }> = ({ message, disableBigEmoji = false }) => { + const { + actions: { openRoom, openUserCard }, + } = useMessageActions(); + + const isEncryptedMessage = isE2EEMessage(message); + + return ( + <> + {!isEncryptedMessage && !message.blocks && message.md && ( + + )} + + {!isEncryptedMessage && !message.blocks && !message.md && message.msg} + + {isEncryptedMessage && } + + ); +}; + +export default memo(MessageRender); diff --git a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx index 9177688aa0081..95afe02105629 100644 --- a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx +++ b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx @@ -13,8 +13,6 @@ import { } from '@rocket.chat/fuselage'; import React, { FC } from 'react'; -import { isE2EEMessage } from '../../../../../lib/isE2EEMessage'; -import MessageBodyRender from '../../../../components/Message/MessageBodyRender'; import UserAvatar from '../../../../components/avatar/UserAvatar'; import { useTranslation } from '../../../../contexts/TranslationContext'; import { AsyncStatePhase } from '../../../../lib/asyncState'; @@ -22,18 +20,16 @@ import { useMessageActions } from '../../contexts/MessageContext'; import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext'; import { useMessageBody } from '../hooks/useMessageBody'; import { useParentMessage } from '../hooks/useParentMessage'; -import EncryptedMessageRender from './EncryptedMessageRender'; +import MessageRender from './MessageRender'; export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boolean }> = ({ message, sequential, ...props }) => { const { - actions: { openThread, openRoom, openUserCard }, + actions: { openThread }, } = useMessageActions(); const parentMessage = useParentMessage(message.tmid); const body = useMessageBody(parentMessage.value); const t = useTranslation(); - const isEncryptedMessage = isE2EEMessage(message); - const isSelecting = useIsSelecting(); const toggleSelected = useToggleSelect(message._id); const isSelected = useIsSelectedMessage(message._id); @@ -64,21 +60,7 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo - {message.ignored && t('Message_Ignored')} - {!isEncryptedMessage && !message.blocks && message.md && !message.ignored && ( - - )} - - {!isEncryptedMessage && !message.blocks && !message.md && !message.ignored && message.msg} - - {isEncryptedMessage && !message.ignored && } + {message.ignored ? t('Message_Ignored') : }