this repo has no description
1import {View} from 'react-native'
2import {msg} from '@lingui/core/macro'
3import {useLingui} from '@lingui/react'
4import {Trans} from '@lingui/react/macro'
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 {atoms as a, useTheme} from '#/alf'
13import {Button, ButtonIcon} from '#/components/Button'
14import {DotGrid3x1_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
15import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
16import * as Prompt from '#/components/Prompt'
17import {TrendingTopicLink} from '#/components/TrendingTopics'
18import {Text} from '#/components/Typography'
19import {useAnalytics} from '#/analytics'
20
21const TRENDING_LIMIT = 5
22
23export function SidebarTrendingTopics() {
24 const {enabled} = useTrendingConfig()
25 const {trendingDisabled} = useTrendingSettings()
26 return !enabled ? null : trendingDisabled ? null : <Inner />
27}
28
29function Inner() {
30 const t = useTheme()
31 const {_} = useLingui()
32 const ax = useAnalytics()
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 = () => {
39 ax.metric('trendingTopics:hide', {context: 'sidebar'})
40 setTrendingDisabled(true)
41 }
42
43 return error || noTopics ? null : (
44 <>
45 <View
46 style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
47 <View style={[a.flex_row, a.align_center, a.gap_xs, a.pb_md]}>
48 <TrendingIcon width={16} height={16} fill={t.atoms.text.color} />
49 <Text style={[a.flex_1, a.text_md, a.font_semi_bold, t.atoms.text]}>
50 <Trans>Trending</Trans>
51 </Text>
52 <Button
53 variant="ghost"
54 size="tiny"
55 color="secondary"
56 shape="round"
57 label={_(msg`Trending options`)}
58 onPress={() => trendingPrompt.open()}
59 style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
60 <ButtonIcon icon={Ellipsis} size="xs" />
61 </Button>
62 </View>
63
64 <View style={[a.gap_xs]}>
65 {isLoading ? (
66 Array(TRENDING_LIMIT)
67 .fill(0)
68 .map((_n, i) => (
69 <View key={i} style={[a.flex_row, a.align_center, a.gap_sm]}>
70 <Text
71 style={[
72 a.text_sm,
73 t.atoms.text_contrast_low,
74 {minWidth: 16},
75 ]}>
76 {i + 1}.
77 </Text>
78 <View
79 style={[
80 a.rounded_xs,
81 t.atoms.bg_contrast_50,
82 {height: 14, width: i % 2 === 0 ? 80 : 100},
83 ]}
84 />
85 </View>
86 ))
87 ) : !trending?.topics ? null : (
88 <>
89 {trending.topics.slice(0, TRENDING_LIMIT).map((topic, i) => (
90 <TrendingTopicLink
91 key={topic.link}
92 topic={topic}
93 style={[a.self_start]}
94 onPress={() => {
95 ax.metric('trendingTopic:click', {context: 'sidebar'})
96 }}>
97 {({hovered}) => (
98 <View style={[a.flex_row, a.align_center, a.gap_xs]}>
99 <Text
100 style={[
101 a.text_sm,
102 a.leading_snug,
103 t.atoms.text_contrast_low,
104 {minWidth: 16},
105 ]}>
106 {i + 1}.
107 </Text>
108 <Text
109 style={[
110 a.text_sm,
111 a.leading_snug,
112 hovered
113 ? [t.atoms.text, a.underline]
114 : t.atoms.text_contrast_medium,
115 ]}
116 numberOfLines={1}>
117 {topic.displayName ?? topic.topic}
118 </Text>
119 </View>
120 )}
121 </TrendingTopicLink>
122 ))}
123 </>
124 )}
125 </View>
126 </View>
127 <Prompt.Basic
128 control={trendingPrompt}
129 title={_(msg`Hide trending topics?`)}
130 description={_(msg`You can update this later from your settings.`)}
131 confirmButtonCta={_(msg`Hide`)}
132 onConfirm={onConfirmHide}
133 />
134 </>
135 )
136}