forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Wrap the post thread screen in an observer (#1509)
authored by
Paul Frazee
and committed by
GitHub
1abe5270
44985d23
+70
-67
+70
-67
src/view/screens/PostThread.tsx
+70
-67
src/view/screens/PostThread.tsx
···
1
1
import React, {useMemo} from 'react'
2
2
import {InteractionManager, StyleSheet, View} from 'react-native'
3
3
import {useFocusEffect} from '@react-navigation/native'
4
+
import {observer} from 'mobx-react-lite'
4
5
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
5
6
import {makeRecordUri} from 'lib/strings/url-helpers'
6
7
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
···
17
18
const SHELL_FOOTER_HEIGHT = 44
18
19
19
20
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
20
-
export const PostThreadScreen = withAuthRequired(({route}: Props) => {
21
-
const store = useStores()
22
-
const safeAreaInsets = useSafeAreaInsets()
23
-
const {name, rkey} = route.params
24
-
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
25
-
const view = useMemo<PostThreadModel>(
26
-
() => new PostThreadModel(store, {uri}),
27
-
[store, uri],
28
-
)
29
-
const {isMobile} = useWebMediaQueries()
21
+
export const PostThreadScreen = withAuthRequired(
22
+
observer(function PostThreadScreenImpl({route}: Props) {
23
+
const store = useStores()
24
+
const safeAreaInsets = useSafeAreaInsets()
25
+
const {name, rkey} = route.params
26
+
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
27
+
const view = useMemo<PostThreadModel>(
28
+
() => new PostThreadModel(store, {uri}),
29
+
[store, uri],
30
+
)
31
+
const {isMobile} = useWebMediaQueries()
32
+
33
+
useFocusEffect(
34
+
React.useCallback(() => {
35
+
store.shell.setMinimalShellMode(false)
36
+
const threadCleanup = view.registerListeners()
30
37
31
-
useFocusEffect(
32
-
React.useCallback(() => {
33
-
store.shell.setMinimalShellMode(false)
34
-
const threadCleanup = view.registerListeners()
38
+
InteractionManager.runAfterInteractions(() => {
39
+
if (!view.hasLoaded && !view.isLoading) {
40
+
view.setup().catch(err => {
41
+
store.log.error('Failed to fetch thread', err)
42
+
})
43
+
}
44
+
})
35
45
36
-
InteractionManager.runAfterInteractions(() => {
37
-
if (!view.hasLoaded && !view.isLoading) {
38
-
view.setup().catch(err => {
39
-
store.log.error('Failed to fetch thread', err)
40
-
})
46
+
return () => {
47
+
threadCleanup()
41
48
}
42
-
})
49
+
}, [store, view]),
50
+
)
43
51
44
-
return () => {
45
-
threadCleanup()
52
+
const onPressReply = React.useCallback(() => {
53
+
if (!view.thread) {
54
+
return
46
55
}
47
-
}, [store, view]),
48
-
)
49
-
50
-
const onPressReply = React.useCallback(() => {
51
-
if (!view.thread) {
52
-
return
53
-
}
54
-
store.shell.openComposer({
55
-
replyTo: {
56
-
uri: view.thread.post.uri,
57
-
cid: view.thread.post.cid,
58
-
text: view.thread.postRecord?.text as string,
59
-
author: {
60
-
handle: view.thread.post.author.handle,
61
-
displayName: view.thread.post.author.displayName,
62
-
avatar: view.thread.post.author.avatar,
56
+
store.shell.openComposer({
57
+
replyTo: {
58
+
uri: view.thread.post.uri,
59
+
cid: view.thread.post.cid,
60
+
text: view.thread.postRecord?.text as string,
61
+
author: {
62
+
handle: view.thread.post.author.handle,
63
+
displayName: view.thread.post.author.displayName,
64
+
avatar: view.thread.post.author.avatar,
65
+
},
63
66
},
64
-
},
65
-
onPost: () => view.refresh(),
66
-
})
67
-
}, [view, store])
67
+
onPost: () => view.refresh(),
68
+
})
69
+
}, [view, store])
68
70
69
-
return (
70
-
<View style={s.hContentRegion}>
71
-
{isMobile && <ViewHeader title="Post" />}
72
-
<View style={s.flex1}>
73
-
<PostThreadComponent
74
-
uri={uri}
75
-
view={view}
76
-
onPressReply={onPressReply}
77
-
treeView={store.preferences.threadTreeViewEnabled}
78
-
/>
79
-
</View>
80
-
{isMobile && !store.shell.minimalShellMode && (
81
-
<View
82
-
style={[
83
-
styles.prompt,
84
-
{
85
-
bottom:
86
-
SHELL_FOOTER_HEIGHT + clamp(safeAreaInsets.bottom, 15, 30),
87
-
},
88
-
]}>
89
-
<ComposePrompt onPressCompose={onPressReply} />
71
+
return (
72
+
<View style={s.hContentRegion}>
73
+
{isMobile && <ViewHeader title="Post" />}
74
+
<View style={s.flex1}>
75
+
<PostThreadComponent
76
+
uri={uri}
77
+
view={view}
78
+
onPressReply={onPressReply}
79
+
treeView={store.preferences.threadTreeViewEnabled}
80
+
/>
90
81
</View>
91
-
)}
92
-
</View>
93
-
)
94
-
})
82
+
{isMobile && !store.shell.minimalShellMode && (
83
+
<View
84
+
style={[
85
+
styles.prompt,
86
+
{
87
+
bottom:
88
+
SHELL_FOOTER_HEIGHT + clamp(safeAreaInsets.bottom, 15, 30),
89
+
},
90
+
]}>
91
+
<ComposePrompt onPressCompose={onPressReply} />
92
+
</View>
93
+
)}
94
+
</View>
95
+
)
96
+
}),
97
+
)
95
98
96
99
const styles = StyleSheet.create({
97
100
prompt: {