diff --git a/packages/common/src/services/remote-config/feature-flags.ts b/packages/common/src/services/remote-config/feature-flags.ts index afcc086ab38..f4d68156ac2 100644 --- a/packages/common/src/services/remote-config/feature-flags.ts +++ b/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, diff --git a/packages/mobile/src/screens/trending-screen/TrendingHeader.tsx b/packages/mobile/src/screens/trending-screen/TrendingHeader.tsx index 71f624b7557..b7c3d8c5682 100644 --- a/packages/mobile/src/screens/trending-screen/TrendingHeader.tsx +++ b/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 = { 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 || diff --git a/packages/mobile/src/screens/trending-screen/TrendingScreen.tsx b/packages/mobile/src/screens/trending-screen/TrendingScreen.tsx index 95f8cb96ffe..f104a66e8f9 100644 --- a/packages/mobile/src/screens/trending-screen/TrendingScreen.tsx +++ b/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(null) const [winnersSubFilter, setWinnersSubFilter] = useState< 'tracks' | 'underground' >('tracks') + useEffect(() => { + if (!isTrendingWinnersEnabled && category === 'winners') { + dispatch(setTrendingCategory('tracks')) + } + }, [category, dispatch, isTrendingWinnersEnabled]) + return ( ( - - {category === 'tracks' ? : null} + + {effectiveCategory === 'tracks' ? : null} )} > - + - {category === 'tracks' ? ( + {effectiveCategory === 'tracks' ? ( } /> - ) : category === 'underground' ? ( + ) : effectiveCategory === 'underground' ? (