8584009bae
* Move home feed and thread preferences to server * Fix thread usage of prefs * Remove log * Bump @atproto/api@0.6.16 * Improve type usage
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
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'
|
|
import {ViewHeader} from '../com/util/ViewHeader'
|
|
import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
|
|
import {ComposePrompt} from 'view/com/composer/Prompt'
|
|
import {PostThreadModel} from 'state/models/content/post-thread'
|
|
import {useStores} from 'state/index'
|
|
import {s} from 'lib/styles'
|
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
import {clamp} from 'lodash'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
|
|
const SHELL_FOOTER_HEIGHT = 44
|
|
|
|
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
|
|
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<PostThreadModel>(
|
|
() => new PostThreadModel(store, {uri}),
|
|
[store, uri],
|
|
)
|
|
const {isMobile} = useWebMediaQueries()
|
|
|
|
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)
|
|
})
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
threadCleanup()
|
|
}
|
|
}, [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,
|
|
},
|
|
},
|
|
onPost: () => view.refresh(),
|
|
})
|
|
}, [view, store])
|
|
|
|
return (
|
|
<View style={s.hContentRegion}>
|
|
{isMobile && <ViewHeader title="Post" />}
|
|
<View style={s.flex1}>
|
|
<PostThreadComponent
|
|
uri={uri}
|
|
view={view}
|
|
onPressReply={onPressReply}
|
|
treeView={!!store.preferences.thread.lab_treeViewEnabled}
|
|
/>
|
|
</View>
|
|
{isMobile && !store.shell.minimalShellMode && (
|
|
<View
|
|
style={[
|
|
styles.prompt,
|
|
{
|
|
bottom:
|
|
SHELL_FOOTER_HEIGHT + clamp(safeAreaInsets.bottom, 15, 30),
|
|
},
|
|
]}>
|
|
<ComposePrompt onPressCompose={onPressReply} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}),
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
prompt: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
})
|