Add mobile trending winners (#13732)

Author: raymondjacobson

packages/common/src/store/pages/trending/types.ts

@@ -2,7 +2,7 @@ import { Genre } from '~/utils'
 
 import { LineupState, TimeRange, Track } from '../../../models'
 
-export type TrendingCategory = 'tracks' | 'underground'
+export type TrendingCategory = 'tracks' | 'underground' | 'winners'
 
 export type TrendingPageState = {
   trendingWeek: LineupState<Track>

packages/common/src/store/ui/modals/parentSlice.ts

@@ -26,6 +26,7 @@ export const initialState: BasicModalsState = {
   TrendingGenreSelection: { isOpen: false },
   TrendingCategory: { isOpen: false },
   TrendingTimeRange: { isOpen: false },
+  TrendingFilter: { isOpen: false },
   TrendingRewardsExplainer: { isOpen: false },
   SocialProof: { isOpen: false },
   EditFolder: { isOpen: false },

packages/common/src/store/ui/modals/types.ts

@@ -61,6 +61,7 @@ export type Modals =
   | 'TrendingGenreSelection'
   | 'TrendingCategory'
   | 'TrendingTimeRange'
+  | 'TrendingFilter'
   | 'TrendingRewardsExplainer'
   | 'SocialProof'
   | 'EditFolder'

packages/harmony/src/assets/icons/Leading.svg

@@ -1329,7 +1329,7 @@ PODS:
     - React
     - react-native-google-cast/NoBluetoothArm (= 4.6.2)
   - react-native-google-cast/NoBluetoothArm (4.6.2):
-    - google-cast-sdk-dynamic-xcframework-no-bluetooth (= 4.7.1)
+    - google-cast-sdk-dynamic-xcframework-no-bluetooth
     - React
     - react-native-google-cast/RNGoogleCast
   - react-native-google-cast/RNGoogleCast (4.6.2):
@@ -2532,7 +2532,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 4f90a074d1eb269e32d5563c53b70d469180cece
   react-native-fast-crypto: b30594570dab23aca7e74e206b2c03e28a006216
   react-native-get-random-values: 384787fd76976f5aec9465aff6fa9e9129af1e74
-  react-native-google-cast: 0a82cf63114470403e41e04ffa2b13d6448b6112
+  react-native-google-cast: 18b9b2fc518caabfa65d309409e160b3fc6d1733
   react-native-image-picker: f104798044ef2c9211c42a48025d0693b5f34981
   react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
   react-native-keyboard-controller: 7c1271a9fe703b7ee588b75d6c486eda79e5081b

packages/mobile/ios/Podfile.lock

@@ -55,9 +55,8 @@ import { ConnectNewWalletDrawer } from 'app/screens/external-wallets/components/
 import { WelcomeDrawer } from 'app/screens/sign-on-screen/components/WelcomeDrawer'
 import { PickWinnersDrawer } from 'app/screens/track-screen/PickWinnersDrawer'
 import {
-  TrendingCategoryDrawer,
-  TrendingFilterDrawer,
-  TrendingTimeRangeDrawer
+  TrendingCombinedFilterDrawer,
+  TrendingFilterDrawer
 } from 'app/screens/trending-screen'
 import { WalletRowOverflowMenu } from 'app/screens/wallet-screen/components/LinkedWallets'
 
@@ -117,8 +116,7 @@ const commonDrawersMap: { [Modal in Modals]?: ComponentType } = {
   DeactivateAccountConfirmation: DeactivateAccountConfirmationDrawer,
   FeedFilter: FeedFilterDrawer,
   TrendingGenreSelection: TrendingFilterDrawer,
-  TrendingCategory: TrendingCategoryDrawer,
-  TrendingTimeRange: TrendingTimeRangeDrawer,
+  TrendingFilter: TrendingCombinedFilterDrawer,
   Overflow: OverflowMenuDrawer,
   SignOutConfirmation: SignOutConfirmationDrawer,
   AddToCollection: AddToCollectionDrawer,

packages/mobile/src/app/Drawers.tsx

@@ -26,7 +26,7 @@ export const ScreenSecondaryContent = (props: ScreenSecondaryContentProps) => {
   return isPrimaryContentReady ? (
     <Animated.View
       entering={Platform.OS === 'ios' ? FadeIn : undefined}
-      style={{ flex: 1 }}
+      style={{ flex: 1, minHeight: 0 }}
     >
       {children}
     </Animated.View>

packages/mobile/src/components/core/Screen/ScreenSecondaryContent.tsx

@@ -208,6 +208,10 @@ export type DrawerProps = {
    * Optional replacement component for the drawer header
    */
   drawerHeader?: ComponentType<{ onClose: () => void }>
+  /**
+   * Show back arrow instead of close X in the header. For nested drawers.
+   */
+  showBackButton?: boolean
 
   translationAnim?: Animated.Value
 }
@@ -278,6 +282,7 @@ export const Drawer: DrawerComponent = ({
   shouldHaveRoundedBordersAtInitialOffset = false,
   zIndex = 5,
   drawerHeader: CustomDrawerHeader,
+  showBackButton = false,
   drawerStyle,
   shouldShowShadow = true,
   shouldAnimateShadow,
@@ -705,6 +710,7 @@ export const Drawer: DrawerComponent = ({
             titleImage={titleImage}
             isFullscreen={isFullscreen}
             blockClose={blockClose}
+            showBackButton={showBackButton}
           />
         )}
         {children}

packages/mobile/src/components/drawer/Drawer.tsx

@@ -4,7 +4,7 @@ import type { ImageSourcePropType } from 'react-native'
 import { TouchableOpacity, View, Image } from 'react-native'
 
 import type { IconComponent } from '@audius/harmony-native'
-import { Flex, IconClose, spacing } from '@audius/harmony-native'
+import { Flex, IconCaretLeft, IconClose, spacing } from '@audius/harmony-native'
 import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { zIndex } from 'app/utils/zIndex'
@@ -15,6 +15,8 @@ type DrawerHeaderProps = {
   titleImage?: ImageSourcePropType
   isFullscreen?: boolean
   blockClose?: boolean
+  /** Use back arrow instead of close X. For nested drawers that navigate "back". */
+  showBackButton?: boolean
 }
 
 export const useStyles = makeStyles(({ spacing }) => ({
@@ -46,9 +48,11 @@ export const DrawerHeader = (props: DrawerHeaderProps) => {
     titleIcon: TitleIcon,
     titleImage,
     isFullscreen,
-    blockClose = false
+    blockClose = false,
+    showBackButton = false
   } = props
   const styles = useStyles()
+  const DismissIcon = showBackButton ? IconCaretLeft : IconClose
 
   return title || isFullscreen ? (
     <View style={styles.titleBarContainer}>
@@ -59,7 +63,7 @@ export const DrawerHeader = (props: DrawerHeaderProps) => {
           style={styles.dismissContainer}
           hitSlop={spacing.m}
         >
-          <IconClose size='m' color='subdued' />
+          <DismissIcon size='m' color='subdued' />
         </TouchableOpacity>
       ) : null}
       {title ? (

packages/mobile/src/components/drawer/DrawerHeader.tsx

@@ -15,6 +15,7 @@ export type IconComponent = FunctionComponent<IconProps>
 
 export { default as IconAlbum } from '@audius/harmony/src/assets/icons/Album.svg'
 export { default as IconFilter } from '@audius/harmony/src/assets/icons/Filter.svg'
+export { default as IconLeading } from '@audius/harmony/src/assets/icons/Leading.svg'
 export { default as IconSearch } from '@audius/harmony/src/assets/icons/Search.svg'
 export { default as IconAllTime } from '@audius/harmony/src/assets/icons/AllTime.svg'
 export { default as IconFolder } from '@audius/harmony/src/assets/icons/Folder.svg'