diff options
| -rw-r--r-- | src/components/interstitials/Trending.tsx | 9 | ||||
| -rw-r--r-- | src/lib/statsig/events.ts | 5 | ||||
| -rw-r--r-- | src/screens/Search/components/ExploreTrendingTopics.tsx | 39 | ||||
| -rw-r--r-- | src/state/preferences/trending.tsx | 7 | ||||
| -rw-r--r-- | src/view/shell/desktop/SidebarTrendingTopics.tsx | 9 |
5 files changed, 64 insertions, 5 deletions
diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index 3944d92f0..ff41797f4 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -1,7 +1,9 @@ +import React from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {logEvent} from '#/lib/statsig/statsig' import { useTrendingSettings, useTrendingSettingsApi, @@ -39,6 +41,11 @@ export function Inner() { const {data: trending, error, isLoading} = useTrendingTopics() const noTopics = !isLoading && !error && !trending?.topics?.length + const onConfirmHide = React.useCallback(() => { + logEvent('trendingTopics:hide', {context: 'interstitial'}) + setTrendingDisabled(true) + }, [setTrendingDisabled]) + return error || noTopics ? null : ( <View style={[ @@ -104,7 +111,7 @@ export function Inner() { title={_(msg`Hide trending topics?`)} description={_(msg`You can update this later from your settings.`)} confirmButtonCta={_(msg`Hide`)} - onConfirm={() => setTrendingDisabled(true)} + onConfirm={onConfirmHide} /> </View> ) diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts index f1dfb0a94..76ba3257f 100644 --- a/src/lib/statsig/events.ts +++ b/src/lib/statsig/events.ts @@ -236,4 +236,9 @@ export type LogEvents = { 'tmd:share': {} 'tmd:download': {} 'tmd:post': {} + + 'trendingTopics:show': {} + 'trendingTopics:hide': { + context: 'sidebar' | 'interstitial' | 'explore' + } } diff --git a/src/screens/Search/components/ExploreTrendingTopics.tsx b/src/screens/Search/components/ExploreTrendingTopics.tsx index be347dcd4..a4766a0f4 100644 --- a/src/screens/Search/components/ExploreTrendingTopics.tsx +++ b/src/screens/Search/components/ExploreTrendingTopics.tsx @@ -1,16 +1,25 @@ +import React from 'react' import {View} from 'react-native' -import {Trans} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {logEvent} from '#/lib/statsig/statsig' import {isWeb} from '#/platform/detection' -import {useTrendingSettings} from '#/state/preferences/trending' +import { + useTrendingSettings, + useTrendingSettingsApi, +} from '#/state/preferences/trending' import { DEFAULT_LIMIT as TRENDING_TOPICS_COUNT, useTrendingTopics, } from '#/state/queries/trending/useTrendingTopics' import {useTrendingConfig} from '#/state/trending-config' import {atoms as a, tokens, useGutters, useTheme} from '#/alf' +import {Button, ButtonIcon} from '#/components/Button' import {GradientFill} from '#/components/GradientFill' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2' +import * as Prompt from '#/components/Prompt' import { TrendingTopic, TrendingTopicLink, @@ -26,9 +35,17 @@ export function ExploreTrendingTopics() { function Inner() { const t = useTheme() + const {_} = useLingui() const gutters = useGutters([0, 'compact']) const {data: trending, error, isLoading} = useTrendingTopics() const noTopics = !isLoading && !error && !trending?.topics?.length + const {setTrendingDisabled} = useTrendingSettingsApi() + const trendingPrompt = Prompt.usePromptControl() + + const onConfirmHide = React.useCallback(() => { + logEvent('trendingTopics:hide', {context: 'explore'}) + setTrendingDisabled(true) + }, [setTrendingDisabled]) return error || noTopics ? null : ( <> @@ -61,6 +78,16 @@ function Inner() { <Trans>What people are posting about.</Trans> </Text> </View> + + <Button + label={_(msg`Hide trending tpoics`)} + size="small" + variant="ghost" + color="secondary" + shape="round" + onPress={() => trendingPrompt.open()}> + <ButtonIcon icon={X} /> + </Button> </View> <View style={[a.pt_md, a.pb_lg]}> @@ -97,6 +124,14 @@ function Inner() { )} </View> </View> + + <Prompt.Basic + control={trendingPrompt} + title={_(msg`Hide trending topics?`)} + description={_(msg`You can update this later from your settings.`)} + confirmButtonCta={_(msg`Hide`)} + onConfirm={onConfirmHide} + /> </> ) } diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx index bf5d8f13c..96d453c08 100644 --- a/src/state/preferences/trending.tsx +++ b/src/state/preferences/trending.tsx @@ -1,5 +1,6 @@ import React from 'react' +import {logEvent} from '#/lib/statsig/statsig' import * as persisted from '#/state/persisted' type StateContext = { @@ -26,7 +27,11 @@ function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) { (value: Exclude<persisted.Schema[T], undefined>) => void >( hidden => { - _set(Boolean(hidden)) + const hide = Boolean(hidden) + if (!hide) { + logEvent('trendingTopics:show', {}) + } + _set(hide) persisted.write(key, hidden) }, [key, _set], diff --git a/src/view/shell/desktop/SidebarTrendingTopics.tsx b/src/view/shell/desktop/SidebarTrendingTopics.tsx index e22fad54d..ef8227d1c 100644 --- a/src/view/shell/desktop/SidebarTrendingTopics.tsx +++ b/src/view/shell/desktop/SidebarTrendingTopics.tsx @@ -1,7 +1,9 @@ +import React from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {logEvent} from '#/lib/statsig/statsig' import { useTrendingSettings, useTrendingSettingsApi, @@ -37,6 +39,11 @@ function Inner() { const {data: trending, error, isLoading} = useTrendingTopics() const noTopics = !isLoading && !error && !trending?.topics?.length + const onConfirmHide = React.useCallback(() => { + logEvent('trendingTopics:hide', {context: 'sidebar'}) + setTrendingDisabled(true) + }, [setTrendingDisabled]) + return error || noTopics ? null : ( <> <View style={[a.gap_sm, {paddingBottom: 2}]}> @@ -96,7 +103,7 @@ function Inner() { title={_(msg`Hide trending topics?`)} description={_(msg`You can update this later from your settings.`)} confirmButtonCta={_(msg`Hide`)} - onConfirm={() => setTrendingDisabled(true)} + onConfirm={onConfirmHide} /> <Divider /> </> |