Some metrics (#7294)

* Add trending metrics

* Progress guide events

* Fix naming, improve existing events

src/components/ProgressGuide/FollowDialog.tsx

@@ -10,6 +10,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
@@ -75,7 +76,10 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
     <>
       <Button
         label={_(msg`Find people to follow`)}
-        onPress={control.open}
+        onPress={() => {
+          control.open()
+          logEvent('progressGuide:followDialog:open', {})
+        }}
         size={gtMobile ? 'small' : 'large'}
         color="primary"
         variant="solid">

src/components/interstitials/Trending.tsx

@@ -88,7 +88,12 @@ export function Inner() {
         ) : !trending?.topics ? null : (
           <>
             {trending.topics.map(topic => (
-              <TrendingTopicLink key={topic.link} topic={topic}>
+              <TrendingTopicLink
+                key={topic.link}
+                topic={topic}
+                onPress={() => {
+                  logEvent('trendingTopic:click', {context: 'interstitial'})
+                }}>
                 {({hovered}) => (
                   <TrendingTopic
                     topic={topic}

src/lib/statsig/events.ts

@@ -237,8 +237,19 @@ export type LogEvents = {
   'tmd:download': {}
   'tmd:post': {}
 
-  'trendingTopics:show': {}
+  'trendingTopics:show': {
+    context: 'settings'
+  }
   'trendingTopics:hide': {
-    context: 'sidebar' | 'interstitial' | 'explore:trending'
+    context: 'settings' | 'sidebar' | 'interstitial' | 'explore:trending'
   }
+  'trendingTopic:click': {
+    context: 'sidebar' | 'interstitial' | 'explore'
+  }
+  'recommendedTopic:click': {
+    context: 'explore'
+  }
+
+  'progressGuide:hide': {}
+  'progressGuide:followDialog:open': {}
 }

src/screens/Search/components/ExploreRecommendations.tsx

@@ -1,6 +1,7 @@
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import {
   DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
@@ -71,7 +72,12 @@ function Inner() {
           ) : !trending?.suggested ? null : (
             <>
               {trending.suggested.map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('recommendedTopic:click', {context: 'explore'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       topic={topic}

src/screens/Search/components/ExploreTrendingTopics.tsx

@@ -106,7 +106,12 @@ function Inner() {
           ) : !trending?.topics ? null : (
             <>
               {trending.topics.map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('trendingTopic:click', {context: 'explore'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       topic={topic}

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -3,6 +3,7 @@ import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
+import {logEvent} from '#/lib/statsig/statsig'
 import {isNative} from '#/platform/detection'
 import {useAutoplayDisabled, useSetAutoplayDisabled} from '#/state/preferences'
 import {
@@ -120,7 +121,15 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                 name="show_trending_topics"
                 label={_(msg`Enable trending topics`)}
                 value={!trendingDisabled}
-                onChange={value => setTrendingDisabled(!value)}>
+                onChange={value => {
+                  const hide = Boolean(!value)
+                  if (hide) {
+                    logEvent('trendingTopics:hide', {context: 'settings'})
+                  } else {
+                    logEvent('trendingTopics:show', {context: 'settings'})
+                  }
+                  setTrendingDisabled(hide)
+                }}>
                 <SettingsList.Item>
                   <SettingsList.ItemIcon icon={Graph} />
                   <SettingsList.ItemText>

src/state/preferences/trending.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 
-import {logEvent} from '#/lib/statsig/statsig'
 import * as persisted from '#/state/persisted'
 
 type StateContext = {
@@ -27,11 +26,7 @@ function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
     (value: Exclude<persisted.Schema[T], undefined>) => void
   >(
     hidden => {
-      const hide = Boolean(hidden)
+      _set(Boolean(hidden))
-      if (!hide) {
-        logEvent('trendingTopics:show', {})
-      }
-      _set(hide)
       persisted.write(key, hidden)
     },
     [key, _set],

src/state/shell/progress-guide.tsx

@@ -2,6 +2,7 @@ import React, {useMemo} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {
   ProgressGuideToast,
   ProgressGuideToastRef,
@@ -137,6 +138,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       endProgressGuide() {
         setLocalGuideState(undefined)
         mutateAsync(undefined)
+        logEvent('progressGuide:hide', {})
       },
 
       captureAction(action: ProgressGuideAction, count = 1) {

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -79,7 +79,12 @@ function Inner() {
           ) : !trending?.topics ? null : (
             <>
               {trending.topics.slice(0, TRENDING_LIMIT).map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('trendingTopic:click', {context: 'sidebar'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       size="small"