Pass recId with trending topic click metrics (#11232)

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -370,7 +370,7 @@ function SuggestedProfileCard({
   category: string | null
   onSeen: (did: string, position: number) => void
   recSource?: 'Search'
-  recId?: number | string
+  recId?: string
 }) {
   const t = useTheme()
   const ax = useAnalytics()

src/screens/Search/Explore.tsx

@@ -48,7 +48,6 @@ import {
   StarterPackCardSkeleton,
 } from '#/screens/Search/components/StarterPackCard'
 import {ExploreInterestsCard} from '#/screens/Search/modules/ExploreInterestsCard'
-import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
 import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
 import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
 import {atoms as a, native, platform, useTheme} from '#/alf'
@@ -154,10 +153,6 @@ type ExploreScreenItems =
       type: 'trendingVideos'
       key: string
     }
-  | {
-      type: 'recommendations'
-      key: string
-    }
   | {
       type: 'profile'
       key: string
@@ -807,9 +802,6 @@ export function Explore({
         case 'trendingVideos': {
           return <ExploreTrendingVideos />
         }
-        case 'recommendations': {
-          return <ExploreRecommendations />
-        }
         case 'profile': {
           return (
             <SuggestedProfileCard

src/screens/Search/modules/ExploreRecommendations.tsx

@@ -1,120 +0,0 @@
-import {View} from 'react-native'
-import {type AppBskyUnspeccedDefs} from '@atproto/api'
-import {Trans} from '@lingui/react/macro'
-
-import {
-  DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
-  useTrendingTopics,
-} from '#/state/queries/trending/useTrendingTopics'
-import {useTrendingConfig} from '#/state/service-config'
-import {atoms as a, useGutters, useTheme} from '#/alf'
-import {Hashtag_Stroke2_Corner0_Rounded} from '#/components/icons/Hashtag'
-import {
-  TrendingTopic,
-  TrendingTopicLink,
-  TrendingTopicSkeleton,
-} from '#/components/TrendingTopics'
-import {Text} from '#/components/Typography'
-import {useAnalytics} from '#/analytics'
-import {IS_WEB} from '#/env'
-
-// Note: This module is not currently used and may be removed in the future.
-
-export function ExploreRecommendations() {
-  const {enabled} = useTrendingConfig()
-  return enabled ? <Inner /> : null
-}
-
-function Inner() {
-  const t = useTheme()
-  const ax = useAnalytics()
-  const gutters = useGutters([0, 'compact'])
-  const {data: trending, error, isLoading} = useTrendingTopics()
-  const noRecs = !isLoading && !error && !trending?.suggested?.length
-  const allFeeds = trending?.suggested && isAllFeeds(trending.suggested)
-
-  return error || noRecs ? null : (
-    <>
-      <View
-        style={[
-          a.flex_row,
-          IS_WEB
-            ? [a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
-            : [a.p_lg, a.pt_2xl, a.gap_md],
-          a.border_b,
-          t.atoms.border_contrast_low,
-        ]}>
-        <View style={[a.flex_1, a.gap_sm]}>
-          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-            <Hashtag_Stroke2_Corner0_Rounded
-              size="lg"
-              fill={t.palette.primary_500}
-              style={{marginLeft: -2}}
-            />
-            <Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>
-              <Trans>Recommended</Trans>
-            </Text>
-          </View>
-          {!allFeeds ? (
-            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
-              <Trans>
-                Content from across the network we think you might like.
-              </Trans>
-            </Text>
-          ) : (
-            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
-              <Trans>Feeds we think you might like.</Trans>
-            </Text>
-          )}
-        </View>
-      </View>
-
-      <View style={[a.pt_md, a.pb_lg]}>
-        <View
-          style={[
-            a.flex_row,
-            a.justify_start,
-            a.flex_wrap,
-            {rowGap: 8, columnGap: 6},
-            gutters,
-          ]}>
-          {isLoading ? (
-            Array(RECOMMENDATIONS_COUNT)
-              .fill(0)
-              .map((_, i) => <TrendingTopicSkeleton key={i} index={i} />)
-          ) : !trending?.suggested ? null : (
-            <>
-              {trending.suggested.map(topic => (
-                <TrendingTopicLink
-                  key={topic.link}
-                  topic={topic}
-                  onPress={() => {
-                    ax.metric('recommendedTopic:click', {context: 'explore'})
-                  }}>
-                  {({hovered}) => (
-                    <TrendingTopic
-                      topic={topic}
-                      style={[
-                        hovered && [
-                          t.atoms.border_contrast_high,
-                          t.atoms.bg_contrast_25,
-                        ],
-                      ]}
-                    />
-                  )}
-                </TrendingTopicLink>
-              ))}
-            </>
-          )}
-        </View>
-      </View>
-    </>
-  )
-}
-
-function isAllFeeds(topics: AppBskyUnspeccedDefs.TrendingTopic[]) {
-  return topics.every(topic => {
-    const segments = topic.link.split('/').slice(1)
-    return segments[0] === 'profile' && segments[2] === 'feed'
-  })
-}

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -45,7 +45,10 @@ function Inner() {
           trend={trend}
           rank={index + 1}
           onPress={() => {
-            ax.metric('trendingTopic:click', {context: 'explore'})
+            ax.metric('trendingTopic:click', {
+              context: 'explore',
+              recId: trending.recId,
+            })
           }}
         />
       ))}