From de6d87b62f51ee75fdd791cbb8dc12f0b0e1cff3 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Wed, 16 Nov 2022 19:55:52 +0530 Subject: [PATCH 1/7] toggle state on ignoring a message --- .../client/views/room/MessageList/MessageList.tsx | 2 ++ .../views/room/MessageList/components/Message.tsx | 14 +++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx index c86cee3ccf6b..8418d86e3b5e 100644 --- a/apps/meteor/client/views/room/MessageList/MessageList.tsx +++ b/apps/meteor/client/views/room/MessageList/MessageList.tsx @@ -53,6 +53,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 isIgnored = Boolean(subscription?.ignored?.includes(message.u._id)); return ( @@ -77,6 +78,7 @@ export const MessageList = ({ rid }: MessageListProps): ReactElement => { unread={unread} mention={mention} all={all} + isIgnored={isIgnored} /> )} diff --git a/apps/meteor/client/views/room/MessageList/components/Message.tsx b/apps/meteor/client/views/room/MessageList/components/Message.tsx index 5bb3003e2707..e80ec93eea2b 100644 --- a/apps/meteor/client/views/room/MessageList/components/Message.tsx +++ b/apps/meteor/client/views/room/MessageList/components/Message.tsx @@ -2,7 +2,7 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { Message as MessageTemplate, MessageLeftContainer, MessageContainer, MessageBody, CheckBox } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; -import React, { FC, memo } from 'react'; +import React, { FC, memo, useEffect } from 'react'; import UserAvatar from '../../../../components/avatar/UserAvatar'; import { useMessageActions } from '../../contexts/MessageContext'; @@ -22,9 +22,10 @@ const Message: FC<{ unread: boolean; mention: boolean; all: boolean; -}> = ({ message, sequential, all, mention, unread, ...props }) => { + isIgnored: boolean; +}> = ({ message, sequential, all, mention, unread, isIgnored, ...props }) => { const isMessageHighlight = useIsMessageHighlight(message._id); - const [isMessageIgnored, toggleMessageIgnored] = useToggle((message as { ignored?: boolean }).ignored ?? false); + const [isMessageIgnored, toggleMessageIgnored] = useToggle(isIgnored); const { actions: { openUserCard }, } = useMessageActions(); @@ -34,6 +35,13 @@ const Message: FC<{ const isSelected = useIsSelectedMessage(message._id); useCountSelected(); + useEffect(() => { + if (isMessageIgnored !== isIgnored) { + toggleMessageIgnored(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isIgnored, toggleMessageIgnored]); + return ( Date: Wed, 16 Nov 2022 20:00:47 +0530 Subject: [PATCH 2/7] add missing hooks args --- .../meteor/client/views/room/MessageList/components/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/views/room/MessageList/components/Message.tsx b/apps/meteor/client/views/room/MessageList/components/Message.tsx index e80ec93eea2b..829b3759b99f 100644 --- a/apps/meteor/client/views/room/MessageList/components/Message.tsx +++ b/apps/meteor/client/views/room/MessageList/components/Message.tsx @@ -25,7 +25,7 @@ const Message: FC<{ isIgnored: boolean; }> = ({ message, sequential, all, mention, unread, isIgnored, ...props }) => { const isMessageHighlight = useIsMessageHighlight(message._id); - const [isMessageIgnored, toggleMessageIgnored] = useToggle(isIgnored); + const [isMessageIgnored, toggleMessageIgnored] = useToggle((message as { ignored?: boolean }).ignored ?? isIgnored); const { actions: { openUserCard }, } = useMessageActions(); From 6e415f790859b890d9a0c47dc0bfebc29b4bfc4a Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Mon, 21 Nov 2022 11:59:39 -0300 Subject: [PATCH 3/7] Change ignored logic --- .../views/room/MessageList/MessageList.tsx | 4 ++-- .../room/MessageList/components/Message.tsx | 18 +++++++----------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx index 8418d86e3b5e..b5cb5051c813 100644 --- a/apps/meteor/client/views/room/MessageList/MessageList.tsx +++ b/apps/meteor/client/views/room/MessageList/MessageList.tsx @@ -53,7 +53,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 isIgnored = Boolean(subscription?.ignored?.includes(message.u._id)); + const isUserIgnored = Boolean(subscription?.ignored?.includes(message.u._id)); return ( @@ -78,7 +78,7 @@ export const MessageList = ({ rid }: MessageListProps): ReactElement => { unread={unread} mention={mention} all={all} - isIgnored={isIgnored} + isUserIgnored={isUserIgnored} /> )} diff --git a/apps/meteor/client/views/room/MessageList/components/Message.tsx b/apps/meteor/client/views/room/MessageList/components/Message.tsx index 829b3759b99f..81f10ce9ef7b 100644 --- a/apps/meteor/client/views/room/MessageList/components/Message.tsx +++ b/apps/meteor/client/views/room/MessageList/components/Message.tsx @@ -2,7 +2,7 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { Message as MessageTemplate, MessageLeftContainer, MessageContainer, MessageBody, CheckBox } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; -import React, { FC, memo, useEffect } from 'react'; +import React, { FC, memo } from 'react'; import UserAvatar from '../../../../components/avatar/UserAvatar'; import { useMessageActions } from '../../contexts/MessageContext'; @@ -22,10 +22,11 @@ const Message: FC<{ unread: boolean; mention: boolean; all: boolean; - isIgnored: boolean; -}> = ({ message, sequential, all, mention, unread, isIgnored, ...props }) => { + isUserIgnored: boolean; +}> = ({ message, sequential, all, mention, unread, isUserIgnored, ...props }) => { const isMessageHighlight = useIsMessageHighlight(message._id); - const [isMessageIgnored, toggleMessageIgnored] = useToggle((message as { ignored?: boolean }).ignored ?? isIgnored); + const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false); + const { actions: { openUserCard }, } = useMessageActions(); @@ -35,12 +36,7 @@ const Message: FC<{ const isSelected = useIsSelectedMessage(message._id); useCountSelected(); - useEffect(() => { - if (isMessageIgnored !== isIgnored) { - toggleMessageIgnored(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isIgnored, toggleMessageIgnored]); + const isMessageIgnored = (isUserIgnored || (message as { ignored?: boolean }).ignored) && !displayIgnoredMessage; return ( - + )} From c3f2865c708e3f8986ce9901bb2bdf48184593fa Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 13 Dec 2022 19:05:06 +0530 Subject: [PATCH 4/7] add unit tests --- .../views/room/MessageList/Message.spec.tsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx new file mode 100644 index 000000000000..f311f566d791 --- /dev/null +++ b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx @@ -0,0 +1,75 @@ +import { render, screen } from '@testing-library/react'; +import { expect } from 'chai'; +import proxyquire from 'proxyquire'; +import React from 'react'; + +const date = new Date('2021-10-27T00:00:00.000Z'); +const baseMessage = { + 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 Message = proxyquire.noCallThru().load('../../../../../../client/views/room/MessageList/components/Message.tsx', { + '../../../../components/avatar/UserAvatar': () =>

user avatar

, + '../../contexts/MessageContext': { + useMessageActions: () => ({ + actions: { + openUserCard: () => '', + }, + }), + }, + '../contexts/MessageHighlightContext': { + useIsMessageHighlight: () => false, + }, + '../contexts/SelectedMessagesContext': { + useIsSelecting: () => '', + useToggleSelect: () => '', + useIsSelectedMessage: () => '', + useCountSelected: () => '', + }, + './MessageContentIgnored': () =>

message ignored

, + './MessageContent': () => baseMessage.msg, + './MessageHeader': () =>

message header

, + './MessageIndicators': { MessageIndicators: () =>

message indicators

}, + './Toolbox': () =>

toolbox

, +}).default; + +describe('Message', () => { + it('should show normal message', () => { + render(); + + expect(screen.getByText(baseMessage.msg)).to.exist; + }); + + it('should show ignored message', () => { + render(); + + expect(screen.getByText('message ignored')).to.exist; + }); + + it('should show ignored message', () => { + render(); + + expect(screen.getByText('message ignored')).to.exist; + }); +}); From b7d8356eed5af4784f1fcbf5696f45e233b268b8 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Thu, 29 Dec 2022 18:31:38 -0300 Subject: [PATCH 5/7] Readapt unit test --- .../message/variants/RoomMessage.tsx | 5 ++- .../views/room/MessageList/Message.spec.tsx | 43 ++++++++++++------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx index fe963912ae7a..0021e9fa104a 100644 --- a/apps/meteor/client/components/message/variants/RoomMessage.tsx +++ b/apps/meteor/client/components/message/variants/RoomMessage.tsx @@ -1,3 +1,4 @@ +import type { IMessage } from '@rocket.chat/core-typings'; import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; import { useUserId } from '@rocket.chat/ui-contexts'; @@ -21,7 +22,7 @@ import ToolboxHolder from '../ToolboxHolder'; import RoomMessageContent from './room/RoomMessageContent'; type RoomMessageProps = { - message: MessageWithMdEnforced; + message: MessageWithMdEnforced; sequential: boolean; unread: boolean; mention: boolean; @@ -33,7 +34,7 @@ const RoomMessage = ({ message, sequential, all, mention, unread, ignoredUser }: const uid = useUserId(); const editing = useIsMessageHighlight(message._id); const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false); - const ignored = (ignoredUser || (message as { ignored?: boolean }).ignored) && !displayIgnoredMessage; + const ignored = (ignoredUser || message.ignored) && !displayIgnoredMessage; const { actions: { openUserCard }, } = useMessageActions(); diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx index f311f566d791..9f015710a159 100644 --- a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx +++ b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx @@ -1,10 +1,14 @@ +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'; +import type { MessageWithMdEnforced } from '../../../../../../client/views/room/MessageList/lib/parseMessageTextToAstMarkdown'; + const date = new Date('2021-10-27T00:00:00.000Z'); -const baseMessage = { +const baseMessage: MessageWithMdEnforced = { ts: date, u: { _id: 'userId', @@ -29,46 +33,55 @@ const baseMessage = { urls: [], }; -const Message = proxyquire.noCallThru().load('../../../../../../client/views/room/MessageList/components/Message.tsx', { - '../../../../components/avatar/UserAvatar': () =>

user avatar

, - '../../contexts/MessageContext': { +const RoomMessage = proxyquire.noCallThru().load('../../../../../../client/components/message/variants/RoomMessage.tsx', { + '../../avatar/UserAvatar': () =>

user avatar

, + '../../../views/room/contexts/MessageContext': { useMessageActions: () => ({ actions: { openUserCard: () => '', }, }), }, - '../contexts/MessageHighlightContext': { + '../../../views/room/MessageList/contexts/MessageHighlightContext': { useIsMessageHighlight: () => false, }, - '../contexts/SelectedMessagesContext': { + '../../../views/room/MessageList/contexts/SelectedMessagesContext': { useIsSelecting: () => '', useToggleSelect: () => '', useIsSelectedMessage: () => '', useCountSelected: () => '', }, - './MessageContentIgnored': () =>

message ignored

, - './MessageContent': () => baseMessage.msg, - './MessageHeader': () =>

message header

, - './MessageIndicators': { MessageIndicators: () =>

message indicators

}, - './Toolbox': () =>

toolbox

, -}).default; + '../IgnoredContent': () =>

message ignored

, + './room/RoomMessageContent': () => baseMessage.msg, + '../MessageHeader': () =>

message header

, + '../StatusIndicators': { MessageIndicators: () =>

message indicators

}, + '../ToolboxHolder': () =>

toolbox

, +}).default as typeof _RoomMessage; describe('Message', () => { it('should show normal message', () => { - render(); + render(); expect(screen.getByText(baseMessage.msg)).to.exist; }); it('should show ignored message', () => { - render(); + render(); expect(screen.getByText('message ignored')).to.exist; }); it('should show ignored message', () => { - render(); + render( + , + ); expect(screen.getByText('message ignored')).to.exist; }); From 8bb00f8e49a6383d12f66691243d2177b105c68a Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Wed, 8 Feb 2023 15:46:31 +0530 Subject: [PATCH 6/7] fix ts --- .../tests/unit/client/views/room/MessageList/Message.spec.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx index 9f015710a159..b22549e2c43a 100644 --- a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx +++ b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx @@ -5,10 +5,9 @@ import proxyquire from 'proxyquire'; import React from 'react'; import type { default as _RoomMessage } from '../../../../../../client/components/message/variants/RoomMessage'; -import type { MessageWithMdEnforced } from '../../../../../../client/views/room/MessageList/lib/parseMessageTextToAstMarkdown'; const date = new Date('2021-10-27T00:00:00.000Z'); -const baseMessage: MessageWithMdEnforced = { +const baseMessage: IMessage = { ts: date, u: { _id: 'userId', From acd7fb7d6db98d6524290c2f30b3505338cdfb51 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Wed, 8 Feb 2023 21:05:39 +0530 Subject: [PATCH 7/7] fix unit tests --- .../unit/client/views/room/MessageList/Message.spec.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx index b22549e2c43a..94f05a538abd 100644 --- a/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx +++ b/apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx @@ -34,11 +34,9 @@ const baseMessage: IMessage = { const RoomMessage = proxyquire.noCallThru().load('../../../../../../client/components/message/variants/RoomMessage.tsx', { '../../avatar/UserAvatar': () =>

user avatar

, - '../../../views/room/contexts/MessageContext': { - useMessageActions: () => ({ - actions: { - openUserCard: () => '', - }, + '../../../hooks/useUserCard': { + useUserCard: () => ({ + open: () => '', }), }, '../../../views/room/MessageList/contexts/MessageHighlightContext': {