Gate mobile Trending Winners tab behind feature flag

packages/common/src/services/remote-config/feature-flags.ts

@@ -5,6 +5,7 @@ export enum FeatureFlags {
   VERIFY_HANDLE_WITH_TIKTOK = 'verify_handle_with_tiktok',
   VERIFY_HANDLE_WITH_TWITTER = 'verify_handle_with_twitter',
   VERIFY_HANDLE_WITH_INSTAGRAM = 'verify_handle_with_instagram',
+  TRENDING_WINNERS = 'trending_winners',
   USDC_PURCHASES = 'usdc_purchases',
   FEATURE_FLAG_ACCESS = 'feature_flag_access',
   IOS_USDC_PURCHASE_ENABLED = 'ios_usdc_purchase_enabled',
@@ -35,6 +36,7 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.VERIFY_HANDLE_WITH_TIKTOK]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_TWITTER]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_INSTAGRAM]: false,
+  [FeatureFlags.TRENDING_WINNERS]: false,
   [FeatureFlags.USDC_PURCHASES]: true,
   [FeatureFlags.FEATURE_FLAG_ACCESS]: false,
   [FeatureFlags.IOS_USDC_PURCHASE_ENABLED]: true,

packages/mobile/src/screens/trending-screen/TrendingHeader.tsx

@@ -1,6 +1,8 @@
 import type { ComponentType } from 'react'
 
+import { useFeatureFlag } from '@audius/common/hooks'
 import { TimeRange } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import type { Modals, TrendingCategory } from '@audius/common/store'
 import {
   modalsActions,
@@ -36,7 +38,8 @@ const categoryLabels: Record<TrendingCategory, string> = {
   winners: 'Winners'
 }
 
-const categories: TrendingCategory[] = ['tracks', 'underground', 'winners']
+const baseCategories: TrendingCategory[] = ['tracks', 'underground']
+const categoriesWithWinners: TrendingCategory[] = [...baseCategories, 'winners']
 
 type TrendingHeaderProps = {
   title: string
@@ -101,9 +104,15 @@ export const TrendingHeader = (props: TrendingHeaderProps) => {
   const styles = useStyles()
   const { spacing } = useTheme()
   const dispatch = useDispatch()
+  const { isEnabled: isTrendingWinnersEnabled } = useFeatureFlag(
+    FeatureFlags.TRENDING_WINNERS
+  )
   const category = useSelector(getTrendingCategory) ?? 'tracks'
   const timeRange = useSelector(trendingPageSelectors.getTrendingTimeRange)
   const genre = useSelector(trendingPageSelectors.getTrendingGenre)
+  const categories = isTrendingWinnersEnabled
+    ? categoriesWithWinners
+    : baseCategories
 
   const hasActiveFilters =
     (timeRange ?? TimeRange.WEEK) !== TimeRange.WEEK ||

packages/mobile/src/screens/trending-screen/TrendingScreen.tsx

@@ -1,7 +1,9 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import { trendingPageSelectors } from '@audius/common/store'
-import { useSelector } from 'react-redux'
+import { useFeatureFlag } from '@audius/common/hooks'
+import { FeatureFlags } from '@audius/common/services'
+import { trendingPageActions, trendingPageSelectors } from '@audius/common/store'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { Flex, IconTrending } from '@audius/harmony-native'
 import { Screen, ScreenContent } from 'app/components/core'
@@ -19,6 +21,7 @@ import { TrendingUndergroundLineup } from './TrendingUndergroundLineup'
 import { TrendingWinnersView } from './TrendingWinnersView'
 
 const { getTrendingCategory } = trendingPageSelectors
+const { setTrendingCategory } = trendingPageActions
 
 const titleByCategory = {
   tracks: 'Trending Tracks',
@@ -28,37 +31,52 @@ const titleByCategory = {
 
 export const TrendingScreen = () => {
   useAppTabScreen()
+  const dispatch = useDispatch()
   const category = useSelector(getTrendingCategory) ?? 'tracks'
+  const { isEnabled: isTrendingWinnersEnabled } = useFeatureFlag(
+    FeatureFlags.TRENDING_WINNERS
+  )
+  const effectiveCategory =
+    !isTrendingWinnersEnabled && category === 'winners' ? 'tracks' : category
 
   const [winnersWeek, setWinnersWeek] = useState<string | null>(null)
   const [winnersSubFilter, setWinnersSubFilter] = useState<
     'tracks' | 'underground'
   >('tracks')
 
+  useEffect(() => {
+    if (!isTrendingWinnersEnabled && category === 'winners') {
+      dispatch(setTrendingCategory('tracks'))
+    }
+  }, [category, dispatch, isTrendingWinnersEnabled])
+
   return (
     <Screen
       url='Trending'
       header={() => (
-        <MobileRootHeader title={titleByCategory[category]} showDivider={false}>
-          {category === 'tracks' ? <TrendingFilterButton /> : null}
+        <MobileRootHeader
+          title={titleByCategory[effectiveCategory]}
+          showDivider={false}
+        >
+          {effectiveCategory === 'tracks' ? <TrendingFilterButton /> : null}
         </MobileRootHeader>
       )}
     >
-      <Flex flex={1} direction='column' style={{ minHeight: 0 }}>
+      <Flex flex={1} column style={{ minHeight: 0 }}>
         <ScreenPrimaryContent>
           <TrendingHeader
-            title={titleByCategory[category]}
+            title={titleByCategory[effectiveCategory]}
             icon={IconTrending}
             filterModal={TRENDING_FILTER_MODAL}
             showTitleRow={false}
           />
         </ScreenPrimaryContent>
         <ScreenContent>
-          {category === 'tracks' ? (
+          {effectiveCategory === 'tracks' ? (
             <ScreenSecondaryContent>
               <TrendingTracksLineup header={<TrendingFilterChips />} />
             </ScreenSecondaryContent>
-          ) : category === 'underground' ? (
+          ) : effectiveCategory === 'underground' ? (
             <ScreenSecondaryContent>
               <TrendingUndergroundLineup />
             </ScreenSecondaryContent>