Merge 8cc1ce9a7c into 2d871ef0d9

ts/components/conversation/header/ConversationHeader.tsx

@@ -1,18 +1,26 @@
 import React from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { isMessageSelectionMode } from '../../../state/selectors/conversations';
+import {
+  getReturnToConversation,
+  isMessageSelectionMode,
+} from '../../../state/selectors/conversations';
 
-import { openRightPanel } from '../../../state/ducks/conversations';
+import {
+  openConversationToSpecificMessage,
+  openRightPanel,
+  resetReturnConversation,
+} from '../../../state/ducks/conversations';
 
 import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { Flex } from '../../basic/Flex';
-import { AvatarHeader, CallButton } from './ConversationHeaderItems';
+import { AvatarHeader, BackButton, CallButton } from './ConversationHeaderItems';
 import { SelectionOverlay } from './ConversationHeaderSelectionOverlay';
 import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
+  const returnToConversation = useSelector(getReturnToConversation);
   const selectedConvoKey = useSelectedConversationKey();
   const dispatch = useDispatch();
 
@@ -20,6 +28,18 @@ export const ConversationHeaderWithDetails = () => {
     return null;
   }
 
+  const handleGoBack = async () => {
+    if (!returnToConversation) {
+      return;
+    }
+    await openConversationToSpecificMessage({
+      conversationKey: returnToConversation.key,
+      messageIdToNavigateTo: returnToConversation.messageId,
+      shouldHighlightMessage: false,
+    });
+    void dispatch(resetReturnConversation());
+  };
+
   return (
     <div className="module-conversation-header">
       <Flex
@@ -29,6 +49,11 @@ export const ConversationHeaderWithDetails = () => {
         width="100%"
         flexGrow={1}
       >
+        <BackButton
+          onGoBack={() => void handleGoBack()}
+          showBackButton={returnToConversation !== undefined}
+        />
+
         <ConversationHeaderTitle />
 
         {!isSelectionMode && (

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

@@ -108,7 +108,14 @@ export const MessageAvatar = (props: Props) => {
 
       // public and blinded key for that message, we should open the convo as is and see if the user wants
       // to send a sogs blinded message request.
-      await openConversationWithMessages({ conversationKey: privateConvoToOpen, messageId: null });
+      await openConversationWithMessages({
+        conversationKey: privateConvoToOpen,
+        returnToConversation: {
+          key: selectedConvoKey,
+          messageId,
+        },
+        messageId: null,
+      });
 
       return;
     }

ts/state/ducks/conversations.ts

@@ -301,8 +301,14 @@ export type QuoteLookupType = {
   [key: string]: MessageModelPropsWithoutConvoProps;
 };
 
+export interface ReturnToConversationProps {
+  key: string;
+  messageId: string;
+}
+
 export type ConversationsStateType = {
   conversationLookup: ConversationLookupType;
+  returnToConversation?: ReturnToConversationProps;
   selectedConversation?: string;
   // NOTE the messages that are in view
   messages: Array<MessageModelPropsWithoutConvoProps>;
@@ -753,12 +759,21 @@ const conversationsSlice = createSlice({
 
     conversationRemoved(state: ConversationsStateType, action: PayloadAction<string>) {
       const { payload: conversationId } = action;
-      const { conversationLookup, selectedConversation } = state;
+      const { conversationLookup, returnToConversation, selectedConversation } = state;
+
+      const conversationWeAreInDeleted = selectedConversation === conversationId;
+      const returningConversationDeleted = returnToConversation
+        ? returnToConversation.key === conversationId
+        : false;
+
       return {
         ...state,
         conversationLookup: omit(conversationLookup, [conversationId]),
-        selectedConversation:
-          selectedConversation === conversationId ? undefined : selectedConversation,
+        returnToConversation:
+          returningConversationDeleted || conversationWeAreInDeleted
+            ? undefined
+            : returnToConversation,
+        selectedConversation: conversationWeAreInDeleted ? undefined : selectedConversation,
       };
     },
 
@@ -835,6 +850,7 @@ const conversationsSlice = createSlice({
       state: ConversationsStateType,
       action: PayloadAction<{
         conversationKey: string;
+        returnToConversation: ReturnToConversationProps | undefined;
         firstUnreadIdOnOpen: string | undefined;
         mostRecentMessageIdOnOpen: string | null;
         initialMessages: Array<MessageModelPropsWithoutConvoProps>;
@@ -860,6 +876,7 @@ const conversationsSlice = createSlice({
         conversationLookup: state.conversationLookup,
         mostRecentMessageId: action.payload.mostRecentMessageIdOnOpen,
         selectedConversation: action.payload.conversationKey,
+        returnToConversation: action.payload.returnToConversation,
         firstUnreadMessageId: action.payload.firstUnreadIdOnOpen,
         messages: action.payload.initialMessages,
         quotes: action.payload.initialQuotes,
@@ -909,6 +926,9 @@ const conversationsSlice = createSlice({
         oldBottomMessageId: null,
       };
     },
+    resetReturnConversation(state: ConversationsStateType) {
+      return { ...state, returnToConversation: undefined };
+    },
     pushQuotedMessageDetails(
       state: ConversationsStateType,
       action: PayloadAction<MessageModelPropsWithoutConvoProps>
@@ -1147,6 +1167,7 @@ export const {
   setNextMessageToPlayId,
   updateMentionsMembers,
   resetConversationExternal,
+  resetReturnConversation,
   markConversationInitialLoadingInProgress,
 } = actions;
 
@@ -1160,9 +1181,10 @@ async function unmarkAsForcedUnread(convoId: string) {
 
 export async function openConversationWithMessages(args: {
   conversationKey: string;
+  returnToConversation?: ReturnToConversationProps;
   messageId: string | null;
 }) {
-  const { conversationKey, messageId } = args;
+  const { conversationKey, returnToConversation, messageId } = args;
 
   await DisappearingMessages.destroyExpiredMessages();
   await unmarkAsForcedUnread(conversationKey);
@@ -1178,6 +1200,7 @@ export async function openConversationWithMessages(args: {
   window.inboxStore?.dispatch(
     actions.openConversationExternal({
       conversationKey,
+      returnToConversation,
       firstUnreadIdOnOpen,
       mostRecentMessageIdOnOpen,
       initialMessages,

ts/state/selectors/conversations.ts

@@ -12,6 +12,7 @@ import {
   PropsForQuote,
   QuoteLookupType,
   ReduxConversationType,
+  ReturnToConversationProps,
   SortedMessageModelProps,
 } from '../ducks/conversations';
 import { StateType } from '../reducer';
@@ -498,6 +499,9 @@ export const isRightPanelShowing = (state: StateType): boolean =>
 export const isMessageSelectionMode = (state: StateType): boolean =>
   state.conversations.selectedMessageIds.length > 0;
 
+export const getReturnToConversation = (state: StateType): ReturnToConversationProps | undefined =>
+  state.conversations.returnToConversation;
+
 export const getSelectedMessageIds = (state: StateType): Array<string> =>
   state.conversations.selectedMessageIds;