Use convo view instead of convo state for driving the UI (#10290)

src/screens/Messages/Conversation.tsx

@@ -35,6 +35,7 @@ import {ConvoStatus} from '#/state/messages/convo/types'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useTheme, web} from '#/alf'
@@ -46,6 +47,7 @@ import {
 } from '#/components/dialogs/EmailDialog'
 import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter'
 import {MessagesListHeader} from '#/components/dms/MessagesListHeader'
+import {type ConvoWithDetails, parseConvoView} from '#/components/dms/util'
 import {Error} from '#/components/Error'
 import * as Layout from '#/components/Layout'
 import {Loader} from '#/components/Loader'
@@ -104,9 +106,14 @@ function Inner() {
   const t = useTheme()
   const convoState = useConvo()
   const {_} = useLingui()
+  const {currentAccount} = useSession()
   const isFocused = useIsFocused()
   const {top: topInset} = useSafeAreaInsets()
 
+  const convo = convoState.convo
+    ? parseConvoView(convoState.convo, currentAccount?.did)
+    : null
+
   const moderationOpts = useModerationOpts()
   const {data: recipientUnshadowed} = useProfileQuery({
     did: convoState.getPrimaryMember?.()?.did,
@@ -144,9 +151,13 @@ function Inner() {
         <Layout.Center
           style={[a.w_full, IS_LIQUID_GLASS && {paddingTop: topInset}]}>
           {moderation ? (
-            <MessagesListHeader profile={recipient} moderation={moderation} />
+            <MessagesListHeader
+              convo={convo}
+              profile={recipient}
+              moderation={moderation}
+            />
           ) : (
-            <MessagesListHeader />
+            <MessagesListHeader convo={convo} />
           )}
         </Layout.Center>
         <Error
@@ -166,9 +177,13 @@ function Inner() {
       {!readyToShow && (
         <View style={IS_LIQUID_GLASS && {paddingTop: topInset}}>
           {moderation ? (
-            <MessagesListHeader profile={recipient} moderation={moderation} />
+            <MessagesListHeader
+              convo={convo}
+              profile={recipient}
+              moderation={moderation}
+            />
           ) : (
-            <MessagesListHeader />
+            <MessagesListHeader convo={convo} />
           )}
         </View>
       )}
@@ -178,6 +193,9 @@ function Inner() {
           recipient={recipient}
           hasScrolled={hasScrolled}
           setHasScrolled={setHasScrolled}
+          convo={convo}
+          isActive={isConvoActive(convoState)}
+          hasMessages={isConvoActive(convoState) && convoState.items.length > 0}
         />
         {!readyToShow && (
           <View
@@ -205,13 +223,18 @@ function InnerReady({
   recipient,
   hasScrolled,
   setHasScrolled,
+  convo,
+  isActive,
+  hasMessages,
 }: {
   moderation: ModerationDecision | null
   recipient: Shadow<AppBskyActorDefs.ProfileViewDetailed> | undefined
   hasScrolled: boolean
   setHasScrolled: React.Dispatch<React.SetStateAction<boolean>>
+  convo: ConvoWithDetails | null
+  isActive: boolean
+  hasMessages: boolean
 }) {
-  const convoState = useConvo()
   const navigation = useNavigation<NavigationProp>()
   const {top: topInset} = useSafeAreaInsets()
   const [headerHeight, setHeaderHeight] = useState(0)
@@ -262,7 +285,11 @@ function InnerReady({
   }, [maybeBlockForEmailVerification])
 
   const header = (
-    <MessagesListHeader profile={recipient} moderation={moderation} />
+    <MessagesListHeader
+      convo={convo}
+      profile={recipient}
+      moderation={moderation}
+    />
   )
 
   return (
@@ -277,7 +304,7 @@ function InnerReady({
       ) : (
         header
       )}
-      {isConvoActive(convoState) && (
+      {isActive && (
         <MessagesList
           hasScrolled={hasScrolled}
           setHasScrolled={setHasScrolled}
@@ -285,11 +312,11 @@ function InnerReady({
           hasAcceptOverride={!!params.accept}
           transparentHeaderHeight={IS_LIQUID_GLASS ? headerHeight : 0}
           footer={
-            moderation && recipient ? (
+            moderation && recipient && convo ? (
               <MessagesListBlockedFooter
                 recipient={recipient}
-                convoId={convoState.convo.id}
-                hasMessages={convoState.items.length > 0}
+                convoId={convo.view.id}
+                hasMessages={hasMessages}
                 moderation={moderation}
               />
             ) : null