Add trendingTopic:seen metric (#11309)

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>