Fix post thread title

2 files changed, 43 insertions, 23 deletions

diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index ee87a6bff..6b7f96e06 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -10,20 +10,14 @@ import {SharePostModel} from '../../../state/models/shell-ui'
 import {PostThreadItem} from './PostThreadItem'
 import {ErrorMessage} from '../util/ErrorMessage'
 
-export const PostThread = observer(function PostThread({uri}: {uri: string}) {
+export const PostThread = observer(function PostThread({
+  uri,
+  view,
+}: {
+  uri: string
+  view: PostThreadViewModel
+}) {
   const store = useStores()
-  const [view, setView] = useState<PostThreadViewModel | undefined>()
-
-  useEffect(() => {
-    if (view?.params.uri === uri) {
-      console.log('Post thread doing nothing')
-      return // no change needed? or trigger refresh?
-    }
-    console.log('Fetching post thread', uri)
-    const newView = new PostThreadViewModel(store, {uri})
-    setView(newView)
-    newView.setup().catch(err => console.error('Failed to fetch thread', err))
-  }, [uri, view?.params.uri, store])
 
   const onPressShare = (uri: string) => {
     store.shell.openModal(new SharePostModel(uri))
@@ -34,11 +28,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
 
   // loading
   // =
-  if (
-    !view ||
-    (view.isLoading && !view.isRefreshing) ||
-    view.params.uri !== uri
-  ) {
+  if ((view.isLoading && !view.isRefreshing) || view.params.uri !== uri) {
     return (
       <View>
         <ActivityIndicator />
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index 69dda7426..7db247a31 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -1,27 +1,57 @@
-import React, {useEffect} from 'react'
+import React, {useEffect, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {makeRecordUri} from '../lib/strings'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
+import {PostThreadViewModel} from '../../state/models/post-thread-view'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
 export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
+  const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
+  const view = useMemo<PostThreadViewModel>(
+    () => new PostThreadViewModel(store, {uri}),
+    [uri],
+  )
 
+  const setTitle = () => {
+    const author = view.thread?.author
+    const niceName = author?.handle || name
+    setViewSubtitle(`by ${niceName}`)
+    store.nav.setTitle(navIdx, `Post by ${niceName}`)
+  }
   useEffect(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, `Post by ${name}`)
+    let aborted = false
+    if (!visible) {
+      return
+    }
+    setTitle()
+    if (!view.hasLoaded && !view.isLoading) {
+      console.log('Fetching post thread', uri)
+      view.setup().then(
+        () => {
+          if (!aborted) {
+            setTitle()
+          }
+        },
+        err => {
+          console.error('Failed to fetch thread', err)
+        },
+      )
+    }
+    return () => {
+      aborted = true
     }
   }, [visible, store.nav, name])
 
   return (
     <View style={{flex: 1}}>
-      <ViewHeader title="Post" subtitle={`by ${name}`} />
+      <ViewHeader title="Post" subtitle={viewSubtitle} />
       <View style={{flex: 1}}>
-        <PostThreadComponent uri={uri} />
+        <PostThreadComponent uri={uri} view={view} />
       </View>
     </View>
   )