Wrap the post thread screen in an observer (#1509)

src/view/screens/PostThread.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
 import {InteractionManager, StyleSheet, View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
+import {observer} from 'mobx-react-lite'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -17,81 +18,83 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 const SHELL_FOOTER_HEIGHT = 44
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
-export const PostThreadScreen = withAuthRequired(({route}: Props) => {
+export const PostThreadScreen = withAuthRequired(
-  const store = useStores()
+  observer(function PostThreadScreenImpl({route}: Props) {
-  const safeAreaInsets = useSafeAreaInsets()
+    const store = useStores()
-  const {name, rkey} = route.params
+    const safeAreaInsets = useSafeAreaInsets()
-  const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
+    const {name, rkey} = route.params
-  const view = useMemo<PostThreadModel>(
+    const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
-    () => new PostThreadModel(store, {uri}),
+    const view = useMemo<PostThreadModel>(
-    [store, uri],
+      () => new PostThreadModel(store, {uri}),
-  )
+      [store, uri],
-  const {isMobile} = useWebMediaQueries()
+    )
+    const {isMobile} = useWebMediaQueries()
 
-  useFocusEffect(
+    useFocusEffect(
-    React.useCallback(() => {
+      React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+        store.shell.setMinimalShellMode(false)
-      const threadCleanup = view.registerListeners()
+        const threadCleanup = view.registerListeners()
 
-      InteractionManager.runAfterInteractions(() => {
+        InteractionManager.runAfterInteractions(() => {
-        if (!view.hasLoaded && !view.isLoading) {
+          if (!view.hasLoaded && !view.isLoading) {
-          view.setup().catch(err => {
+            view.setup().catch(err => {
-            store.log.error('Failed to fetch thread', err)
+              store.log.error('Failed to fetch thread', err)
-          })
+            })
+          }
+        })
+
+        return () => {
+          threadCleanup()
         }
-      })
+      }, [store, view]),
+    )
 
-      return () => {
+    const onPressReply = React.useCallback(() => {
-        threadCleanup()
+      if (!view.thread) {
+        return
       }
-    }, [store, view]),
+      store.shell.openComposer({
-  )
+        replyTo: {
-
+          uri: view.thread.post.uri,
-  const onPressReply = React.useCallback(() => {
+          cid: view.thread.post.cid,
-    if (!view.thread) {
+          text: view.thread.postRecord?.text as string,
-      return
+          author: {
-    }
+            handle: view.thread.post.author.handle,
-    store.shell.openComposer({
+            displayName: view.thread.post.author.displayName,
-      replyTo: {
+            avatar: view.thread.post.author.avatar,
-        uri: view.thread.post.uri,
+          },
-        cid: view.thread.post.cid,
-        text: view.thread.postRecord?.text as string,
-        author: {
-          handle: view.thread.post.author.handle,
-          displayName: view.thread.post.author.displayName,
-          avatar: view.thread.post.author.avatar,
         },
-      },
+        onPost: () => view.refresh(),
-      onPost: () => view.refresh(),
+      })
-    })
+    }, [view, store])
-  }, [view, store])
 
-  return (
+    return (
-    <View style={s.hContentRegion}>
+      <View style={s.hContentRegion}>
-      {isMobile && <ViewHeader title="Post" />}
+        {isMobile && <ViewHeader title="Post" />}
-      <View style={s.flex1}>
+        <View style={s.flex1}>
-        <PostThreadComponent
+          <PostThreadComponent
-          uri={uri}
+            uri={uri}
-          view={view}
+            view={view}
-          onPressReply={onPressReply}
+            onPressReply={onPressReply}
-          treeView={store.preferences.threadTreeViewEnabled}
+            treeView={store.preferences.threadTreeViewEnabled}
-        />
+          />
-      </View>
-      {isMobile && !store.shell.minimalShellMode && (
-        <View
-          style={[
-            styles.prompt,
-            {
-              bottom:
-                SHELL_FOOTER_HEIGHT + clamp(safeAreaInsets.bottom, 15, 30),
-            },
-          ]}>
-          <ComposePrompt onPressCompose={onPressReply} />
         </View>
-      )}
+        {isMobile && !store.shell.minimalShellMode && (
-    </View>
+          <View
-  )
+            style={[
-})
+              styles.prompt,
+              {
+                bottom:
+                  SHELL_FOOTER_HEIGHT + clamp(safeAreaInsets.bottom, 15, 30),
+              },
+            ]}>
+            <ComposePrompt onPressCompose={onPressReply} />
+          </View>
+        )}
+      </View>
+    )
+  }),
+)
 
 const styles = StyleSheet.create({
   prompt: {