1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React, {useState, useEffect, useMemo} from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/posts/Feed'
import {FAB} from '../com/util/FloatingActionButton'
import {useStores} from '../../state'
import {FeedModel} from '../../state/models/feed-view'
import {ScreenParams} from '../routes'
import {s, colors} from '../lib/styles'
export const Home = observer(function Home({
navIdx,
visible,
scrollElRef,
}: ScreenParams) {
const store = useStores()
const [hasSetup, setHasSetup] = useState<boolean>(false)
const {appState} = useAppState({
onForeground: () => doPoll(true),
})
const defaultFeedView = useMemo<FeedModel>(
() =>
new FeedModel(store, 'home', {
algorithm: 'reverse-chronological',
}),
[store],
)
const doPoll = (knownActive = false) => {
if ((!knownActive && appState !== 'active') || !visible) {
return
}
if (defaultFeedView.isLoading) {
return
}
console.log('Polling home feed')
defaultFeedView.checkForLatest().catch(e => {
console.error('Failed to poll feed', e)
})
}
useEffect(() => {
let aborted = false
const pollInterval = setInterval(() => doPoll(), 15e3)
if (!visible) {
return
}
if (hasSetup) {
console.log('Updating home feed')
defaultFeedView.update()
} else {
store.nav.setTitle(navIdx, 'Home')
console.log('Fetching home feed')
defaultFeedView.setup().then(() => {
if (aborted) return
setHasSetup(true)
})
}
return () => {
clearInterval(pollInterval)
aborted = true
}
}, [visible, store])
const onPressCompose = () => {
store.shell.openComposer({onPost: onCreatePost})
}
const onCreatePost = () => {
defaultFeedView.loadLatest()
}
const onPressTryAgain = () => {
defaultFeedView.refresh()
}
const onPressLoadLatest = () => {
defaultFeedView.refresh()
scrollElRef?.current?.scrollToOffset({offset: 0})
}
return (
<View style={s.flex1}>
<Feed
key="default"
feed={defaultFeedView}
scrollElRef={scrollElRef}
style={{flex: 1}}
onPressCompose={onPressCompose}
onPressTryAgain={onPressTryAgain}
/>
{defaultFeedView.hasNewLatest ? (
<TouchableOpacity style={styles.loadLatest} onPress={onPressLoadLatest}>
<FontAwesomeIcon icon="arrow-up" style={{color: colors.white}} />
<Text style={styles.loadLatestText}>Load new posts</Text>
</TouchableOpacity>
) : undefined}
</View>
)
})
const styles = StyleSheet.create({
loadLatest: {
flexDirection: 'row',
position: 'absolute',
left: 10,
bottom: 15,
backgroundColor: colors.pink3,
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 30,
shadowColor: '#000',
shadowOpacity: 0.3,
shadowOffset: {width: 0, height: 1},
},
loadLatestText: {
color: colors.white,
fontWeight: 'bold',
marginLeft: 5,
},
})
|
