diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index f32e7be6..630a4b6b 100644 --- a/src/view/screens/PostThread.tsx +++ b/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 -export const PostThreadScreen = withAuthRequired(({route}: Props) => { - const store = useStores() - const safeAreaInsets = useSafeAreaInsets() - const {name, rkey} = route.params - const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) - const view = useMemo( - () => new PostThreadModel(store, {uri}), - [store, uri], - ) - const {isMobile} = useWebMediaQueries() +export const PostThreadScreen = withAuthRequired( + observer(function PostThreadScreenImpl({route}: Props) { + const store = useStores() + const safeAreaInsets = useSafeAreaInsets() + const {name, rkey} = route.params + const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) + const view = useMemo( + () => new PostThreadModel(store, {uri}), + [store, uri], + ) + const {isMobile} = useWebMediaQueries() - useFocusEffect( - React.useCallback(() => { - store.shell.setMinimalShellMode(false) - const threadCleanup = view.registerListeners() + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + const threadCleanup = view.registerListeners() - InteractionManager.runAfterInteractions(() => { - if (!view.hasLoaded && !view.isLoading) { - view.setup().catch(err => { - store.log.error('Failed to fetch thread', err) - }) + InteractionManager.runAfterInteractions(() => { + if (!view.hasLoaded && !view.isLoading) { + view.setup().catch(err => { + store.log.error('Failed to fetch thread', err) + }) + } + }) + + return () => { + threadCleanup() } - }) + }, [store, view]), + ) - return () => { - threadCleanup() + const onPressReply = React.useCallback(() => { + if (!view.thread) { + return } - }, [store, view]), - ) - - const onPressReply = React.useCallback(() => { - if (!view.thread) { - return - } - store.shell.openComposer({ - replyTo: { - 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, + store.shell.openComposer({ + replyTo: { + 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(), - }) - }, [view, store]) + onPost: () => view.refresh(), + }) + }, [view, store]) - return ( - - {isMobile && } - - - - {isMobile && !store.shell.minimalShellMode && ( - - + return ( + + {isMobile && } + + - )} - - ) -}) + {isMobile && !store.shell.minimalShellMode && ( + + + + )} + + ) + }), +) const styles = StyleSheet.create({ prompt: {