Fix conversation view from getting stale data

ts/components/ChatsTab.tsx

@@ -6,6 +6,7 @@ import type { LocalizerType } from '../types/I18N';
 import type { NavTabPanelProps } from './NavTabs';
 import { WhatsNewLink } from './WhatsNewLink';
 import type { UnreadStats } from '../util/countUnreadStats';
+import type { SmartConversationViewProps } from '../state/smart/ConversationView';
 
 export type ChatsTabProps = Readonly<{
   otherTabsUnreadStats: UnreadStats;
@@ -15,7 +16,7 @@ export type ChatsTabProps = Readonly<{
   hasFailedStorySends: boolean;
   navTabsCollapsed: boolean;
   onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => void;
-  renderConversationView: () => JSX.Element;
+  renderConversationView: (props: SmartConversationViewProps) => JSX.Element;
   renderLeftPane: (props: NavTabPanelProps) => JSX.Element;
   renderMiniPlayer: (options: { shouldFlow: boolean }) => JSX.Element;
   selectedConversationId: string | undefined;
@@ -51,10 +52,12 @@ export function ChatsTab({
         <div id="toast" />
         {selectedConversationId ? (
           <div
+            // Use `key` to force the tree to fully re-mount
+            key={selectedConversationId}
             className="Inbox__conversation"
             id={`conversation-${selectedConversationId}`}
           >
-            {renderConversationView()}
+            {renderConversationView({ selectedConversationId })}
           </div>
         ) : (
           <div className="Inbox__no-conversation-open">

ts/state/smart/ChatsTab.tsx

@@ -3,6 +3,7 @@
 import React, { memo, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { ChatsTab } from '../../components/ChatsTab';
+import type { SmartConversationViewProps } from './ConversationView';
 import { SmartConversationView } from './ConversationView';
 import { SmartMiniPlayer } from './MiniPlayer';
 import { SmartLeftPane } from './LeftPane';
@@ -27,8 +28,8 @@ import {
   getTargetedMessageSource,
 } from '../selectors/conversations';
 
-function renderConversationView() {
-  return <SmartConversationView />;
+function renderConversationView(props: SmartConversationViewProps) {
+  return <SmartConversationView {...props} />;
 }
 
 function renderLeftPane(props: NavTabPanelProps) {

ts/state/smart/ConversationView.tsx

@@ -11,7 +11,6 @@ import { SmartTimeline } from './Timeline';
 import {
   getActivePanel,
   getIsPanelAnimating,
-  getSelectedConversationId,
   getSelectedMessageIds,
 } from '../selectors/conversations';
 import { useComposerActions } from '../ducks/composer';
@@ -34,43 +33,41 @@ function renderPanel(conversationId: string) {
   return <ConversationPanel conversationId={conversationId} />;
 }
 
-export const SmartConversationView = memo(
-  function SmartConversationView(): JSX.Element {
-    const conversationId = useSelector(getSelectedConversationId);
+export type SmartConversationViewProps = Readonly<{
+  selectedConversationId: string;
+}>;
 
-    if (!conversationId) {
-      throw new Error('SmartConversationView: No selected conversation');
-    }
+export const SmartConversationView = memo(function SmartConversationView(
+  props: SmartConversationViewProps
+): JSX.Element {
+  const { toggleSelectMode } = useConversationsActions();
+  const selectedMessageIds = useSelector(getSelectedMessageIds);
+  const isSelectMode = selectedMessageIds != null;
 
-    const { toggleSelectMode } = useConversationsActions();
-    const selectedMessageIds = useSelector(getSelectedMessageIds);
-    const isSelectMode = selectedMessageIds != null;
+  const { processAttachments } = useComposerActions();
 
-    const { processAttachments } = useComposerActions();
+  const hasOpenModal = useSelector(isShowingAnyModal);
+  const activePanel = useSelector(getActivePanel);
+  const isPanelAnimating = useSelector(getIsPanelAnimating);
+  const shouldHideConversationView = activePanel && !isPanelAnimating;
 
-    const hasOpenModal = useSelector(isShowingAnyModal);
-    const activePanel = useSelector(getActivePanel);
-    const isPanelAnimating = useSelector(getIsPanelAnimating);
-    const shouldHideConversationView = activePanel && !isPanelAnimating;
+  const onExitSelectMode = useCallback(() => {
+    toggleSelectMode(false);
+  }, [toggleSelectMode]);
 
-    const onExitSelectMode = useCallback(() => {
-      toggleSelectMode(false);
-    }, [toggleSelectMode]);
-
-    return (
-      <ConversationView
-        conversationId={conversationId}
-        hasOpenModal={hasOpenModal}
-        hasOpenPanel={activePanel != null}
-        isSelectMode={isSelectMode}
-        onExitSelectMode={onExitSelectMode}
-        processAttachments={processAttachments}
-        renderCompositionArea={renderCompositionArea}
-        renderConversationHeader={renderConversationHeader}
-        renderTimeline={renderTimeline}
-        renderPanel={renderPanel}
-        shouldHideConversationView={shouldHideConversationView}
-      />
-    );
-  }
-);
+  return (
+    <ConversationView
+      conversationId={props.selectedConversationId}
+      hasOpenModal={hasOpenModal}
+      hasOpenPanel={activePanel != null}
+      isSelectMode={isSelectMode}
+      onExitSelectMode={onExitSelectMode}
+      processAttachments={processAttachments}
+      renderCompositionArea={renderCompositionArea}
+      renderConversationHeader={renderConversationHeader}
+      renderTimeline={renderTimeline}
+      renderPanel={renderPanel}
+      shouldHideConversationView={shouldHideConversationView}
+    />
+  );
+});