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