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