Fix now playing drawer navigation (#13832)

Author: dylanjeffers

packages/mobile/src/components/now-playing-drawer/TrackInfo.tsx

@@ -9,7 +9,7 @@ import { useSelector } from 'react-redux'
 
 import { LockedStatusBadge, Text } from 'app/components/core'
 import { useDrawer } from 'app/hooks/useDrawer'
-import { useNavigation } from 'app/hooks/useNavigation'
+import { useAppTabNavigation } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
 
@@ -51,7 +51,7 @@ export const TrackInfo = (props: TrackInfoProps) => {
   const styles = useStyles()
   const { hasStreamAccess } = useGatedContentAccess(track)
   const { onClose } = useDrawer('NowPlaying')
-  const navigation = useNavigation()
+  const navigation = useAppTabNavigation()
   const isPreviewing = useSelector(getPreviewing)
   const shouldShowPreviewLock =
     isPreviewing ||
@@ -60,8 +60,10 @@ export const TrackInfo = (props: TrackInfoProps) => {
       !hasStreamAccess)
 
   const handlePressArtist = useCallback(() => {
-    onClose()
-    navigation?.push('Profile', { id: user?.user_id })
+    if (user?.user_id) {
+      onClose()
+      navigation?.push('Profile', { id: user.user_id })
+    }
   }, [navigation, user?.user_id, onClose])
 
   if (!user || !track) return null

packages/mobile/src/screens/app-drawer-screen/index.ts

@@ -1,3 +1,2 @@
 export * from './AppDrawerScreen'
 export * from './AppDrawerContext'
-export * from './useAppDrawerNavigation'

packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/AccountDetails.tsx

@@ -6,9 +6,9 @@ import { TouchableOpacity } from 'react-native'
 import { Flex, Text } from '@audius/harmony-native'
 import { ProfilePicture } from 'app/components/core'
 import { UserLink } from 'app/components/user-link'
+import { useAppTabNavigation } from 'app/screens/app-screen'
 
 import { AppDrawerContext } from '../AppDrawerContext'
-import { useAppDrawerNavigation } from '../useAppDrawerNavigation'
 
 export const AccountDetails = () => {
   const { drawerHelpers } = useContext(AppDrawerContext)
@@ -20,7 +20,7 @@ export const AccountDetails = () => {
   })
   const { handle, user_id } = accountUser ?? {}
 
-  const navigation = useAppDrawerNavigation()
+  const navigation = useAppTabNavigation()
 
   const handlePressAccount = useCallback(() => {
     if (handle) {

packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx

@@ -8,11 +8,11 @@ import type { IconComponent } from '@audius/harmony-native'
 import type { TextProps } from 'app/components/core'
 import type { ContextualParams } from 'app/hooks/useNavigation'
 import type { AppTabScreenParamList } from 'app/screens/app-screen'
+import { useAppTabNavigation } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
 import { AppDrawerContext } from '../AppDrawerContext'
-import { useAppDrawerNavigation } from '../useAppDrawerNavigation'
 
 const useStyles = makeStyles(({ spacing, palette }) => ({
   accountListItem: {
@@ -61,7 +61,7 @@ export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
   } = props
   const styles = useStyles()
   const { neutral } = useThemeColors()
-  const navigation = useAppDrawerNavigation()
+  const navigation = useAppTabNavigation()
   const { drawerHelpers } = useContext(AppDrawerContext)
 
   const handlePress = useCallback(() => {

packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/VanityMetrics.tsx

@@ -10,11 +10,11 @@ import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useDispatch } from 'react-redux'
 
 import { Divider, Flex, Text } from '@audius/harmony-native'
+import { useAppTabNavigation } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 
 import { AppDrawerContext } from '../AppDrawerContext'
-import { useAppDrawerNavigation } from '../useAppDrawerNavigation'
 
 const { setFollowers } = followersUserListActions
 const { setFollowing } = followingUserListActions
@@ -77,7 +77,7 @@ export const VanityMetrics = () => {
   const { user_id, followee_count = 0, follower_count = 0 } = accountUser ?? {}
 
   const dispatch = useDispatch()
-  const navigation = useAppDrawerNavigation()
+  const navigation = useAppTabNavigation()
   const { drawerHelpers } = useContext(AppDrawerContext)
 
   const handlePressFollowing = useCallback(() => {

packages/mobile/src/screens/app-screen/index.ts

@@ -3,3 +3,4 @@ export * from './AppTabsScreen'
 export * from './AppTabScreen'
 export * from './TopBarIconButton'
 export * from './AppTabNavigationProvider'
+export * from './useAppTabNavigation'

…-drawer-screen/useAppDrawerNavigation.ts …creens/app-screen/useAppTabNavigation.tspackages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts renamed to packages/mobile/src/screens/app-screen/useAppTabNavigation.ts packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts renamed to packages/mobile/src/screens/app-screen/useAppTabNavigation.ts

@@ -2,9 +2,9 @@ import { useContext } from 'react'
 
 import { useNavigation } from 'app/hooks/useNavigation'
 
-import { AppTabNavigationContext } from '../app-screen'
+import { AppTabNavigationContext } from './AppTabNavigationProvider'
 
-export const useAppDrawerNavigation = () => {
+export const useAppTabNavigation = () => {
   const { navigation: contextNavigation } = useContext(AppTabNavigationContext)
   return useNavigation({ customNavigation: contextNavigation })
 }

packages/mobile/src/screens/chat-screen/ChatBlastCTA.tsx

@@ -17,7 +17,7 @@ import { KeyboardAvoidingView } from 'app/components/core'
 import { PLAY_BAR_HEIGHT } from 'app/components/now-playing-drawer/constants'
 import { make, track } from 'app/services/analytics'
 
-import { useAppDrawerNavigation } from '../app-drawer-screen'
+import { useAppTabNavigation } from '../app-screen'
 
 import { useKeyboardAvoidingPlaybarStyle } from './hooks/useKeyboardAvoidingPlaybarStyle'
 
@@ -33,7 +33,7 @@ const messages = {
 }
 
 export const ChatBlastCTA = () => {
-  const navigation = useAppDrawerNavigation()
+  const navigation = useAppTabNavigation()
   const keyboardAvoidingPlaybarStyle = useKeyboardAvoidingPlaybarStyle()
   const hasCurrentlyPlayingTrack = useSelector(getHasTrack)