Add trendingTopic:seen metric (#11309)

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