Trending tracking (#7161)

* Add hide to Explore

* Event for show

* Add hide events to each location

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>
   )

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'
+  }
 }

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}
+      />
     </>
   )
 }

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],

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 />
     </>