From e7b015f53fd777654326ed0b30174c09673312ef Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 18 Dec 2024 13:37:46 -0600 Subject: [PATCH] Trending tracking (#7161) * Add hide to Explore * Event for show * Add hide events to each location --- src/components/interstitials/Trending.tsx | 9 ++++- src/lib/statsig/events.ts | 5 +++ .../components/ExploreTrendingTopics.tsx | 39 ++++++++++++++++++- src/state/preferences/trending.tsx | 7 +++- .../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 3944d92f07..ff41797f4a 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 : ( setTrendingDisabled(true)} + onConfirm={onConfirmHide} /> ) diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts index f1dfb0a947..76ba3257fa 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 be347dcd4d..a4766a0f41 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() { What people are posting about. + + @@ -97,6 +124,14 @@ function Inner() { )} + + ) } diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx index bf5d8f13cc..96d453c080 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(key: T) { (value: Exclude) => 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 e22fad54d7..ef8227d1c6 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 : ( <> @@ -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} />