[FIX] Ignored messages reactivity

apps/meteor/client/components/message/variants/RoomMessage.tsx

@@ -22,18 +22,20 @@ import ToolboxHolder from '../ToolboxHolder';
 import RoomMessageContent from './room/RoomMessageContent';
 
 type RoomMessageProps = {
-	message: IMessage;
+	message: IMessage & { ignored?: boolean };
 	sequential: boolean;
 	unread: boolean;
 	mention: boolean;
 	all: boolean;
 	context?: MessageActionContext;
+	ignoredUser?: boolean;
 };
 
-const RoomMessage = ({ message, sequential, all, mention, unread, context }: RoomMessageProps): ReactElement => {
+const RoomMessage = ({ message, sequential, all, mention, unread, context, ignoredUser }: RoomMessageProps): ReactElement => {
 	const uid = useUserId();
 	const editing = useIsMessageHighlight(message._id);
-	const [ignored, toggleIgnoring] = useToggle((message as { ignored?: boolean }).ignored ?? false);
+	const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
+	const ignored = (ignoredUser || message.ignored) && !displayIgnoredMessage;
 	const { open: openUserCard } = useUserCard();
 
 	const selecting = useIsSelecting();
@@ -76,7 +78,7 @@ const RoomMessage = ({ message, sequential, all, mention, unread, context }: Roo
 				{!sequential && <MessageHeader message={message} />}
 
 				{ignored ? (
-					<IgnoredContent onShowMessageIgnored={toggleIgnoring} />
+					<IgnoredContent onShowMessageIgnored={toggleDisplayIgnoredMessage} />
 				) : (
 					<RoomMessageContent message={message} unread={unread} mention={mention} all={all} />
 				)}

apps/meteor/client/views/room/MessageList/MessageList.tsx

@@ -47,6 +47,7 @@ export const MessageList = ({ rid }: MessageListProps): ReactElement => {
 					const unread = Boolean(subscription?.tunread?.includes(message._id));
 					const mention = Boolean(subscription?.tunreadUser?.includes(message._id));
 					const all = Boolean(subscription?.tunreadGroup?.includes(message._id));
+					const ignoredUser = Boolean(subscription?.ignored?.includes(message.u._id));
 
 					return (
 						<Fragment key={message._id}>
@@ -56,7 +57,16 @@ export const MessageList = ({ rid }: MessageListProps): ReactElement => {
 								</MessageDivider>
 							)}
 
-							{visible && <RoomMessage message={message} sequential={shouldShowAsSequential} unread={unread} mention={mention} all={all} />}
+							{visible && (
+								<RoomMessage
+									message={message}
+									sequential={shouldShowAsSequential}
+									unread={unread}
+									mention={mention}
+									all={all}
+									ignoredUser={ignoredUser}
+								/>
+							)}
 
 							{isThreadMessage(message) && (
 								<ThreadMessagePreview

apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx

@@ -0,0 +1,85 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import proxyquire from 'proxyquire';
+import React from 'react';
+
+import type { default as _RoomMessage } from '../../../../../../client/components/message/variants/RoomMessage';
+
+const date = new Date('2021-10-27T00:00:00.000Z');
+const baseMessage: IMessage = {
+	ts: date,
+	u: {
+		_id: 'userId',
+		name: 'userName',
+		username: 'userName',
+	},
+	msg: 'message',
+	md: [
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'PLAIN_TEXT',
+					value: 'message',
+				},
+			],
+		},
+	],
+	rid: 'roomId',
+	_id: 'messageId',
+	_updatedAt: date,
+	urls: [],
+};
+
+const RoomMessage = proxyquire.noCallThru().load('../../../../../../client/components/message/variants/RoomMessage.tsx', {
+	'../../avatar/UserAvatar': () => <p>user avatar</p>,
+	'../../../hooks/useUserCard': {
+		useUserCard: () => ({
+			open: () => '',
+		}),
+	},
+	'../../../views/room/MessageList/contexts/MessageHighlightContext': {
+		useIsMessageHighlight: () => false,
+	},
+	'../../../views/room/MessageList/contexts/SelectedMessagesContext': {
+		useIsSelecting: () => '',
+		useToggleSelect: () => '',
+		useIsSelectedMessage: () => '',
+		useCountSelected: () => '',
+	},
+	'../IgnoredContent': () => <p>message ignored</p>,
+	'./room/RoomMessageContent': () => baseMessage.msg,
+	'../MessageHeader': () => <p>message header</p>,
+	'../StatusIndicators': { MessageIndicators: () => <p>message indicators</p> },
+	'../ToolboxHolder': () => <p>toolbox</p>,
+}).default as typeof _RoomMessage;
+
+describe('Message', () => {
+	it('should show normal message', () => {
+		render(<RoomMessage message={baseMessage} sequential={false} all={false} mention={false} unread={false} ignoredUser={false} />);
+
+		expect(screen.getByText(baseMessage.msg)).to.exist;
+	});
+
+	it('should show ignored message', () => {
+		render(<RoomMessage message={baseMessage} sequential={false} all={false} mention={false} unread={false} ignoredUser={true} />);
+
+		expect(screen.getByText('message ignored')).to.exist;
+	});
+
+	it('should show ignored message', () => {
+		render(
+			<RoomMessage
+				message={{ ...baseMessage, ignored: true }}
+				sequential={false}
+				all={false}
+				mention={false}
+				unread={false}
+				ignoredUser={false}
+			/>,
+		);
+
+		expect(screen.getByText('message ignored')).to.exist;
+	});
+});