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