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