feat: fixed click on a quote to go to the original message

added animation support to attachments when opening it via a quote

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -16,7 +16,7 @@ import { MessageLinkPreview } from './MessageLinkPreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -44,19 +44,7 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
 
 const StyledMessageContent = styled.div``;
 
-const StyledMessageOpaqueContent = styled.div<{
-  messageDirection: MessageModelType;
-  highlight: boolean;
-}>`
-  background: ${props =>
-    props.messageDirection === 'incoming'
-      ? 'var(--message-bubbles-received-background-color)'
-      : 'var(--message-bubbles-sent-background-color)'};
-  align-self: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
-  padding: var(--padding-message-content);
-  border-radius: var(--border-radius-message-box);
-
-  @keyframes highlight {
+const opacityAnimation = keyframes`
     0% {
       opacity: 1;
     }
@@ -72,19 +60,29 @@ const StyledMessageOpaqueContent = styled.div<{
     100% {
       opacity: 1;
     }
-  }
+`;
 
-  ${props => {
-    return (
-      props.highlight &&
-      css`
-        animation-name: highlight;
-        animation-timing-function: linear;
-        animation-duration: 1s;
-        border-radius: 'var(--border-radius-message-box)';
-      `
-    );
-  }}
+const StyledMessageHighlighter = styled.div<{
+  highlight: boolean;
+}>`
+  ${props =>
+    props.highlight &&
+    css`
+      animation: ${opacityAnimation} 1s linear;
+    `}
+`;
+
+const StyledMessageOpaqueContent = styled(StyledMessageHighlighter)<{
+  messageDirection: MessageModelType;
+  highlight: boolean;
+}>`
+  background: ${props =>
+    props.messageDirection === 'incoming'
+      ? 'var(--message-bubbles-received-background-color)'
+      : 'var(--message-bubbles-sent-background-color)'};
+  align-self: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
+  padding: var(--padding-message-content);
+  border-radius: var(--border-radius-message-box);
 `;
 
 export const IsMessageVisibleContext = createContext(false);
@@ -195,11 +193,13 @@ export const MessageContent = (props: Props) => {
             </StyledMessageOpaqueContent>
           )}
           {!isDeleted && (
-            <MessageAttachment
-              messageId={props.messageId}
-              imageBroken={imageBroken}
-              handleImageError={handleImageError}
-            />
+            <StyledMessageHighlighter highlight={highlight}>
+              <MessageAttachment
+                messageId={props.messageId}
+                imageBroken={imageBroken}
+                handleImageError={handleImageError}
+              />
+            </StyledMessageHighlighter>
           )}
         </IsMessageVisibleContext.Provider>
       </InView>

ts/components/conversation/message/message-content/MessageQuote.tsx

@@ -11,8 +11,6 @@ import {
 } from '../../../../state/selectors/conversations';
 import { Quote } from './quote/Quote';
 import { ToastUtils } from '../../../../session/utils';
-import { Data } from '../../../../data/data';
-import { MessageModel } from '../../../../models/message';
 
 // tslint:disable: use-simple-attributes
 
@@ -43,8 +41,9 @@ export const MessageQuote = (props: Props) => {
     sender: quoteAuthor,
     authorProfileName,
     authorName,
-    messageId: quotedMessageSentAt,
+    messageId: quotedMessageId,
     referencedMessageNotFound,
+    convoId,
   } = quote;
 
   const quoteText = text || null;
@@ -70,32 +69,26 @@ export const MessageQuote = (props: Props) => {
 
       // For simplicity's sake, we show the 'not found' toast no matter what if we were
       // not able to find the referenced message when the quote was received.
-      if (quoteNotFound || !quotedMessageSentAt || !quoteAuthor) {
-        ToastUtils.pushOriginalNotFound();
-        return;
-      }
-
-      // TODO Should no longer have to do this lookup?
-      // Can just use referencedMessageNotFound?
-      const collection = await Data.getMessagesBySentAt(_.toNumber(quotedMessageSentAt));
-      const foundInDb = collection.find((item: MessageModel) => {
-        const messageAuthor = item.get('source');
-
-        return Boolean(messageAuthor && quoteAuthor === messageAuthor);
-      });
-
-      if (!foundInDb) {
+      if (quoteNotFound || !quotedMessageId || !quoteAuthor || !convoId) {
         ToastUtils.pushOriginalNotFound();
         return;
       }
 
       void openConversationToSpecificMessage({
-        conversationKey: foundInDb.get('conversationId'),
-        messageIdToNavigateTo: foundInDb.get('id'),
+        conversationKey: convoId,
+        messageIdToNavigateTo: quotedMessageId,
         shouldHighlightMessage: true,
       });
     },
-    [quote, multiSelectMode, props.messageId]
+    [
+      convoId,
+      isMessageDetailViewMode,
+      multiSelectMode,
+      quote,
+      quoteNotFound,
+      quotedMessageId,
+      quoteAuthor,
+    ]
   );
 
   return (

ts/models/message.ts

@@ -1451,6 +1451,7 @@ export function overrideWithSourceMessage(
     authorName,
     messageId: msgProps.id || quote.messageId,
     referencedMessageNotFound: false,
+    convoId: convo.id,
   };
 
   return quoteProps;

ts/state/ducks/conversations.ts

@@ -173,6 +173,7 @@ export type PropsForQuote = {
   authorName?: string;
   messageId?: string;
   referencedMessageNotFound?: boolean;
+  convoId?: string;
 };
 
 export type PropsForMessageWithoutConvoProps = {
@@ -382,10 +383,6 @@ async function getMessages({
     const id = quotes[i].propsForMessage?.quote?.messageId;
     const sender = quotes[i].propsForMessage.quote?.sender;
 
-    // TODO use this is the renderering process
-    // const contact = message.findAndFormatContact(author);
-    // const authorName = contact?.profileName || contact?.name || '';
-
     if (id && sender) {
       const timestamp = Number(id);
       // See if a quoted message is already in memory if not lookup in db

ts/state/selectors/conversations.ts

@@ -991,7 +991,6 @@ export const getMessageQuoteProps = createSelector(
       quote = overrideWithSourceMessage(quote, sourceMessage);
     }
 
-    window.log.debug(`WIP: quote`, quote);
     return { direction, quote };
   }
 );