From b740e03d92beb946abe7682472bf0737d2b9754b Mon Sep 17 00:00:00 2001 From: Filipe Marins Date: Wed, 20 Apr 2022 11:11:31 -0300 Subject: [PATCH 1/3] fix: show read receipts with color gray instead of hidden --- .../views/room/MessageList/components/MessageContent.tsx | 2 +- .../room/MessageList/components/MessageReadReceipt.tsx | 4 ++-- .../views/room/MessageList/contexts/MessageListContext.tsx | 6 ++++-- .../room/MessageList/providers/MessageListProvider.tsx | 2 +- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx index 4c012a5e6fc4..a58d37e9e73e 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx @@ -111,7 +111,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? {oembedIsEnabled && message.urls && } - {shouldShowReadReceipt && } + {shouldShowReadReceipt && } ); }; diff --git a/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx b/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx index 0f2c24ea658c..6dfb282489cd 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx @@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Icon } from '@rocket.chat/fuselage'; import React, { ReactElement } from 'react'; -const MessageReadReceipt = (): ReactElement | null => ( +const MessageReadReceipt = ({ unread }: { unread?: boolean }): ReactElement | null => ( ( right: 0.5rem; `} > - + ); diff --git a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx index 69cd0a21a3b1..8fb4102a5a82 100644 --- a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx +++ b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx @@ -11,6 +11,7 @@ export type MessageListContextValue = { useReactToMessage: (message: IMessage) => (reaction: string) => void; useReactionsFilter: (message: IMessage) => (reaction: string) => string[]; useOpenEmojiPicker: (message: IMessage) => (event: React.MouseEvent) => void; + showReadReceipt: boolean; showRoles: boolean; showRealName: boolean; showUsername: boolean; @@ -38,6 +39,7 @@ export const MessageListContext = createContext({ (message) => (reaction: string): string[] => message.reactions ? message.reactions[reaction]?.usernames || [] : [], + showReadReceipt: false, showRoles: false, showRealName: false, showUsername: false, @@ -51,8 +53,8 @@ export const useShowFollowing: MessageListContextValue['useShowFollowing'] = (.. useContext(MessageListContext).useShowFollowing(...args); export const useMessageDateFormatter: MessageListContextValue['useMessageDateFormatter'] = (...args) => useContext(MessageListContext).useMessageDateFormatter(...args); -export const useMessageShowReadReceipt: MessageListContextValue['useShowReadReceipt'] = (...args) => - useContext(MessageListContext).useShowReadReceipt(...args); +export const useMessageListShowReadReceipt = (): MessageListContextValue['showReadReceipt'] => + useContext(MessageListContext).showReadReceipt; export const useMessageListShowRoles = (): MessageListContextValue['showRoles'] => useContext(MessageListContext).showRoles; export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName; export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername; diff --git a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx index d1df12b9ba13..4283ded7800f 100644 --- a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx +++ b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx @@ -80,7 +80,7 @@ export const MessageListProvider: FC<{ () => (date: Date): string => date.toLocaleString(), - + showReadReceipt, showRoles, showRealName, showUsername, From 2222c2cd4542ca123e38661c8e92bb21779c96ef Mon Sep 17 00:00:00 2001 From: Filipe Marins Date: Wed, 20 Apr 2022 11:23:28 -0300 Subject: [PATCH 2/3] fix: rename function --- .../views/room/MessageList/components/MessageContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx index a58d37e9e73e..2ac38521745c 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx @@ -17,7 +17,7 @@ import { UserPresence } from '../../../../lib/presence'; import MessageBlock from '../../../blocks/MessageBlock'; import MessageLocation from '../../../location/MessageLocation'; import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext'; -import { useMessageShowReadReceipt } from '../contexts/MessageListContext'; +import { useMessageListShowReadReceipt } from '../contexts/MessageListContext'; import { isOwnUserMessage } from '../lib/isOwnUserMessage'; import EncryptedMessageRender from './EncryptedMessageRender'; import ReactionsList from './MessageReactionsList'; @@ -36,7 +36,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? const runActionLink = useMessageRunActionLink(); const oembedIsEnabled = useMessageOembedIsEnabled(); - const shouldShowReadReceipt = useMessageShowReadReceipt({ message }); + const shouldShowReadReceipt = useMessageListShowReadReceipt({ message }); const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) }; const isEncryptedMessage = isE2EEMessage(message); From ea1294bb8c1344abb292360db1719d5772dc5bc8 Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Wed, 20 Apr 2022 12:02:35 -0300 Subject: [PATCH 3/3] review --- .../client/views/room/MessageList/components/MessageContent.tsx | 2 +- .../views/room/MessageList/components/MessageReadReceipt.tsx | 2 +- .../views/room/MessageList/contexts/MessageListContext.tsx | 2 -- .../views/room/MessageList/providers/MessageListProvider.tsx | 1 - 4 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx index 2ac38521745c..df599da9a921 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx @@ -36,7 +36,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription? const runActionLink = useMessageRunActionLink(); const oembedIsEnabled = useMessageOembedIsEnabled(); - const shouldShowReadReceipt = useMessageListShowReadReceipt({ message }); + const shouldShowReadReceipt = useMessageListShowReadReceipt(); const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) }; const isEncryptedMessage = isE2EEMessage(message); diff --git a/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx b/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx index 6dfb282489cd..a6e004a299e4 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx @@ -10,7 +10,7 @@ const MessageReadReceipt = ({ unread }: { unread?: boolean }): ReactElement | nu right: 0.5rem; `} > - + ); diff --git a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx index 8fb4102a5a82..006a6bdeaf37 100644 --- a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx +++ b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx @@ -5,7 +5,6 @@ export type MessageListContextValue = { useShowTranslated: ({ message }: { message: IMessage }) => boolean; useShowStarred: ({ message }: { message: IMessage }) => boolean; useShowFollowing: ({ message }: { message: IMessage }) => boolean; - useShowReadReceipt: ({ message }: { message: IMessage }) => boolean; useMessageDateFormatter: () => (date: Date) => string; useUserHasReacted: (message: IMessage) => (reaction: string) => boolean; useReactToMessage: (message: IMessage) => (reaction: string) => void; @@ -27,7 +26,6 @@ export const MessageListContext = createContext({ useShowTranslated: () => false, useShowStarred: () => false, useShowFollowing: () => false, - useShowReadReceipt: () => false, useUserHasReacted: () => (): boolean => false, useMessageDateFormatter: () => diff --git a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx index 4283ded7800f..8066cf875cfa 100644 --- a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx +++ b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx @@ -75,7 +75,6 @@ export const MessageListProvider: FC<{ useShowStarred: hasSubscription ? ({ message }): boolean => Boolean(Array.isArray(message.starred) && message.starred.find((star) => star._id === uid)) : (): boolean => false, - useShowReadReceipt: ({ message }): boolean => showReadReceipt && !message.unread, useMessageDateFormatter: () => (date: Date): string =>