diff --git a/src/analytics/metrics/types.ts b/src/analytics/metrics/types.ts index 6d7412aadc..bd268603a0 100644 --- a/src/analytics/metrics/types.ts +++ b/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 diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx index 4b045c6e3e..73f741046b 100644 --- a/src/components/TrendingTopics.tsx +++ b/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) { const topic = useTopic(raw) + useTrendingTopicSeen(metricContext, recId) return ( { + 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]) } diff --git a/src/components/interstitials/FeedTrendingTopics.tsx b/src/components/interstitials/FeedTrendingTopics.tsx index 1eded4b8de..ac68de94ea 100644 --- a/src/components/interstitials/FeedTrendingTopics.tsx +++ b/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 ( { ax.metric('trendingTopic:click', { context: 'interstitial', @@ -122,7 +123,7 @@ export function Inner() { ))}