refactor: add message render component

RocketChat · Apr 26, 2022 · ee3d2c8 · ee3d2c8
1 parent 42e0e4a
commit ee3d2c8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 41 deletions.
diff --git 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<HTMLDivElement>) => void;
 	onChannelMentionClick?: (id: string) => (e: MouseEvent<HTMLDivElement>) => void;
 };
@@ -28,7 +28,7 @@ const MessageBodyRender: FC<BodyProps> = ({
 	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
@@ -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,15 +28,14 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 }) => {
 	const {
 		broadcast,
-		actions: { openRoom, openThread, openUserCard, replyBroadcast },
+		actions: { openRoom, openThread, replyBroadcast },
 	} = useMessageActions();
 
 	const runActionLink = useMessageRunActionLink();
 
 	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 (
 		<>
 			<MessageBody data-qa-type='message-body'>
-				{!isEncryptedMessage && !message.blocks && message.md && (
-					<MessageBodyRender
-						onUserMentionClick={openUserCard}
-						onChannelMentionClick={openRoom}
-						mentions={message?.mentions || []}
-						channels={message?.channels || []}
-						tokens={message.md}
-					/>
-				)}
-
-				{!isEncryptedMessage && !message.blocks && !message.md && message.msg}
-
-				{isEncryptedMessage && <EncryptedMessageRender message={message} />}
+				<MessageRender message={message} />
 			</MessageBody>
 			{message.blocks && <MessageBlock mid={message._id} blocks={message.blocks} appId rid={message.rid} />}
 			{message.attachments && <Attachments attachments={message.attachments} file={message.file} />}

diff --git a/apps/meteor/client/views/room/MessageList/components/MessageRender.tsx 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 && (
+				<MessageBodyRender
+					onUserMentionClick={openUserCard}
+					onChannelMentionClick={openRoom}
+					mentions={message?.mentions || []}
+					channels={message?.channels || []}
+					tokens={message.md}
+					disableBigEmoji={disableBigEmoji}
+				/>
+			)}
+
+			{!isEncryptedMessage && !message.blocks && !message.md && message.msg}
+
+			{isEncryptedMessage && <EncryptedMessageRender message={message} />}
+		</>
+	);
+};
+
+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
@@ -13,27 +13,23 @@ 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';
 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
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>
 					<ThreadMessageBody>
-						{message.ignored && t('Message_Ignored')}
-						{!isEncryptedMessage && !message.blocks && message.md && !message.ignored && (
-							<MessageBodyRender
-								onUserMentionClick={openUserCard}
-								onChannelMentionClick={openRoom}
-								mentions={message?.mentions || []}
-								channels={message?.channels || []}
-								tokens={message.md}
-								disableBigEmoji
-							/>
-						)}
-
-						{!isEncryptedMessage && !message.blocks && !message.md && !message.ignored && message.msg}
-
-						{isEncryptedMessage && !message.ignored && <EncryptedMessageRender message={message} />}
+						{message.ignored ? t('Message_Ignored') : <MessageRender message={message} disableBigEmoji />}
 					</ThreadMessageBody>
 				</ThreadMessageContainer>
 			</ThreadMessageRow>