ConversationView: Move setQuotedMessage/scrollToMessage to redux

ts/components/App.tsx

@@ -45,12 +45,13 @@ type PropsType = {
 
   executeMenuRole: ExecuteMenuRoleType;
   executeMenuAction: (action: MenuActionType) => void;
+  hideToast: () => unknown;
   titleBarDoubleClick: () => void;
   toast?: {
     toastType: ToastType;
     parameters?: ReplacementValuesType;
   };
-  hideToast: () => unknown;
+  scrollToMessage: (conversationId: string, messageId: string) => unknown;
   toggleStoriesView: () => unknown;
   viewStory: ViewStoryActionCreatorType;
 } & ComponentProps<typeof Inbox>;
@@ -79,6 +80,7 @@ export function App({
   renderStories,
   renderStoryViewer,
   requestVerification,
+  scrollToMessage,
   selectedConversationId,
   selectedMessage,
   selectedMessageSource,
@@ -116,6 +118,7 @@ export function App({
           renderCustomizingPreferredReactionsModal
         }
         renderLeftPane={renderLeftPane}
+        scrollToMessage={scrollToMessage}
         selectedConversationId={selectedConversationId}
         selectedMessage={selectedMessage}
         selectedMessageSource={selectedMessageSource}

ts/components/CompositionArea.stories.tsx

@@ -43,6 +43,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   removeAttachment: action('removeAttachment'),
   theme: React.useContext(StorybookThemeContext),
   setComposerFocus: action('setComposerFocus'),
+  setQuoteByMessageId: action('setQuoteByMessageId'),
 
   // AttachmentList
   draftAttachments: overrideProps.draftAttachments || [],
@@ -63,8 +64,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   onCloseLinkPreview: action('onCloseLinkPreview'),
   // Quote
   quotedMessageProps: overrideProps.quotedMessageProps,
-  onClickQuotedMessage: action('onClickQuotedMessage'),
-  setQuotedMessage: action('setQuotedMessage'),
+  scrollToMessage: action('scrollToMessage'),
   // MediaEditor
   imageToBlurHash: async () => 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
   // MediaQualitySelector

ts/components/CompositionArea.tsx

@@ -97,7 +97,6 @@ export type OwnProps = Readonly<{
   linkPreviewResult?: LinkPreviewType;
   messageRequestsEnabled?: boolean;
   onClearAttachments(): unknown;
-  onClickQuotedMessage(): unknown;
   onCloseLinkPreview(): unknown;
   processAttachments: (options: {
     conversationId: string;
@@ -119,13 +118,18 @@ export type OwnProps = Readonly<{
     }
   ): unknown;
   openConversation(conversationId: string): unknown;
+  quotedMessageId?: string;
   quotedMessageProps?: Omit<
     QuoteProps,
     'i18n' | 'onClick' | 'onClose' | 'withContentAbove'
   >;
   removeAttachment: (conversationId: string, filePath: string) => unknown;
+  scrollToMessage: (conversationId: string, messageId: string) => unknown;
   setComposerFocus: (conversationId: string) => unknown;
-  setQuotedMessage(message: undefined): unknown;
+  setQuoteByMessageId(
+    conversationId: string,
+    messageId: string | undefined
+  ): unknown;
   shouldSendHighQualityAttachments: boolean;
   startRecording: () => unknown;
   theme: ThemeType;
@@ -179,6 +183,7 @@ export function CompositionArea({
   removeAttachment,
   sendMultiMediaMessage,
   setComposerFocus,
+  setQuoteByMessageId,
   theme,
 
   // AttachmentList
@@ -196,9 +201,9 @@ export function CompositionArea({
   linkPreviewResult,
   onCloseLinkPreview,
   // Quote
+  quotedMessageId,
   quotedMessageProps,
-  onClickQuotedMessage,
-  setQuotedMessage,
+  scrollToMessage,
   // MediaQualitySelector
   onSelectMediaQuality,
   shouldSendHighQualityAttachments,
@@ -639,18 +644,15 @@ export function CompositionArea({
           'CompositionArea__row--column'
         )}
       >
-        {quotedMessageProps && (
+        {quotedMessageId && quotedMessageProps && (
           <div className="quote-wrapper">
             <Quote
               isCompose
               {...quotedMessageProps}
               i18n={i18n}
-              onClick={onClickQuotedMessage}
+              onClick={() => scrollToMessage(conversationId, quotedMessageId)}
               onClose={() => {
-                // This one is for redux...
-                setQuotedMessage(undefined);
-                // and this is for conversation_view.
-                clearQuotedMessage?.();
+                setQuoteByMessageId(conversationId, undefined);
               }}
             />
           </div>

ts/components/Inbox.tsx

@@ -23,6 +23,7 @@ export type PropsType = {
   isCustomizingPreferredReactions: boolean;
   renderCustomizingPreferredReactionsModal: () => JSX.Element;
   renderLeftPane: () => JSX.Element;
+  scrollToMessage: (conversationId: string, messageId: string) => unknown;
   selectedConversationId?: string;
   selectedMessage?: string;
   selectedMessageSource?: SelectedMessageSource;
@@ -36,6 +37,7 @@ export function Inbox({
   isCustomizingPreferredReactions,
   renderCustomizingPreferredReactionsModal,
   renderLeftPane,
+  scrollToMessage,
   selectedConversationId,
   selectedMessage,
   selectedMessageSource,
@@ -93,10 +95,11 @@ export function Inbox({
       selectedMessage &&
       selectedMessageSource !== SelectedMessageSource.Focus
     ) {
-      conversation.trigger('scroll-to-message', selectedMessage);
+      scrollToMessage(conversation.id, selectedMessage);
     }
   }, [
     prevConversation,
+    scrollToMessage,
     selectedConversationId,
     selectedMessage,
     selectedMessageSource,

ts/components/conversation/Quote.stories.tsx

@@ -122,7 +122,7 @@ const defaultMessageProps: TimelineMessagesProps = {
   renderEmojiPicker: () => <div />,
   renderReactionPicker: () => <div />,
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
-  replyToMessage: action('default--replyToMessage'),
+  setQuoteByMessageId: action('default--setQuoteByMessageId'),
   retrySend: action('default--retrySend'),
   retryDeleteForEveryone: action('default--retryDeleteForEveryone'),
   scrollToQuotedMessage: action('default--scrollToQuotedMessage'),

ts/components/conversation/Timeline.stories.tsx

@@ -276,7 +276,7 @@ const actions = () => ({
   updateSharedGroups: action('updateSharedGroups'),
 
   reactToMessage: action('reactToMessage'),
-  replyToMessage: action('replyToMessage'),
+  setQuoteByMessageId: action('setQuoteByMessageId'),
   retryDeleteForEveryone: action('retryDeleteForEveryone'),
   retrySend: action('retrySend'),
   deleteMessage: action('deleteMessage'),

ts/components/conversation/Timeline.tsx

@@ -239,7 +239,6 @@ const getActions = createSelector(
       'doubleCheckMissingQuoteReference',
       'checkForAccount',
       'reactToMessage',
-      'replyToMessage',
       'retryDeleteForEveryone',
       'retrySend',
       'toggleForwardMessageModal',
@@ -248,6 +247,7 @@ const getActions = createSelector(
       'showMessageDetail',
       'openConversation',
       'openGiftBadge',
+      'setQuoteByMessageId',
       'showContactDetail',
       'showContactModal',
       'kickOffAttachmentDownload',

ts/components/conversation/TimelineItem.stories.tsx

@@ -66,7 +66,7 @@ const getDefaultProps = () => ({
   checkForAccount: action('checkForAccount'),
   clearSelectedMessage: action('clearSelectedMessage'),
   contactSupport: action('contactSupport'),
-  replyToMessage: action('replyToMessage'),
+  setQuoteByMessageId: action('setQuoteByMessageId'),
   retryDeleteForEveryone: action('retryDeleteForEveryone'),
   retrySend: action('retrySend'),
   blockGroupLinkRequests: action('blockGroupLinkRequests'),

ts/components/conversation/TimelineMessage.stories.tsx

@@ -294,7 +294,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   renderEmojiPicker,
   renderReactionPicker,
   renderAudioAttachment,
-  replyToMessage: action('replyToMessage'),
+  setQuoteByMessageId: action('setQuoteByMessageId'),
   retrySend: action('retrySend'),
   retryDeleteForEveryone: action('retryDeleteForEveryone'),
   scrollToQuotedMessage: action('scrollToQuotedMessage'),

ts/components/conversation/TimelineMessage.tsx

@@ -49,8 +49,7 @@ export type PropsActions = {
   ) => void;
   retrySend: (id: string) => void;
   retryDeleteForEveryone: (id: string) => void;
-
-  replyToMessage: (id: string) => void;
+  setQuoteByMessageId: (conversationId: string, messageId: string) => void;
 } & MessagePropsActions;
 
 export type Props = PropsData &
@@ -83,6 +82,7 @@ export function TimelineMessage(props: Props): JSX.Element {
     canRetryDeleteForEveryone,
     contact,
     payment,
+    conversationId,
     containerElementRef,
     containerWidthBreakpoint,
     deletedForEveryone,
@@ -94,7 +94,7 @@ export function TimelineMessage(props: Props): JSX.Element {
     isSticker,
     isTapToView,
     reactToMessage,
-    replyToMessage,
+    setQuoteByMessageId,
     renderReactionPicker,
     renderEmojiPicker,
     retrySend,
@@ -234,7 +234,9 @@ export function TimelineMessage(props: Props): JSX.Element {
       ? openGenericAttachment
       : undefined;
 
-  const handleReplyToMessage = canReply ? () => replyToMessage(id) : undefined;
+  const handleReplyToMessage = canReply
+    ? () => setQuoteByMessageId(conversationId, id)
+    : undefined;
 
   const handleReact = canReact ? () => toggleReactionPicker() : undefined;