veryroundbird.house
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React, {useEffect} from 'react'
2import {StyleSheet, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 type FontAwesomeIconStyle,
6} from '@fortawesome/react-native-fontawesome'
7import {Trans} from '@lingui/macro'
8import {useNavigation} from '@react-navigation/native'
9
10import {DISCOVER_FEED_URI} from '#/lib/constants'
11import {usePalette} from '#/lib/hooks/usePalette'
12import {MagnifyingGlassIcon} from '#/lib/icons'
13import {type NavigationProp} from '#/lib/routes/types'
14import {s} from '#/lib/styles'
15import {logger} from '#/logger'
16import {isWeb} from '#/platform/detection'
17import {useFeedFeedbackContext} from '#/state/feed-feedback'
18import {useSession} from '#/state/session'
19import {Button} from '../util/forms/Button'
20import {Text} from '../util/text/Text'
21
22export function CustomFeedEmptyState() {
23 const feedFeedback = useFeedFeedbackContext()
24 const {currentAccount} = useSession()
25 const hasLoggedDiscoverEmptyErrorRef = React.useRef(false)
26
27 useEffect(() => {
28 // Log the empty feed error event
29 if (feedFeedback.feedSourceInfo && currentAccount?.did) {
30 const uri = feedFeedback.feedSourceInfo.uri
31 if (
32 uri === DISCOVER_FEED_URI &&
33 !hasLoggedDiscoverEmptyErrorRef.current
34 ) {
35 hasLoggedDiscoverEmptyErrorRef.current = true
36 logger.metric('feed:discover:emptyError', {
37 userDid: currentAccount.did,
38 })
39 }
40 }
41 }, [feedFeedback.feedSourceInfo, currentAccount?.did])
42 const pal = usePalette('default')
43 const palInverted = usePalette('inverted')
44 const navigation = useNavigation<NavigationProp>()
45
46 const onPressFindAccounts = React.useCallback(() => {
47 if (isWeb) {
48 navigation.navigate('Search', {})
49 } else {
50 navigation.navigate('SearchTab')
51 navigation.popToTop()
52 }
53 }, [navigation])
54
55 return (
56 <View style={styles.emptyContainer}>
57 <View style={styles.emptyIconContainer}>
58 <MagnifyingGlassIcon style={[styles.emptyIcon, pal.text]} size={62} />
59 </View>
60 <Text type="xl-medium" style={[s.textCenter, pal.text]}>
61 <Trans>
62 This feed is empty! You may need to follow more users or tune your
63 language settings.
64 </Trans>
65 </Text>
66 <Button
67 type="inverted"
68 style={styles.emptyBtn}
69 onPress={onPressFindAccounts}>
70 <Text type="lg-medium" style={palInverted.text}>
71 <Trans>Find accounts to follow</Trans>
72 </Text>
73 <FontAwesomeIcon
74 icon="angle-right"
75 style={palInverted.text as FontAwesomeIconStyle}
76 size={14}
77 />
78 </Button>
79 </View>
80 )
81}
82const styles = StyleSheet.create({
83 emptyContainer: {
84 height: '100%',
85 paddingVertical: 40,
86 paddingHorizontal: 30,
87 },
88 emptyIconContainer: {
89 marginBottom: 16,
90 },
91 emptyIcon: {
92 marginLeft: 'auto',
93 marginRight: 'auto',
94 },
95 emptyBtn: {
96 marginVertical: 20,
97 flexDirection: 'row',
98 alignItems: 'center',
99 justifyContent: 'space-between',
100 paddingVertical: 18,
101 paddingHorizontal: 24,
102 borderRadius: 30,
103 },
104
105 feedsTip: {
106 position: 'absolute',
107 left: 22,
108 },
109 feedsTipArrow: {
110 marginLeft: 32,
111 marginTop: 8,
112 },
113})