Pass recId with trending topic click metrics (#11232)

src/state/queries/trending/useGetTrendsQuery.ts

@@ -6,6 +6,7 @@ import {
   aggregateUserInterests,
   createBskyTopicsHeader,
 } from '#/lib/api/feed/utils'
+import {logger} from '#/logger'
 import {getContentLanguages} from '#/state/preferences/languages'
 import {STALE} from '#/state/queries'
 import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -13,24 +14,43 @@ import {useAgent} from '#/state/session'
 
 export const DEFAULT_LIMIT = 5
 
-export const createGetTrendsQueryKey = () => ['trends']
+type QueryProps = {
+  limit?: number
+  refetchOnWindowFocus?: boolean
+}
 
-export function useGetTrendsQuery() {
+function dedupe<T extends {link: string}>(trends: T[]): T[] {
+  const seen = new Set<string>()
+  return trends.filter(trend => {
+    if (seen.has(trend.link)) return false
+    seen.add(trend.link)
+    return true
+  })
+}
+
+export const createGetTrendsQueryKey = (props: QueryProps = {}) => [
+  'trends',
+  props.limit ?? DEFAULT_LIMIT,
+]
+
+export function useGetTrendsQuery(props: QueryProps = {}) {
   const agent = useAgent()
   const {data: preferences} = usePreferencesQuery()
+  const limit = props.limit ?? DEFAULT_LIMIT
   const mutedWords = useMemo(() => {
     return preferences?.moderationPrefs?.mutedWords || []
   }, [preferences?.moderationPrefs])
 
   return useQuery({
     enabled: !!preferences,
+    refetchOnWindowFocus: props.refetchOnWindowFocus,
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createGetTrendsQueryKey(),
+    queryKey: createGetTrendsQueryKey({limit}),
     queryFn: async () => {
       const contentLangs = getContentLanguages().join(',')
       const {data} = await agent.app.bsky.unspecced.getTrends(
         {
-          limit: DEFAULT_LIMIT,
+          limit,
         },
         {
           headers: {
@@ -39,17 +59,23 @@ export function useGetTrendsQuery() {
           },
         },
       )
+      if (!data.recIdStr) {
+        logger.debug('useGetTrendsQuery response missing recIdStr')
+      }
       return data
     },
     select: useCallback(
       (data: AppBskyUnspeccedGetTrends.OutputSchema) => {
         return {
-          trends: (data.trends ?? []).filter(t => {
-            return !hasMutedWord({
-              mutedWords,
-              text: t.topic + ' ' + t.displayName + ' ' + t.category,
-            })
-          }),
+          recId: data.recIdStr,
+          trends: dedupe(
+            (data.trends ?? []).filter(t => {
+              return !hasMutedWord({
+                mutedWords,
+                text: `${t.topic} ${t.displayName} ${t.category}`,
+              })
+            }),
+          ),
         }
       },
       [mutedWords],

src/state/queries/trending/useTrendingTopics.ts

@@ -1,74 +0,0 @@
-import {useCallback, useMemo} from 'react'
-import {type AppBskyUnspeccedDefs, hasMutedWord} from '@atproto/api'
-import {useQuery} from '@tanstack/react-query'
-
-import {STALE} from '#/state/queries'
-import {usePreferencesQuery} from '#/state/queries/preferences'
-import {useAgent} from '#/state/session'
-
-export type TrendingTopic = AppBskyUnspeccedDefs.TrendingTopic
-
-type Response = {
-  topics: TrendingTopic[]
-  suggested: TrendingTopic[]
-}
-
-export const DEFAULT_LIMIT = 14
-
-function dedup(topics: TrendingTopic[]): TrendingTopic[] {
-  const seen = new Set<string>()
-  return topics.filter(t => {
-    if (seen.has(t.link)) return false
-    seen.add(t.link)
-    return true
-  })
-}
-
-export const trendingTopicsQueryKey = ['trending-topics']
-
-export function useTrendingTopics() {
-  const agent = useAgent()
-  const {data: preferences} = usePreferencesQuery()
-  const mutedWords = useMemo(
-    () => preferences?.moderationPrefs?.mutedWords ?? [],
-    [preferences?.moderationPrefs?.mutedWords],
-  )
-
-  return useQuery<Response>({
-    refetchOnWindowFocus: true,
-    staleTime: STALE.MINUTES.THREE,
-    queryKey: trendingTopicsQueryKey,
-    async queryFn() {
-      const {data} = await agent.app.bsky.unspecced.getTrendingTopics({
-        limit: DEFAULT_LIMIT,
-      })
-      return {
-        topics: data.topics ?? [],
-        suggested: data.suggested ?? [],
-      }
-    },
-    select: useCallback(
-      (data: Response) => {
-        return {
-          topics: dedup(
-            data.topics.filter(t => {
-              return !hasMutedWord({
-                mutedWords,
-                text: `${t.topic} ${t.displayName ?? ''} ${t.description ?? ''}`,
-              })
-            }),
-          ),
-          suggested: dedup(
-            data.suggested.filter(t => {
-              return !hasMutedWord({
-                mutedWords,
-                text: `${t.topic} ${t.displayName ?? ''} ${t.description ?? ''}`,
-              })
-            }),
-          ),
-        }
-      },
-      [mutedWords],
-    ),
-  })
-}