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,14 +33,13 @@ function renderPanel(conversationId: string) {
   return <ConversationPanel conversationId={conversationId} />;
 }
 
-export const SmartConversationView = memo(
-  function SmartConversationView(): JSX.Element {
-    const conversationId = useSelector(getSelectedConversationId);
-
-    if (!conversationId) {
-      throw new Error('SmartConversationView: No selected conversation');
-    }
+export type SmartConversationViewProps = Readonly<{
+  selectedConversationId: string;
+}>;
 
+export const SmartConversationView = memo(function SmartConversationView(
+  props: SmartConversationViewProps
+): JSX.Element {
   const { toggleSelectMode } = useConversationsActions();
   const selectedMessageIds = useSelector(getSelectedMessageIds);
   const isSelectMode = selectedMessageIds != null;
@@ -59,7 +57,7 @@ export const SmartConversationView = memo(
 
   return (
     <ConversationView
-        conversationId={conversationId}
+      conversationId={props.selectedConversationId}
       hasOpenModal={hasOpenModal}
       hasOpenPanel={activePanel != null}
       isSelectMode={isSelectMode}
@@ -72,5 +70,4 @@ export const SmartConversationView = memo(
       shouldHideConversationView={shouldHideConversationView}
     />
   );
-  }
-);
+});