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
|
import React from 'react'
import {RefreshControl, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {FeedsDiscoveryModel} from 'state/models/discovery/feeds'
import {CenteredView, FlatList} from 'view/com/util/Views'
import {CustomFeed} from 'view/com/feeds/CustomFeed'
import {Text} from 'view/com/util/text/Text'
import {isDesktopWeb} from 'platform/detection'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'DiscoverFeeds'>
export const DiscoverFeedsScreen = withAuthRequired(
observer(({}: Props) => {
const store = useStores()
const pal = usePalette('default')
const feeds = React.useMemo(() => new FeedsDiscoveryModel(store), [store])
useFocusEffect(
React.useCallback(() => {
store.shell.setMinimalShellMode(false)
feeds.refresh()
}, [store, feeds]),
)
const onRefresh = React.useCallback(() => {
feeds.refresh()
}, [feeds])
const renderListEmptyComponent = React.useCallback(() => {
return (
<View
style={[
pal.border,
!isDesktopWeb && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
{feeds.isLoading
? 'Loading...'
: `We can't find any feeds for some reason. This is probably an error - try refreshing!`}
</Text>
</View>
)
}, [pal, feeds.isLoading])
const renderItem = React.useCallback(
({item}) => (
<CustomFeed
key={item.data.uri}
item={item}
showSaveBtn
showDescription
showLikes
/>
),
[],
)
return (
<CenteredView style={[styles.container, pal.view]}>
<View style={[isDesktopWeb && styles.containerDesktop, pal.border]}>
<ViewHeader title="Discover Feeds" showOnDesktop />
</View>
<FlatList
style={[!isDesktopWeb && s.flex1]}
data={feeds.feeds}
keyExtractor={item => item.data.uri}
contentContainerStyle={styles.contentContainer}
refreshControl={
<RefreshControl
refreshing={feeds.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
renderItem={renderItem}
initialNumToRender={10}
ListEmptyComponent={renderListEmptyComponent}
extraData={feeds.isLoading}
/>
</CenteredView>
)
}),
)
const styles = StyleSheet.create({
container: {
flex: 1,
},
contentContainer: {
paddingBottom: 100,
},
containerDesktop: {
borderLeftWidth: 1,
borderRightWidth: 1,
},
empty: {
paddingHorizontal: 18,
paddingVertical: 16,
borderRadius: 8,
marginHorizontal: 18,
marginTop: 10,
},
})
|
