Pass recId with trending topic click metrics (#11232)

src/components/TrendingTopics.tsx

@@ -1,143 +1,20 @@
 import {useMemo} from 'react'
-import {View} from 'react-native'
-import {type AtUri} from '@atproto/api'
+import {type AppBskyUnspeccedDefs, type AtUri} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 // import {makeProfileLink} from '#/lib/routes/links'
 // import {feedUriToHref} from '#/lib/strings/url-helpers'
-// import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
-// import {CloseQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
-// import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {type TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
-import {atoms as a, native, useTheme, type ViewStyleProp} from '#/alf'
-import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
+import {native} from '#/alf'
 import {Link as InternalLink, type LinkProps} from '#/components/Link'
-import {Text} from '#/components/Typography'
-
-export function TrendingTopic({
-  topic: raw,
-  size,
-  style,
-  hovered,
-}: {
-  topic: TrendingTopic
-  size?: 'large' | 'small'
-  hovered?: boolean
-} & ViewStyleProp) {
-  const topic = useTopic(raw)
-
-  const isSmall = size === 'small'
-  const hasIcon = topic.type === 'starter-pack' && !isSmall
-  const iconSize = 20
-
-  return (
-    <View
-      style={[
-        a.flex_row,
-        a.align_center,
-        isSmall
-          ? [
-              {
-                paddingVertical: 2,
-                paddingHorizontal: 4,
-              },
-            ]
-          : [a.py_xs, a.px_sm],
-        hasIcon && {gap: 6},
-        style,
-      ]}>
-      {hasIcon && topic.type === 'starter-pack' && (
-        <StarterPackIcon
-          gradient="sky"
-          width={iconSize}
-          style={{marginLeft: -3, marginVertical: -1}}
-        />
-      )}
-
-      {/*
-        <View
-          style={[
-            a.align_center,
-            a.justify_center,
-            a.rounded_full,
-            a.overflow_hidden,
-            {
-              width: iconSize,
-              height: iconSize,
-            },
-          ]}>
-          {topic.type === 'tag' ? (
-            <Hashtag width={iconSize} />
-          ) : topic.type === 'topic' ? (
-            <Quote width={iconSize - 2} />
-          ) : topic.type === 'feed' ? (
-            <UserAvatar
-              type="user"
-              size={aviSize}
-              avatar=""
-            />
-          ) : (
-            <UserAvatar
-              type="user"
-              size={aviSize}
-              avatar=""
-            />
-          )}
-        </View>
-        */}
-
-      <Text
-        style={[
-          a.font_semi_bold,
-          a.leading_tight,
-          isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
-          hovered && {textDecorationLine: 'underline'},
-        ]}
-        numberOfLines={1}>
-        {topic.displayName}
-      </Text>
-    </View>
-  )
-}
-
-export function TrendingTopicSkeleton({
-  size = 'large',
-  index = 0,
-}: {
-  size?: 'large' | 'small'
-  index?: number
-}) {
-  const t = useTheme()
-  const isSmall = size === 'small'
-  return (
-    <View
-      style={[
-        a.rounded_full,
-        a.border,
-        t.atoms.border_contrast_medium,
-        t.atoms.bg_contrast_25,
-        isSmall
-          ? {
-              width: index % 2 === 0 ? 75 : 90,
-              height: 27,
-            }
-          : {
-              width: index % 2 === 0 ? 90 : 110,
-              height: 36,
-            },
-      ]}
-    />
-  )
-}
 
 export function TrendingTopicLink({
   topic: raw,
   children,
   ...rest
 }: {
-  topic: TrendingTopic
+  topic: AppBskyUnspeccedDefs.TrendView
 } & Omit<LinkProps, 'to' | 'label'>) {
   const topic = useTopic(raw)
 
@@ -168,7 +45,9 @@ type ParsedTrendingTopic =
       uri: AtUri
     }
 
-export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
+export function useTopic(
+  raw: AppBskyUnspeccedDefs.TrendView,
+): ParsedTrendingTopic {
   const {_} = useLingui()
   return useMemo(() => {
     const {topic: displayName, link} = raw

src/components/interstitials/Trending.tsx

@@ -7,7 +7,7 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
 import {useTrendingConfig} from '#/state/service-config'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
@@ -20,6 +20,8 @@ import {TrendingTopicLink} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 
+const TRENDING_LIMIT = 14
+
 export function TrendingInterstitial() {
   const {enabled} = useTrendingConfig()
   const {trendingDisabled} = useTrendingSettings()
@@ -33,8 +35,15 @@ export function Inner() {
   const gutters = useGutters([0, 'base', 0, 'base'])
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingDisabled} = useTrendingSettingsApi()
-  const {data: trending, error, isLoading} = useTrendingTopics()
-  const noTopics = !isLoading && !error && !trending?.topics?.length
+  const {
+    data: trending,
+    error,
+    isLoading,
+  } = useGetTrendsQuery({
+    limit: TRENDING_LIMIT,
+    refetchOnWindowFocus: true,
+  })
+  const noTopics = !isLoading && !error && !trending?.trends?.length
 
   const onConfirmHide = useCallback(() => {
     ax.metric('trendingTopics:hide', {context: 'interstitial'})
@@ -88,15 +97,16 @@ export function Inner() {
                   {' '}
                 </Text>
               </View>
-            ) : !trending?.topics ? null : (
+            ) : !trending?.trends ? null : (
               <>
-                {trending.topics.map(topic => (
+                {trending.trends.map(topic => (
                   <TrendingTopicLink
                     key={topic.link}
                     topic={topic}
                     onPress={() => {
                       ax.metric('trendingTopic:click', {
                         context: 'interstitial',
+                        recId: trending.recId,
                       })
                     }}>
                     <View style={[a.py_lg]}>