Add trendingTopic:seen metric (#11309)

src/analytics/metrics/types.ts

@@ -750,6 +750,10 @@ export type Events = {
   'trendingTopics:hide': {
     context: 'settings' | 'sidebar' | 'interstitial' | 'explore:trending'
   }
+  'trendingTopic:seen': {
+    context: 'sidebar' | 'interstitial' | 'explore'
+    recId?: string
+  }
   'trendingTopic:click': {
     context: 'sidebar' | 'interstitial' | 'explore'
     recId?: string

src/components/TrendingTopics.tsx

@@ -1,22 +1,28 @@
-import {useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {type AppBskyUnspeccedDefs, type AtUri} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
+import {useCallOnce} from '#/lib/once'
 // import {makeProfileLink} from '#/lib/routes/links'
 // import {feedUriToHref} from '#/lib/strings/url-helpers'
 import {native} from '#/alf'
 import {Link as InternalLink, type LinkProps} from '#/components/Link'
+import {type Metrics, useAnalytics} from '#/analytics'
 
 export function TrendingTopicLink({
   topic: raw,
+  metricContext,
+  recId,
   children,
   ...rest
 }: {
   topic: AppBskyUnspeccedDefs.TrendView
+  metricContext: Metrics['trendingTopic:seen']['context']
+  recId?: string
 } & Omit<LinkProps, 'to' | 'label'>) {
   const topic = useTopic(raw)
+  useTrendingTopicSeen(metricContext, recId)
 
   return (
     <InternalLink
@@ -29,6 +35,20 @@ export function TrendingTopicLink({
   )
 }
 
+export function useTrendingTopicSeen(
+  context: Metrics['trendingTopic:seen']['context'],
+  recId?: string,
+) {
+  const ax = useAnalytics()
+  const trackSeen = useCallOnce(() => {
+    ax.metric('trendingTopic:seen', {context, recId})
+  })
+
+  useEffect(() => {
+    trackSeen()
+  }, [trackSeen])
+}
+
 type ParsedTrendingTopic =
   | {
       type: 'topic' | 'tag' | 'starter-pack' | 'unknown'
@@ -48,14 +68,14 @@ type ParsedTrendingTopic =
 export function useTopic(
   raw: AppBskyUnspeccedDefs.TrendView,
 ): ParsedTrendingTopic {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   return useMemo(() => {
     const {topic: displayName, link} = raw
 
     if (link.startsWith('/search')) {
       return {
         type: 'topic',
-        label: _(msg`Browse posts about ${displayName}`),
+        label: l`Browse posts about ${displayName}`,
         displayName,
         uri: undefined,
         url: link,
@@ -63,7 +83,7 @@ export function useTopic(
     } else if (link.startsWith('/hashtag')) {
       return {
         type: 'tag',
-        label: _(msg`Browse posts tagged with ${displayName}`),
+        label: l`Browse posts tagged with ${displayName}`,
         displayName,
         // displayName: displayName.replace(/^#/, ''),
         uri: undefined,
@@ -72,7 +92,7 @@ export function useTopic(
     } else if (link.startsWith('/starter-pack')) {
       return {
         type: 'starter-pack',
-        label: _(msg`Browse starter pack ${displayName}`),
+        label: l`Browse starter pack ${displayName}`,
         displayName,
         uri: undefined,
         url: link,
@@ -109,10 +129,10 @@ export function useTopic(
 
     return {
       type: 'unknown',
-      label: _(msg`Browse topic ${displayName}`),
+      label: l`Browse topic ${displayName}`,
       displayName,
       uri: undefined,
       url: link,
     }
-  }, [_, raw])
+  }, [l, raw])
 }

src/components/interstitials/FeedTrendingTopics.tsx

@@ -26,6 +26,7 @@ import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/ic
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {SubtleHover} from '#/components/SubtleHover'
+import {useTrendingTopicSeen} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 
@@ -136,9 +137,11 @@ function Inner() {
                     key={trend.link}
                     trend={trend}
                     rank={index + 1}
+                    recId={trending.recId}
                     onPress={() => {
                       ax.metric('trendingTopic:click', {
                         context: 'interstitial',
+                        recId: trending.recId,
                       })
                     }}
                   />
@@ -163,10 +166,12 @@ function Inner() {
 function TrendRow({
   trend,
   rank,
+  recId,
   onPress,
 }: ViewStyleProp & {
   trend: AppBskyUnspeccedDefs.TrendView
   rank: number
+  recId?: string
   children?: React.ReactNode
   onPress?: () => void
 }) {
@@ -175,6 +180,7 @@ function TrendRow({
 
   const actors = useModerateTrendingActors(trend.actors)
   const formattedPostCount = formatCount(i18n, trend.postCount)
+  useTrendingTopicSeen('interstitial', recId)
 
   return (
     <Link

src/components/interstitials/Trending.tsx

@@ -1,7 +1,6 @@
 import {useCallback} from 'react'
 import {ScrollView, View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {
   useTrendingSettings,
@@ -30,7 +29,7 @@ export function TrendingInterstitial() {
 
 export function Inner() {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const ax = useAnalytics()
   const gutters = useGutters([0, 'base', 0, 'base'])
   const trendingPrompt = Prompt.usePromptControl()
@@ -103,6 +102,8 @@ export function Inner() {
                   <TrendingTopicLink
                     key={topic.link}
                     topic={topic}
+                    metricContext="interstitial"
+                    recId={trending.recId}
                     onPress={() => {
                       ax.metric('trendingTopic:click', {
                         context: 'interstitial',
@@ -122,7 +123,7 @@ export function Inner() {
                   </TrendingTopicLink>
                 ))}
                 <Button
-                  label={_(msg`Hide trending topics`)}
+                  label={l`Hide trending topics`}
                   size="tiny"
                   variant="ghost"
                   color="secondary"
@@ -138,9 +139,9 @@ export function Inner() {
 
       <Prompt.Basic
         control={trendingPrompt}
-        title={_(msg`Hide trending topics?`)}
-        description={_(msg`You can update this later from your settings.`)}
-        confirmButtonCta={_(msg`Hide`)}
+        title={l`Hide trending topics?`}
+        description={l`You can update this later from your settings.`}
+        confirmButtonCta={l`Hide`}
         onConfirm={onConfirmHide}
       />
     </View>

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -24,6 +24,7 @@ import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
 import {SubtleHover} from '#/components/SubtleHover'
+import {useTrendingTopicSeen} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import * as ModuleHeader from '../components/ModuleHeader'
@@ -71,6 +72,7 @@ function Inner() {
                 key={trend.link}
                 trend={trend}
                 rank={index + 1}
+                recId={trending.recId}
                 onPress={() => {
                   ax.metric('trendingTopic:click', {
                     context: 'explore',
@@ -98,11 +100,13 @@ function Inner() {
 export function TrendRow({
   trend,
   rank,
+  recId,
   children,
   onPress,
 }: ViewStyleProp & {
   trend: AppBskyUnspeccedDefs.TrendView
   rank: number
+  recId?: string
   children?: React.ReactNode
   onPress?: () => void
 }) {
@@ -112,6 +116,7 @@ export function TrendRow({
 
   const actors = useModerateTrendingActors(trend.actors)
   const formattedPostCount = formatCount(i18n, trend.postCount)
+  useTrendingTopicSeen('explore', recId)
 
   const description = useMemo(() => {
     if (!trend.description) return

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -94,6 +94,8 @@ function Inner() {
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}
+                  metricContext="sidebar"
+                  recId={trending.recId}
                   onPress={() => {
                     ax.metric('trendingTopic:click', {
                       context: 'sidebar',