forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {ScrollView, View} from 'react-native'
3import {msg} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {logEvent} from '#/lib/statsig/statsig'
7import {
8 useTrendingSettings,
9 useTrendingSettingsApi,
10} from '#/state/preferences/trending'
11import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
12import {useTrendingConfig} from '#/state/service-config'
13import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
14import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
15import {atoms as a, useGutters, useTheme} from '#/alf'
16import {Button, ButtonIcon} from '#/components/Button'
17import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
18import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
19import * as Prompt from '#/components/Prompt'
20import {TrendingTopicLink} from '#/components/TrendingTopics'
21import {Text} from '#/components/Typography'
22
23export function TrendingInterstitial() {
24 const {enabled} = useTrendingConfig()
25 const {trendingDisabled} = useTrendingSettings()
26 return enabled && !trendingDisabled ? <Inner /> : null
27}
28
29export function Inner() {
30 const t = useTheme()
31 const {_} = useLingui()
32 const gutters = useGutters([0, 'base', 0, 'base'])
33 const trendingPrompt = Prompt.usePromptControl()
34 const {setTrendingDisabled} = useTrendingSettingsApi()
35 const {data: trending, error, isLoading} = useTrendingTopics()
36 const noTopics = !isLoading && !error && !trending?.topics?.length
37
38 const onConfirmHide = React.useCallback(() => {
39 logEvent('trendingTopics:hide', {context: 'interstitial'})
40 setTrendingDisabled(true)
41 }, [setTrendingDisabled])
42
43 return error || noTopics ? null : (
44 <View style={[t.atoms.border_contrast_low, a.border_t]}>
45 <BlockDrawerGesture>
46 <ScrollView
47 horizontal
48 showsHorizontalScrollIndicator={false}
49 decelerationRate="fast">
50 <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
51 <View style={{paddingLeft: 4, paddingRight: 2}}>
52 <Graph size="sm" />
53 </View>
54 {isLoading ? (
55 <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
56 <LoadingPlaceholder
57 width={80}
58 height={undefined}
59 style={{alignSelf: 'stretch'}}
60 />
61 <LoadingPlaceholder
62 width={50}
63 height={undefined}
64 style={{alignSelf: 'stretch'}}
65 />
66 <LoadingPlaceholder
67 width={120}
68 height={undefined}
69 style={{alignSelf: 'stretch'}}
70 />
71 <LoadingPlaceholder
72 width={30}
73 height={undefined}
74 style={{alignSelf: 'stretch'}}
75 />
76 <LoadingPlaceholder
77 width={180}
78 height={undefined}
79 style={{alignSelf: 'stretch'}}
80 />
81 <Text
82 style={[
83 t.atoms.text_contrast_medium,
84 a.text_sm,
85 a.font_semi_bold,
86 ]}>
87 {' '}
88 </Text>
89 </View>
90 ) : !trending?.topics ? null : (
91 <>
92 {trending.topics.map(topic => (
93 <TrendingTopicLink
94 key={topic.link}
95 topic={topic}
96 onPress={() => {
97 logEvent('trendingTopic:click', {context: 'interstitial'})
98 }}>
99 <View style={[a.py_lg]}>
100 <Text
101 style={[
102 t.atoms.text_contrast_medium,
103 a.text_sm,
104 a.font_semi_bold,
105 ]}>
106 {topic.topic}
107 </Text>
108 </View>
109 </TrendingTopicLink>
110 ))}
111 <Button
112 label={_(msg`Hide trending topics`)}
113 size="tiny"
114 variant="ghost"
115 color="secondary"
116 shape="round"
117 onPress={() => trendingPrompt.open()}>
118 <ButtonIcon icon={X} />
119 </Button>
120 </>
121 )}
122 </View>
123 </ScrollView>
124 </BlockDrawerGesture>
125
126 <Prompt.Basic
127 control={trendingPrompt}
128 title={_(msg`Hide trending topics?`)}
129 description={_(msg`You can update this later from your settings.`)}
130 confirmButtonCta={_(msg`Hide`)}
131 onConfirm={onConfirmHide}
132 />
133 </View>
134 )
135}