Removed prop drilling highlights

RocketChat · Apr 2, 2022 · b37b340 · b37b340
1 parent c4829b5
commit b37b340
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 46 deletions.
diff --git a/client/components/Message/MessageBodyRender/PlainText.tsx b/client/components/Message/MessageBodyRender/PlainText.tsx
@@ -1,15 +1,15 @@
 import { Plain as ASTPlain } from '@rocket.chat/message-parser';
 import React, { FC, memo } from 'react';
 
+import { useMessageListHighlights } from '../../../views/room/MessageList/contexts/MessageListContext';
 import Highlighter from '../../Highlighter';
-import { useMessageBodyHighlights } from './contexts/MessageBodyContext';
 
 type PlainTextType = {
 	value: ASTPlain['value'];
 };
 
 const PlainText: FC<PlainTextType> = ({ value: text }) => {
-	const highlights = useMessageBodyHighlights();
+	const highlights = useMessageListHighlights();
 
 	if (highlights) {
 		return <Highlighter text={text} wordsToHighlight={highlights} />;

diff --git a/client/components/Message/MessageBodyRender/contexts/MessageBodyContext.ts b/client/components/Message/MessageBodyRender/contexts/MessageBodyContext.ts
@@ -4,19 +4,13 @@ import { ChannelMention } from '../definitions/ChannelMention';
 import { UserMention } from '../definitions/UserMention';
 
 type MessageBodyContextType = {
-	highlights?: {
-		highlight: string;
-		regex: RegExp;
-		urlRegex: RegExp;
-	}[];
 	mentions?: UserMention[];
 	channels?: ChannelMention[];
 	onUserMentionClick?: (username: string) => (e: MouseEvent<HTMLDivElement>) => void;
 	onChannelMentionClick?: (id: string) => (e: MouseEvent<HTMLDivElement>) => void;
 };
 
 export const MessageBodyContext = createContext<MessageBodyContextType>({
-	highlights: undefined,
 	mentions: [],
 	channels: [],
 });
@@ -28,17 +22,6 @@ export const useMessageBodyUserMentions = (): UserMention[] => {
 	return mentions;
 };
 
-export const useMessageBodyHighlights = ():
-	| {
-			highlight: string;
-			regex: RegExp;
-			urlRegex: RegExp;
-	  }[]
-	| undefined => {
-	const { highlights } = useMessageBodyContext();
-	return highlights;
-};
-
 export const useMessageBodyChannelMentions = (): ChannelMention[] => {
 	const { channels = [] } = useMessageBodyContext();
 	return channels;

diff --git a/client/components/Message/MessageBodyRender/index.tsx b/client/components/Message/MessageBodyRender/index.tsx
@@ -15,13 +15,6 @@ import { UserMention } from './definitions/UserMention';
 
 type BodyProps = {
 	tokens: MarkdownAST;
-	highlights:
-		| {
-				highlight: string;
-				regex: RegExp;
-				urlRegex: RegExp;
-		  }[]
-		| undefined;
 	mentions: UserMention[];
 	channels: ChannelMention[];
 	onUserMentionClick?: (username: string) => (e: MouseEvent<HTMLDivElement>) => void;
@@ -30,20 +23,13 @@ type BodyProps = {
 
 const isBigEmoji = (tokens: MarkdownAST): tokens is [ASTBigEmoji] => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
 
-const MessageBodyRender: FC<BodyProps> = ({
-	tokens,
-	highlights,
-	mentions = [],
-	channels = [],
-	onUserMentionClick,
-	onChannelMentionClick,
-}) => {
+const MessageBodyRender: FC<BodyProps> = ({ tokens, mentions = [], channels = [], onUserMentionClick, onChannelMentionClick }) => {
 	if (isBigEmoji(tokens)) {
 		return <BigEmoji value={tokens[0].value} />;
 	}
 
 	return (
-		<MessageBodyContext.Provider value={{ highlights, mentions, channels, onUserMentionClick, onChannelMentionClick }}>
+		<MessageBodyContext.Provider value={{ mentions, channels, onUserMentionClick, onChannelMentionClick }}>
 			{tokens.map((block, index) => {
 				if (block.type === 'UNORDERED_LIST') {
 					return <UnorderedList value={block.value} key={index} />;

diff --git a/client/views/room/MessageList/components/EncryptedMessageRender.tsx b/client/views/room/MessageList/components/EncryptedMessageRender.tsx
@@ -5,12 +5,10 @@ import { IMessage } from '../../../../../definition/IMessage';
 import MessageBodyRender from '../../../../components/Message/MessageBodyRender';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useMessageActions } from '../../contexts/MessageContext';
-import { useMessageListHighlights } from '../contexts/MessageListContext';
 
 const EncryptedMessageRender = ({ message }: { message: IMessage }): ReactElement => {
 	const tokens = useMemo(() => parser(message.msg), [message.msg]);
 	const t = useTranslation();
-	const highlights = useMessageListHighlights();
 
 	const {
 		actions: { openUserCard, openRoom },
@@ -26,7 +24,6 @@ const EncryptedMessageRender = ({ message }: { message: IMessage }): ReactElemen
 			onChannelMentionClick={openRoom}
 			mentions={message?.mentions || []}
 			channels={message?.channels || []}
-			highlights={highlights}
 			tokens={tokens}
 		/>
 	);

diff --git a/client/views/room/MessageList/components/MessageContent.tsx b/client/views/room/MessageList/components/MessageContent.tsx
@@ -18,7 +18,7 @@ import { UserPresence } from '../../../../lib/presence';
 import MessageBlock from '../../../blocks/MessageBlock';
 import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useMessageListHighlights, useMessageListShowReadReceipt } from '../contexts/MessageListContext';
+import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
 import EncryptedMessageRender from './EncryptedMessageRender';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
@@ -35,8 +35,6 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 
 	const runActionLink = useMessageRunActionLink();
 
-	const highlights = useMessageListHighlights();
-
 	const oembedIsEnabled = useMessageOembedIsEnabled();
 	const shouldShowReadReceipt = useMessageListShowReadReceipt();
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
@@ -55,7 +53,6 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 						onChannelMentionClick={openRoom}
 						mentions={message?.mentions || []}
 						channels={message?.channels || []}
-						highlights={highlights}
 						tokens={message.md}
 					/>
 				)}

diff --git a/client/views/room/MessageList/contexts/MessageListContext.tsx b/client/views/room/MessageList/contexts/MessageListContext.tsx
@@ -15,13 +15,12 @@ export type MessageListContextValue = {
 	showRealName: boolean;
 	showUsername: boolean;
 	showReadReceipt: boolean;
-	highlights:
+	highlights?:
 		| {
 				highlight: string;
 				regex: RegExp;
 				urlRegex: RegExp;
-		  }[]
-		| undefined;
+		  }[];
 };
 
 export const MessageListContext = createContext<MessageListContextValue>({
@@ -43,7 +42,6 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showRealName: false,
 	showUsername: false,
 	showReadReceipt: false,
-	highlights: [],
 });
 
 export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>