From 4774c8a669bb6a49a41dc523efe547d927814198 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 4 Mar 2024 10:27:05 +1100 Subject: [PATCH] fix: consolidate isDetailView into one type called hasDetailView which we import in various components --- .../message/message-content/MessageContent.tsx | 4 ++-- .../message-content/MessageContentWithStatus.tsx | 6 +++--- .../message/message-content/MessageQuote.tsx | 4 ++-- .../message/message-content/MessageReactions.tsx | 4 ++-- .../message/message-content/MessageStatus.tsx | 4 ++-- .../message/message-content/quote/Quote.tsx | 4 ++-- .../message/message-content/quote/QuoteAuthor.tsx | 5 +++-- .../message-item/ExpirableReadableMessage.tsx | 5 +++-- .../message-item/GenericReadableMessage.tsx | 15 ++++++++------- .../conversation/message/message-item/Message.tsx | 6 ++++-- 10 files changed, 31 insertions(+), 26 deletions(-) diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 149ab12a9..04f8b9e1f 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -20,6 +20,7 @@ import { import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation'; import { canDisplayImage } from '../../../../types/Attachment'; import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer'; +import { hasDetailView } from '../message-item/Message'; import { MessageAttachment } from './MessageAttachment'; import { MessageAvatar } from './MessageAvatar'; import { MessageHighlighter } from './MessageHighlighter'; @@ -32,9 +33,8 @@ export type MessageContentSelectorProps = Pick< 'text' | 'direction' | 'timestamp' | 'serverTimestamp' | 'previews' | 'quote' | 'attachments' >; -type Props = { +type Props = hasDetailView & { messageId: string; - isDetailView?: boolean; }; // TODO not too sure what is this doing? It is not preventDefault() diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index 7caccde17..3b415d578 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx @@ -15,6 +15,7 @@ import { import { Reactions } from '../../../../util/reactions'; import { Flex } from '../../../basic/Flex'; import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage'; +import { hasDetailView } from '../message-item/Message'; import { MessageAuthorText } from './MessageAuthorText'; import { MessageContent } from './MessageContent'; import { MessageContextMenu } from './MessageContextMenu'; @@ -26,15 +27,14 @@ export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick< 'conversationType' | 'direction' | 'isDeleted' >; -type Props = { +type Props = hasDetailView & { messageId: string; ctxMenuID: string; - isDetailView?: boolean; dataTestId: string; enableReactions: boolean; }; -const StyledMessageContentContainer = styled.div<{ isIncoming: boolean; isDetailView: boolean }>` +const StyledMessageContentContainer = styled.div` display: flex; flex-direction: column; justify-content: flex-start; diff --git a/ts/components/conversation/message/message-content/MessageQuote.tsx b/ts/components/conversation/message/message-content/MessageQuote.tsx index b05b6b78a..e241d662e 100644 --- a/ts/components/conversation/message/message-content/MessageQuote.tsx +++ b/ts/components/conversation/message/message-content/MessageQuote.tsx @@ -8,11 +8,11 @@ import { openConversationToSpecificMessage } from '../../../../state/ducks/conve import { StateType } from '../../../../state/reducer'; import { useMessageDirection } from '../../../../state/selectors'; import { getMessageQuoteProps } from '../../../../state/selectors/conversations'; +import { hasDetailView } from '../message-item/Message'; import { Quote } from './quote/Quote'; -type Props = { +type Props = hasDetailView & { messageId: string; - isDetailView?: boolean; }; export type MessageQuoteSelectorProps = Pick; diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx index bd2741e2e..0dbb27353 100644 --- a/ts/components/conversation/message/message-content/MessageReactions.tsx +++ b/ts/components/conversation/message/message-content/MessageReactions.tsx @@ -9,6 +9,7 @@ import { SortedReactionList } from '../../../../types/Reaction'; import { nativeEmojiData } from '../../../../util/emoji'; import { Flex } from '../../../basic/Flex'; import { SessionIcon } from '../../../icon'; +import { hasDetailView } from '../message-item/Message'; import { Reaction, ReactionProps } from '../reactions/Reaction'; import { StyledPopupContainer } from '../reactions/ReactionPopup'; @@ -137,7 +138,7 @@ export type MessageReactsSelectorProps = Pick< 'convoId' | 'serverId' | 'reacts' | 'sortedReacts' >; -type Props = { +type Props = hasDetailView & { messageId: string; hasReactLimit?: boolean; onClick: (emoji: string) => void; @@ -147,7 +148,6 @@ type Props = { inModal?: boolean; onSelected?: (emoji: string) => boolean; noAvatar: boolean; - isDetailView?: boolean; }; export const MessageReactions = (props: Props) => { diff --git a/ts/components/conversation/message/message-content/MessageStatus.tsx b/ts/components/conversation/message/message-content/MessageStatus.tsx index d28a41ef7..eeaa3da59 100644 --- a/ts/components/conversation/message/message-content/MessageStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageStatus.tsx @@ -10,9 +10,9 @@ import { useSelectedIsGroupOrCommunity } from '../../../../state/selectors/selec import { SpacerXS } from '../../../basic/Text'; import { SessionIcon, SessionIconType } from '../../../icon'; import { ExpireTimer } from '../../ExpireTimer'; +import { hasDetailView } from '../message-item/Message'; -type Props = { - isDetailView: boolean; +type Props = hasDetailView & { messageId: string; dataTestId?: string | undefined; }; diff --git a/ts/components/conversation/message/message-content/quote/Quote.tsx b/ts/components/conversation/message/message-content/quote/Quote.tsx index f60aed64c..b5e86717f 100644 --- a/ts/components/conversation/message/message-content/quote/Quote.tsx +++ b/ts/components/conversation/message/message-content/quote/Quote.tsx @@ -4,6 +4,7 @@ import { isEmpty } from 'lodash'; import styled from 'styled-components'; import { useIsMessageSelectionMode } from '../../../../../state/selectors/selectedConversation'; import * as MIME from '../../../../../types/MIME'; +import { hasDetailView } from '../../message-item/Message'; import { QuoteAuthor } from './QuoteAuthor'; import { QuoteIconContainer } from './QuoteIconContainer'; import { QuoteText } from './QuoteText'; @@ -43,14 +44,13 @@ const StyledQuoteTextContent = styled.div` justify-content: center; `; -export type QuoteProps = { +export type QuoteProps = hasDetailView & { author: string; isFromMe: boolean; isIncoming: boolean; referencedMessageNotFound: boolean; text?: string; attachment?: QuotedAttachmentType; - isDetailView?: boolean; onClick?: (e: React.MouseEvent) => void; }; diff --git a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx index f9c508c4c..4d5ab0a63 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx @@ -4,9 +4,10 @@ import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector'; import { PubKey } from '../../../../../session/types'; import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation'; import { ContactName } from '../../../ContactName'; +import { hasDetailView } from '../../message-item/Message'; import { QuoteProps } from './Quote'; -const StyledQuoteAuthor = styled.div<{ isIncoming: boolean; isDetailView?: boolean }>` +const StyledQuoteAuthor = styled.div` color: ${props => props.isIncoming ? 'var(--message-bubbles-received-text-color)' @@ -23,7 +24,7 @@ const StyledQuoteAuthor = styled.div<{ isIncoming: boolean; isDetailView?: boole } `; -type QuoteAuthorProps = Pick & { isDetailView?: boolean }; +type QuoteAuthorProps = Pick & hasDetailView; export const QuoteAuthor = (props: QuoteAuthorProps) => { const { author, isIncoming, isDetailView } = props; diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx index d6e5c7c12..d3696385b 100644 --- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx @@ -9,6 +9,7 @@ import { getConversationController } from '../../../../session/conversations'; import { PropsForExpiringMessage, messagesExpired } from '../../../../state/ducks/conversations'; import { getIncrement } from '../../../../util/timer'; import { ExpireTimer } from '../../ExpireTimer'; +import { hasDetailView } from './Message'; import { ReadableMessage, ReadableMessageProps } from './ReadableMessage'; const EXPIRATION_CHECK_MINIMUM = 2000; @@ -81,10 +82,10 @@ const StyledReadableMessage = styled(ReadableMessage)<{ `; export interface ExpirableReadableMessageProps - extends Omit { + extends hasDetailView, + Omit { messageId: string; isControlMessage?: boolean; - isDetailView?: boolean; } function ExpireTimerControlMessage({ diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index 2d91f3871..2a2d28a5c 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx @@ -14,6 +14,7 @@ import { } from '../../../../state/selectors/conversations'; import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus'; import { StyledMessageReactionsContainer } from '../message-content/MessageReactions'; +import { hasDetailView } from './Message'; export type GenericReadableMessageSelectorProps = Pick< MessageRenderingProps, @@ -26,10 +27,9 @@ export type GenericReadableMessageSelectorProps = Pick< | 'isDeleted' >; -type Props = { +type Props = hasDetailView & { messageId: string; ctxMenuID: string; - isDetailView?: boolean; }; const highlightedMessageAnimation = keyframes` @@ -38,11 +38,12 @@ const highlightedMessageAnimation = keyframes` } `; -const StyledReadableMessage = styled.div<{ - selected: boolean; - isRightClicked: boolean; - isDetailView?: boolean; -}>` +const StyledReadableMessage = styled.div< + hasDetailView & { + selected: boolean; + isRightClicked: boolean; + } +>` display: flex; align-items: center; width: 100%; diff --git a/ts/components/conversation/message/message-item/Message.tsx b/ts/components/conversation/message/message-item/Message.tsx index 5d44a40ee..b18400ed2 100644 --- a/ts/components/conversation/message/message-item/Message.tsx +++ b/ts/components/conversation/message/message-item/Message.tsx @@ -10,9 +10,11 @@ import { GenericReadableMessage } from './GenericReadableMessage'; // Same as MIN_WIDTH in ImageGrid.tsx export const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = THUMBNAIL_SIDE; -type Props = { +/** when the message info panel is displayed for a message, we disable onClick and make some other minor UI changes */ +export type hasDetailView = { isDetailView?: boolean }; + +type Props = hasDetailView & { messageId: string; - isDetailView?: boolean; // when the detail is shown for a message, we disable click and some other stuff }; export const Message = (props: Props) => {