From 3fd37bbb063d893f4aeb2533da2d220eae9c97c0 Mon Sep 17 00:00:00 2001 From: yougotwill Date: Wed, 21 Aug 2024 16:04:21 +1000 Subject: [PATCH] feat: use context to pass message id to image component in an attachment --- ts/components/conversation/Image.tsx | 21 ++++++++------- ts/components/conversation/ImageGrid.tsx | 20 +------------- .../message-content/MessageAttachment.tsx | 26 ++++++++++--------- ts/contexts/MessageIdContext.tsx | 14 ++++++++++ 4 files changed, 41 insertions(+), 40 deletions(-) create mode 100644 ts/contexts/MessageIdContext.tsx diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index 9257dafff..05c08f5f9 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -6,9 +6,14 @@ import { isNumber } from 'lodash'; import { useDisableDrag } from '../../hooks/useDisableDrag'; import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment'; import { Spinner } from '../loading'; -import { MessageModelType } from '../../models/messageType'; import { MessageGenericAttachment } from './message/message-content/MessageGenericAttachment'; import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch'; +import { useMessageIdFromContext } from '../../contexts/MessageIdContext'; +import { + useMessageDirection, + useMessageSelected, + useMessageTimestamp, +} from '../../state/selectors'; type Props = { alt: string; @@ -28,17 +33,12 @@ type Props = { playIconOverlay?: boolean; softCorners: boolean; forceSquare?: boolean; - dropShadow?: boolean; attachmentIndex?: number; - direction?: MessageModelType; highlight?: boolean; onClick?: (attachment: AttachmentTypeWithPath | AttachmentType) => void; onClickClose?: (attachment: AttachmentTypeWithPath | AttachmentType) => void; onError?: () => void; - - /** used for debugging */ - timestamp?: number; }; const StyledOverlay = styled.div>` @@ -66,15 +66,18 @@ export const Image = (props: Props) => { playIconOverlay, softCorners, forceSquare, - dropShadow, attachmentIndex, - direction, highlight, url, width: _width, - timestamp, } = props; + const messageId = useMessageIdFromContext(); + const dropShadow = useMessageSelected(messageId); + const direction = useMessageDirection(messageId); + /** used for debugging */ + const timestamp = useMessageTimestamp(messageId); + const disableDrag = useDisableDrag(); const { loading, urlToLoad } = useEncryptedFileFetch( url, diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx index c5acd0dcf..576765a0e 100644 --- a/ts/components/conversation/ImageGrid.tsx +++ b/ts/components/conversation/ImageGrid.tsx @@ -10,11 +10,6 @@ import { } from '../../types/Attachment'; import { useIsMessageVisible } from '../../contexts/isMessageVisibleContext'; -import { - useMessageDirection, - useMessageSelected, - useMessageTimestamp, -} from '../../state/selectors'; import { THUMBNAIL_SIDE } from '../../types/attachments/VisualAttachment'; import { Image } from './Image'; @@ -24,7 +19,6 @@ type Props = { imageBroken: boolean; highlight: boolean; onClickAttachment?: (attachment: AttachmentTypeWithPath | AttachmentType) => void; - messageId?: string; }; const StyledImageGrid = styled.div<{ flexDirection: 'row' | 'column' }>` @@ -50,16 +44,11 @@ const Row = ( startIndex, onClickAttachment, totalAttachmentsCount, - messageId, } = props; const isMessageVisible = useIsMessageVisible(); const moreMessagesOverlay = totalAttachmentsCount > 3; const moreMessagesOverlayText = moreMessagesOverlay ? `+${totalAttachmentsCount - 3}` : undefined; - const selected = useMessageSelected(messageId); - const direction = useMessageDirection(messageId); - const timestamp = useMessageTimestamp(messageId); - return ( <> {attachments.map((attachment, index) => { @@ -81,9 +70,6 @@ const Row = ( softCorners={true} darkOverlay={showOverlay} overlayText={showOverlay ? moreMessagesOverlayText : undefined} - dropShadow={selected} - direction={direction} - timestamp={timestamp} /> ); })} @@ -92,7 +78,7 @@ const Row = ( }; export const ImageGrid = (props: Props) => { - const { attachments, imageBroken, highlight, onError, onClickAttachment, messageId } = props; + const { attachments, imageBroken, highlight, onError, onClickAttachment } = props; if (!attachments || !attachments.length) { return null; @@ -110,7 +96,6 @@ export const ImageGrid = (props: Props) => { renderedSize={THUMBNAIL_SIDE} startIndex={0} totalAttachmentsCount={attachments.length} - messageId={messageId} /> ); @@ -129,7 +114,6 @@ export const ImageGrid = (props: Props) => { renderedSize={THUMBNAIL_SIDE} startIndex={0} totalAttachmentsCount={attachments.length} - messageId={messageId} /> ); @@ -149,7 +133,6 @@ export const ImageGrid = (props: Props) => { renderedSize={THUMBNAIL_SIDE} startIndex={0} totalAttachmentsCount={attachments.length} - messageId={messageId} /> @@ -162,7 +145,6 @@ export const ImageGrid = (props: Props) => { renderedSize={columnImageSide} startIndex={1} totalAttachmentsCount={attachments.length} - messageId={messageId} /> diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index 8472f79d5..00d32b1a5 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx @@ -27,6 +27,7 @@ import { ClickToTrustSender } from './ClickToTrustSender'; import { MessageHighlighter } from './MessageHighlighter'; import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext'; import { MessageGenericAttachment } from './MessageGenericAttachment'; +import { ContextMessageProvider } from '../../../../contexts/MessageIdContext'; export type MessageAttachmentSelectorProps = Pick< MessageRenderingProps, @@ -133,18 +134,19 @@ export const MessageAttachment = (props: Props) => { } return ( - - - - - + + + + + + + ); } diff --git a/ts/contexts/MessageIdContext.tsx b/ts/contexts/MessageIdContext.tsx new file mode 100644 index 000000000..c1f72b155 --- /dev/null +++ b/ts/contexts/MessageIdContext.tsx @@ -0,0 +1,14 @@ +import { createContext, useContext } from 'react'; + +/** + * This React context is used to share deep into a node tree the message ID we are currently rendering. + * This is to avoid passing the prop to all the subtree component + */ +const ContextMessageId = createContext(undefined); + +export const ContextMessageProvider = ContextMessageId.Provider; + +export function useMessageIdFromContext() { + const messageId = useContext(ContextMessageId); + return messageId; +}