feat: dropped text and attachments and lookup quote message

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { SessionIcon, SessionIconButton } from '../icon';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,6 +8,9 @@ import { getAlt, isAudio } from '../../types/Attachment';
 import { AUDIO_MP3 } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
 import { Image } from '../../../ts/components/conversation/Image';
+import { fetchQuotedMessage } from './message/message-content/MessageQuote';
+import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment';
+import { isEqual } from 'lodash';
 
 const QuotedMessageComposition = styled.div`
   width: 100%;
@@ -40,27 +43,63 @@ export const SessionQuotedMessageComposition = () => {
 
   const dispatch = useDispatch();
 
-  const { text, attachments } = quotedMessageProps || {};
-  const hasAttachments = attachments && attachments.length > 0;
+  const { id, author, timestamp } = quotedMessageProps || {};
 
-  let hasImageAttachment = false;
-
-  let firstImageAttachment;
-  // we have to handle the case we are trying to reply to an audio message
-
-  if (attachments?.length && attachments[0].contentType !== AUDIO_MP3 && attachments[0].thumbnail) {
-    firstImageAttachment = attachments[0];
-    hasImageAttachment = true;
-  }
-
-  const hasAudioAttachment =
-    hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
+  const [quoteText, setQuoteText] = useState('');
+  const [imageAttachment, setImageAttachment] = useState(undefined);
+  const [hasAudioAttachment, setHasAudioAttachment] = useState(false);
 
   const removeQuotedMessage = useCallback(() => {
     dispatch(quoteMessage(undefined));
   }, []);
 
-  if (!quotedMessageProps?.id) {
+  useEffect(() => {
+    let isCancelled = false;
+
+    if (author && timestamp) {
+      fetchQuotedMessage(author, timestamp)
+        .then(async result => {
+          if (isCancelled) {
+            return;
+          }
+
+          if (result) {
+            if (result.attachments && result.attachments[0]) {
+              if (!isEqual(imageAttachment, result.attachments[0])) {
+                setImageAttachment(
+                  result.attachments[0].contentType !== AUDIO_MP3 && result.attachments[0].thumbnail
+                    ? result.attachments[0]
+                    : undefined
+                );
+
+                const hasAudio = isAudio(result.attachments);
+                setHasAudioAttachment(
+                  hasAudio !== false && hasAudio !== undefined && hasAudio !== ''
+                );
+              }
+            } else {
+              setImageAttachment(undefined);
+              setHasAudioAttachment(false);
+            }
+
+            if (result.text && !isEqual(quoteText, result.text)) {
+              setQuoteText(result.text);
+            }
+          }
+        })
+        .catch(() => {
+          if (isCancelled) {
+            return;
+          }
+        });
+    }
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [author, fetchQuotedMessage, timestamp, hasAudioAttachment, imageAttachment, quoteText]);
+
+  if (!id || !author || !timestamp) {
     return null;
   }
 
@@ -77,15 +116,17 @@ export const SessionQuotedMessageComposition = () => {
       </Flex>
       <QuotedMessageCompositionReply>
         <Flex container={true} justifyContent="space-between" margin={'var(--margins-xs)'}>
-          <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || text}</Subtle>
+          <Subtle>
+            {(imageAttachment && window.i18n('mediaMessage')) || (quoteText !== '' && quoteText)}
+          </Subtle>
 
-          {hasImageAttachment && (
+          {imageAttachment && (
             <Image
-              alt={getAlt(firstImageAttachment)}
-              attachment={firstImageAttachment}
+              alt={getAlt(imageAttachment)}
+              attachment={imageAttachment}
               height={100}
               width={100}
-              url={firstImageAttachment.thumbnail.objectUrl}
+              url={getAbsoluteAttachmentPath((imageAttachment as any).thumbnail.path)}
             />
           )}
 

ts/components/conversation/composition/CompositionBox.tsx

@@ -61,7 +61,6 @@ export interface ReplyingToMessageProps {
   id: string;
   author: string;
   timestamp: number;
-  text?: string;
   attachments?: Array<any>;
 }
 
@@ -825,13 +824,7 @@ class CompositionBoxInner extends React.Component<Props, State> {
     const { stagedLinkPreview } = this.state;
 
     // Send message
-    const extractedQuotedMessageProps = _.pick(
-      quotedMessageProps,
-      'id',
-      'author',
-      'text',
-      'attachments'
-    );
+    const extractedQuotedMessageProps = _.pick(quotedMessageProps, 'id', 'author', 'timestamp');
 
     // we consider that a link preview without a title at least is not a preview
     const linkPreview =

ts/models/conversation.ts

@@ -609,21 +609,14 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
   }
 
   public async makeQuote(quotedMessage: MessageModel): Promise<ReplyingToMessageProps | null> {
-    const attachments = quotedMessage.get('attachments');
-    const preview = quotedMessage.get('preview');
-
-    const body = quotedMessage.get('body');
-    const quotedAttachments = await this.getQuoteAttachment(attachments, preview);
-
     if (!quotedMessage.get('sent_at')) {
       window.log.warn('tried to make a quote without a sent_at timestamp');
       return null;
     }
+
     return {
-      author: quotedMessage.getSource(),
       id: `${quotedMessage.get('sent_at')}` || '',
-      text: body,
-      attachments: quotedAttachments,
+      author: quotedMessage.getSource(),
       timestamp: quotedMessage.get('sent_at') || 0,
       convoId: this.id,
     };

ts/models/message.ts

@@ -582,48 +582,31 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       return null;
     }
 
-    const { author, id, referencedMessageNotFound } = quote;
+    const { author, id, referencedMessageNotFound, timestamp } = quote;
     const contact: ConversationModel = author && getConversationController().get(author);
 
     const authorName = contact ? contact.getContactProfileNameOrShortenedPubKey() : null;
 
     const isFromMe = contact ? contact.id === UserUtils.getOurPubKeyStrFromCache() : false;
 
-    const firstAttachment = quote.attachments && quote.attachments[0];
     const quoteProps: {
       referencedMessageNotFound?: boolean;
       sender: string;
       messageId: string;
       authorName: string;
-      text?: string;
-      attachment?: any;
+      timestamp: number;
       isFromMe?: boolean;
     } = {
       sender: author,
       messageId: id,
       authorName: authorName || 'Unknown',
+      timestamp,
     };
 
     if (referencedMessageNotFound) {
       quoteProps.referencedMessageNotFound = true;
     }
 
-    if (!referencedMessageNotFound) {
-      if (quote.text) {
-        // do not show text of not found messages.
-        // TODO show original message not found text
-        // if the message was deleted better not show it's text content in the message
-        quoteProps.text = quote.text;
-      }
-
-      const quoteAttachment = firstAttachment
-        ? this.processQuoteAttachment(firstAttachment)
-        : undefined;
-      if (quoteAttachment) {
-        // only set attachment if referencedMessageNotFound is false and we have one
-        quoteProps.attachment = quoteAttachment;
-      }
-    }
     if (isFromMe) {
       quoteProps.isFromMe = true;
     }

ts/state/ducks/conversations.ts

@@ -19,7 +19,6 @@ import {
 } from '../../models/messageType';
 import { omit } from 'lodash';
 import { ReplyingToMessageProps } from '../../components/conversation/composition/CompositionBox';
-import { QuotedAttachmentType } from '../../components/conversation/message/message-content/Quote';
 import { LightBoxOptions } from '../../components/conversation/SessionConversation';
 
 export type CallNotificationType = 'missed-call' | 'started-call' | 'answered-a-call';
@@ -183,10 +182,9 @@ export type PropsForMessageWithoutConvoProps = {
   attachments?: Array<PropsForAttachment>;
   previews?: Array<any>;
   quote?: {
-    text?: string;
-    attachment?: QuotedAttachmentType;
     isFromMe?: boolean;
     sender: string;
+    timestamp: number;
     authorProfileName?: string;
     authorName?: string;
     messageId?: string;