[PE-6073] Migrate useTrackByTrackId to useTrack (#11950)

Author: DejayJD

packages/common/src/api/track.ts

@@ -124,7 +124,6 @@ const trackApi = createApi({
 })
 
 export const {
-  useGetTrackById,
   useGetTrackByPermalink,
   useGetTracksByIds,
   useGetUserTracksByHandle

packages/common/src/context/comments/commentsContext.tsx

@@ -14,22 +14,15 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
-  useGetTrackById,
   useTrackComments,
   QUERY_KEYS,
   useTrackCommentCount,
   resetPreviousCommentCount,
-  useSupporters
+  useSupporters,
+  useTrack
 } from '~/api'
 import { useGatedContentAccess } from '~/hooks'
-import {
-  ModalSource,
-  ID,
-  Comment,
-  ReplyComment,
-  UserTrackMetadata,
-  Name
-} from '~/models'
+import { ModalSource, ID, Comment, ReplyComment, Name, Track } from '~/models'
 import { LineupBaseActions, playerActions } from '~/store'
 import { getUserId } from '~/store/account/selectors'
 import { seek } from '~/store/player/slice'
@@ -74,7 +67,7 @@ type CommentSectionContextType<NavigationProp> = {
   artistId: ID
   isEntityOwner: boolean
   commentCount: number | undefined
-  track: UserTrackMetadata
+  track: Track
   playTrack: (timestampSeconds?: number) => void
   commentSectionLoading: boolean
   commentIds: ID[]
@@ -106,7 +99,7 @@ export function CommentSectionProvider<NavigationProp>(
     uid: lineupUid,
     lineupActions
   } = props
-  const { data: track } = useGetTrackById({ id: entityId })
+  const { data: track } = useTrack(entityId)
   const trackOwnerId = track?.owner_id
 
   // Prefetch the track owner's supporters

packages/common/src/hooks/chats/useChatBlastAudienceContent.ts

@@ -7,8 +7,8 @@ import {
   useGetCurrentUserId,
   useGetPlaylistById,
   useGetPurchasersCount,
-  useGetTrackById,
-  useRemixersCount
+  useRemixersCount,
+  useTrack
 } from '~/api'
 import {
   getChatBlastAudienceDescription,
@@ -30,12 +30,10 @@ export const useChatBlastAudienceContent = ({ chat }: { chat: ChatBlast }) => {
 
   const { data: currentUserId } = useGetCurrentUserId({})
   const { data: user } = useGetCurrentUser({})
-  const { data: track } = useGetTrackById(
-    {
-      id: decodedContentId!
-    },
-    { disabled: !decodedContentId || audienceContentType !== 'track' }
-  )
+  const { data: trackTitle } = useTrack(decodedContentId, {
+    enabled: !!decodedContentId && audienceContentType === 'track',
+    select: (track) => track.title
+  })
   const { data: album } = useGetPlaylistById(
     {
       playlistId: decodedContentId!
@@ -82,7 +80,7 @@ export const useChatBlastAudienceContent = ({ chat }: { chat: ChatBlast }) => {
 
   const contentTitle = audienceContentId
     ? audienceContentType === 'track'
-      ? track?.title
+      ? trackTitle
       : album?.playlist_name
     : undefined
 

packages/common/src/hooks/useTrackMetadata.ts

@@ -1,6 +1,7 @@
 import { Mood } from '@audius/sdk'
+import { pick } from 'lodash'
 
-import { useGetTrackById } from '~/api/track'
+import { useTrack } from '~/api/tan-query/useTrack'
 import { ID } from '~/models'
 import { parseMusicalKey } from '~/utils/musicalKeys'
 import { searchPage } from '~/utils/route'
@@ -33,9 +34,22 @@ export type TrackMetadataInfo = {
 export const useTrackMetadata = ({
   trackId
 }: TrackMetadataProps): TrackMetadataInfo[] => {
-  const { data: track } = useGetTrackById({ id: trackId })
+  const { data: trackMetadata } = useTrack(trackId, {
+    select: (track) =>
+      pick(track, [
+        'duration',
+        'genre',
+        'release_date',
+        'mood',
+        'is_unlisted',
+        'musical_key',
+        'bpm',
+        'is_custom_bpm',
+        'album_backlink'
+      ])
+  })
 
-  if (!track) return []
+  if (!trackMetadata) return []
 
   const {
     duration,
@@ -47,7 +61,7 @@ export const useTrackMetadata = ({
     bpm,
     is_custom_bpm: isCustomBpm,
     album_backlink
-  } = track
+  } = trackMetadata
 
   const parsedBpm = bpm
     ? parseFloat((bpm ?? 0).toFixed(isCustomBpm ? 2 : 0)).toString()

packages/common/src/utils/isLongFormContent.ts

@@ -1,6 +1,7 @@
 import { TrackMetadata } from '~/models'
 
-import { Maybe, Nullable } from './typeUtils'
+import { Maybe } from './typeUtils'
 
-export const isLongFormContent = (track: Maybe<Nullable<TrackMetadata>>) =>
-  track?.genre === 'podcast' || track?.genre === 'audiobook'
+export const isLongFormContent = (
+  track: Maybe<Pick<TrackMetadata, 'genre'> | null>
+) => track?.genre === 'podcast' || track?.genre === 'audiobook'

packages/mobile/src/components/composer-input/ComposerInput.tsx

@@ -8,7 +8,7 @@ import {
   useState
 } from 'react'
 
-import { useGetTrackById } from '@audius/common/api'
+import { useTrack } from '@audius/common/api'
 import { useAudiusLinkResolver } from '@audius/common/hooks'
 import type { ID, UserMetadata } from '@audius/common/models'
 import {
@@ -18,7 +18,7 @@ import {
   timestampRegex
 } from '@audius/common/utils'
 import { OptionalHashId } from '@audius/sdk'
-import { isEqual } from 'lodash'
+import { isEqual, pick } from 'lodash'
 import type { TextInput as RnTextInput } from 'react-native'
 import { Platform, TouchableOpacity } from 'react-native'
 import type {
@@ -133,7 +133,10 @@ export const ComposerInput = forwardRef(function ComposerInput(
   const latestValueRef = useRef(value)
   const messageIdRef = useRef(messageId)
   const lastKeyPressMsRef = useRef<number | null>(null)
-  const { data: track } = useGetTrackById({ id: entityId ?? -1 })
+  const { data: partialTrack } = useTrack(entityId, {
+    select: (track) =>
+      pick(track, ['duration', 'genre', 'release_date', 'access'])
+  })
 
   useEffect(() => {
     setUserMentions(
@@ -183,9 +186,9 @@ export const ComposerInput = forwardRef(function ComposerInput(
   const prevLinkEntities = usePrevious(linkEntities)
 
   const timestamps = useMemo(() => {
-    if (!track || !track.access.stream) return []
+    if (!partialTrack || !partialTrack.access.stream) return []
 
-    const { duration } = track
+    const { duration } = partialTrack
     return Array.from(value.matchAll(timestampRegex))
       .filter((match) => getDurationFromTimestampMatch(match) <= duration)
       .map((match) => ({
@@ -194,7 +197,7 @@ export const ComposerInput = forwardRef(function ComposerInput(
         index: match.index,
         link: ''
       }))
-  }, [track, value])
+  }, [partialTrack, value])
   const prevTimestamps = usePrevious(timestamps)
 
   useEffect(() => {

packages/mobile/src/components/premium-content-purchase-drawer/PremiumContentPurchaseDrawer.tsx

@@ -1,10 +1,10 @@
 import { useCallback, type ReactNode, useEffect } from 'react'
 
 import {
-  useGetCurrentUserId,
+  useCurrentUserId,
   useGetPlaylistById,
-  useGetTrackById,
-  useGetUserById
+  useGetUserById,
+  useTrack
 } from '@audius/common/api'
 import type { PurchaseableContentMetadata } from '@audius/common/hooks'
 import {
@@ -22,12 +22,7 @@ import {
   PURCHASE_METHOD_MINT_ADDRESS
 } from '@audius/common/hooks'
 import type { ID, USDCPurchaseConditions } from '@audius/common/models'
-import {
-  Name,
-  PurchaseMethod,
-  PurchaseVendor,
-  statusIsNotFinalized
-} from '@audius/common/models'
+import { Name, PurchaseMethod, PurchaseVendor } from '@audius/common/models'
 import { IntKeys, FeatureFlags } from '@audius/common/services'
 import {
   usePremiumContentPurchaseModal,
@@ -456,11 +451,8 @@ export const PremiumContentPurchaseDrawer = () => {
     onClosed
   } = usePremiumContentPurchaseModal()
   const isAlbum = contentType === PurchaseableContentType.ALBUM
-  const { data: currentUserId } = useGetCurrentUserId({})
-  const { data: track, status: trackStatus } = useGetTrackById(
-    { id: contentId },
-    { disabled: !contentId }
-  )
+  const { data: currentUserId } = useCurrentUserId()
+  const { data: track, isPending: isTrackPending } = useTrack(contentId)
   const { data: album } = useGetPlaylistById(
     { playlistId: contentId!, currentUserId },
     { disabled: !isAlbum || !contentId }
@@ -481,8 +473,6 @@ export const PremiumContentPurchaseDrawer = () => {
   const error = useSelector(getPurchaseContentError)
   const isUnlocking = !error && isContentPurchaseInProgress(stage)
 
-  const isLoading = statusIsNotFinalized(trackStatus)
-
   const isValidStreamGatedTrack = !!metadata && isStreamPurchaseable(metadata)
   const isValidDownloadGatedTrack =
     !!metadata && isTrackDownloadPurchaseable(metadata)
@@ -528,7 +518,7 @@ export const PremiumContentPurchaseDrawer = () => {
       isFullscreen
       dismissKeyboardOnOpen
     >
-      {isLoading ? (
+      {isTrackPending ? (
         <View style={styles.spinnerContainer}>
           <LoadingSpinner />
         </View>

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

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react'
 
-import { useGetPlaylistById, useGetTrackById } from '@audius/common/api'
+import { useGetPlaylistById, useTrack, useUser } from '@audius/common/api'
 import type { ID, UserMetadata } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
+import { pick } from 'lodash'
 
 import { Flex, Text } from '@audius/harmony-native'
 import { CollectionImage } from 'app/components/image/CollectionImage'
@@ -11,8 +12,8 @@ import UserBadges from 'app/components/user-badges'
 
 type ComposePreviewInfoProps = {
   title: string
-  name: string
-  user: UserMetadata
+  name?: string
+  user?: UserMetadata
   image?: ReactNode
 }
 
@@ -43,7 +44,7 @@ const ComposePreviewInfo = (props: ComposePreviewInfoProps) => {
           <Text variant='body' strength='strong'>
             {name}
           </Text>
-          <UserBadges hideName user={user} badgeSize={14} />
+          {user ? <UserBadges hideName user={user} badgeSize={14} /> : null}
         </Flex>
       </Flex>
     </Flex>
@@ -57,15 +58,18 @@ type ComposerTrackInfoProps = {
 export const ComposerTrackInfo = (props: ComposerTrackInfoProps) => {
   const { trackId } = props
 
-  const { data: track } = useGetTrackById({ id: trackId }, { force: true })
+  const { data: partialTrack } = useTrack(trackId, {
+    select: (track) => pick(track, ['title', 'owner_id'])
+  })
+  const { data: user } = useUser(partialTrack?.owner_id)
 
-  if (!track) return null
+  if (!partialTrack) return null
 
   return (
     <ComposePreviewInfo
-      title={track.title}
-      name={track.user.name}
-      user={track.user}
+      title={partialTrack.title}
+      name={user?.name ?? ''}
+      user={user}
       image={
         <TrackImage trackId={trackId} size={SquareSizes.SIZE_150_BY_150} />
       }

packages/mobile/src/screens/edit-track-screen/components/RemixTrackPill.tsx

@@ -1,6 +1,7 @@
-import { useGetTrackById } from '@audius/common/api'
+import { useTrack } from '@audius/common/api'
 import type { ID } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
+import { pick } from 'lodash'
 import type { StyleProp, ViewStyle } from 'react-native'
 
 import { Flex, Paper, Text } from '@audius/harmony-native'
@@ -44,12 +45,14 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 
 export const RemixTrackPill = (props: RemixTrackPillProps) => {
   const { trackId, style } = props
-  const { data: track } = useGetTrackById({ id: trackId })
+  const { data: track } = useTrack(trackId, {
+    select: (track) => pick(track, ['title', 'owner_id'])
+  })
   const styles = useStyles()
 
   if (!track) return null
 
-  const { user, title } = track
+  const { title, owner_id } = track
 
   return (
     <Paper
@@ -76,7 +79,7 @@ export const RemixTrackPill = (props: RemixTrackPillProps) => {
       </Flex>
       <Flex row alignItems='center'>
         <Text color='subdued'>{messages.trackBy}</Text>
-        <UserLink userId={user.user_id} size='s' disabled />
+        <UserLink userId={owner_id} size='s' disabled />
       </Flex>
     </Paper>
   )

packages/mobile/src/screens/search-screen/SearchItem.tsx

@@ -1,11 +1,12 @@
 import {
   useGetPlaylistById,
-  useGetTrackById,
-  useGetUserById
+  useGetUserById,
+  useTrack
 } from '@audius/common/api'
 import { recentSearchMessages as messages } from '@audius/common/messages'
 import { Kind, SquareSizes, Status } from '@audius/common/models'
 import type { SearchItem as SearchItemType } from '@audius/common/store'
+import { pick } from 'lodash'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
 import type { IconComponent } from '@audius/harmony-native'
@@ -81,15 +82,17 @@ export const SearchItemSkeleton = () => (
 export const SearchItemTrack = (props: SearchItemProps) => {
   const { searchItem, onPress } = props
   const { id } = searchItem
-  const { data: track, status } = useGetTrackById({ id })
-  const { data: user } = useGetUserById({ id: track?.owner_id ?? 0 })
+  const { data: partialTrack, isPending: isTrackPending } = useTrack(id, {
+    select: (track) => pick(track, ['title', 'owner_id'])
+  })
+  const { data: user } = useGetUserById({ id: partialTrack?.owner_id ?? 0 })
   const { spacing } = useTheme()
   const navigation = useNavigation()
 
-  if (status === Status.LOADING) return <SearchItemSkeleton />
+  if (isTrackPending) return <SearchItemSkeleton />
 
-  if (!track) return null
-  const { title } = track
+  if (!partialTrack) return null
+  const { title } = partialTrack
 
   if (!user) return null