Get number of trending topics for Explore from GrowthBook (#11324)

src/analytics/features/types.ts

@@ -25,6 +25,7 @@ export enum Features {
 
   // values
   TrendingDiscoverValues = 'trending_discover:values',
+  TrendingExploreTopicsCountValue = 'trending_explore_topics_count:value',
 
   AATest = 'aa-test',
 }

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -13,7 +13,10 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
+import {
+  DEFAULT_LIMIT,
+  useGetTrendsQuery,
+} from '#/state/queries/trending/useGetTrendsQuery'
 import {useTrendingConfig} from '#/state/service-config'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {formatCount} from '#/view/com/util/numeric/format'
@@ -29,8 +32,6 @@ import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import * as ModuleHeader from '../components/ModuleHeader'
 
-const TOPIC_COUNT = 5
-
 const IMAGE_SIZE = 56
 
 export function ExploreTrendingTopics() {
@@ -42,9 +43,20 @@ export function ExploreTrendingTopics() {
 function Inner() {
   const ax = useAnalytics()
   const {t: l} = useLingui()
+
+  const topicCount = ax.features.getValue(
+    ax.features.TrendingExploreTopicsCountValue,
+    DEFAULT_LIMIT,
+  )
+
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingDisabled} = useTrendingSettingsApi()
-  const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery()
+  const {
+    data: trending,
+    error,
+    isLoading,
+    isRefetching,
+  } = useGetTrendsQuery({limit: topicCount})
   const noTopics = !isLoading && !error && !trending?.trends?.length
   const showLoading = isLoading || isRefetching
 
@@ -64,7 +76,7 @@ function Inner() {
           />
         </ModuleHeader.Container>
         {showLoading
-          ? Array.from({length: TOPIC_COUNT}).map((__, i) => (
+          ? Array.from({length: topicCount}).map((__, i) => (
               <TrendingTopicRowSkeleton key={i} />
             ))
           : trending?.trends.map((trend, index) => (
@@ -143,7 +155,6 @@ export function TrendRow({
               style={[
                 a.text_md,
                 a.font_medium,
-
                 t.atoms.text_contrast_low,
                 {
                   fontVariant: ['tabular-nums'],

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -5,19 +5,21 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
+import {
+  DEFAULT_LIMIT,
+  useGetTrendsQuery,
+} from '#/state/queries/trending/useGetTrendsQuery'
 import {useTrendingConfig} from '#/state/service-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
+import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {TrendingTopicLink} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 
-const TRENDING_LIMIT = 5
-
 export function SidebarTrendingTopics() {
   const {enabled} = useTrendingConfig()
   const {trendingDisabled} = useTrendingSettings()
@@ -28,6 +30,12 @@ function Inner() {
   const t = useTheme()
   const {t: l} = useLingui()
   const ax = useAnalytics()
+
+  const exploreTopicCount = ax.features.getValue(
+    ax.features.TrendingExploreTopicsCountValue,
+    DEFAULT_LIMIT,
+  )
+
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingDisabled} = useTrendingSettingsApi()
   const {
@@ -35,6 +43,7 @@ function Inner() {
     error,
     isLoading,
   } = useGetTrendsQuery({
+    limit: DEFAULT_LIMIT,
     refetchOnWindowFocus: true,
   })
   const noTopics = !isLoading && !error && !trending?.trends?.length
@@ -53,6 +62,26 @@ function Inner() {
           <Text style={[a.flex_1, a.text_md, a.font_semi_bold]}>
             <Trans>Trending</Trans>
           </Text>
+          {exploreTopicCount > DEFAULT_LIMIT ? (
+            <Link label={l`See more trending topics`} to="/search">
+              {({hovered, pressed}) => (
+                <Text
+                  style={[
+                    a.text_sm,
+                    a.font_medium,
+                    {
+                      color:
+                        hovered || pressed
+                          ? t.palette.contrast_800
+                          : t.palette.contrast_500,
+                    },
+                  ]}
+                  numberOfLines={1}>
+                  <Trans>See more</Trans>
+                </Text>
+              )}
+            </Link>
+          ) : null}
           <Button
             variant="ghost"
             size="tiny"
@@ -67,7 +96,7 @@ function Inner() {
 
         <View style={[a.gap_xs]}>
           {isLoading ? (
-            Array(TRENDING_LIMIT)
+            Array(DEFAULT_LIMIT)
               .fill(0)
               .map((_n, i) => (
                 <View key={i} style={[a.flex_row, a.align_center, a.gap_sm]}>
@@ -90,7 +119,7 @@ function Inner() {
               ))
           ) : !trending?.trends ? null : (
             <>
-              {trending.trends.slice(0, TRENDING_LIMIT).map((topic, i) => (
+              {trending.trends.slice(0, DEFAULT_LIMIT).map((topic, i) => (
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}