feat: use context to pass message id to image component in an attachment

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<Pick<Props, 'darkOverlay' | 'softCorners'>>`
@@ -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,

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}
         />
       </StyledImageGrid>
     );
@@ -129,7 +114,6 @@ export const ImageGrid = (props: Props) => {
           renderedSize={THUMBNAIL_SIDE}
           startIndex={0}
           totalAttachmentsCount={attachments.length}
-          messageId={messageId}
         />
       </StyledImageGrid>
     );
@@ -149,7 +133,6 @@ export const ImageGrid = (props: Props) => {
         renderedSize={THUMBNAIL_SIDE}
         startIndex={0}
         totalAttachmentsCount={attachments.length}
-        messageId={messageId}
       />
 
       <StyledImageGrid flexDirection={'column'}>
@@ -162,7 +145,6 @@ export const ImageGrid = (props: Props) => {
           renderedSize={columnImageSide}
           startIndex={1}
           totalAttachmentsCount={attachments.length}
-          messageId={messageId}
         />
       </StyledImageGrid>
     </StyledImageGrid>

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 (
-      <MessageHighlighter highlight={highlight}>
+      <ContextMessageProvider value={messageId}>
-        <StyledImageGridContainer messageDirection={direction}>
+        <MessageHighlighter highlight={highlight}>
-          <ImageGrid
+          <StyledImageGridContainer messageDirection={direction}>
-            messageId={messageId}
+            <ImageGrid
-            attachments={attachments}
+              attachments={attachments}
-            imageBroken={imageBroken}
+              imageBroken={imageBroken}
-            highlight={highlight}
+              highlight={highlight}
-            onError={handleImageError}
+              onError={handleImageError}
-            onClickAttachment={onClickOnImageGrid}
+              onClickAttachment={onClickOnImageGrid}
-          />
+            />
-        </StyledImageGridContainer>
+          </StyledImageGridContainer>
-      </MessageHighlighter>
+        </MessageHighlighter>
+      </ContextMessageProvider>
     );
   }
 

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<string | undefined>(undefined);
+
+export const ContextMessageProvider = ContextMessageId.Provider;
+
+export function useMessageIdFromContext() {
+  const messageId = useContext(ContextMessageId);
+  return messageId;
+}