Drop legacy lineup system: tanquery-first + new playback slice across all pages

.claude/launch.json

@@ -0,0 +1,17 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "web-stage",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "web:stage"],
+      "port": 3003
+    },
+    {
+      "name": "web-prod",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "web:prod"],
+      "port": 3002
+    }
+  ]
+}

packages/common/src/api/index.ts

@@ -46,7 +46,6 @@ export * from './tan-query/lineups/useTrending'
 export * from './tan-query/lineups/useTrendingUnderground'
 export * from './tan-query/lineups/useTrendingWinners'
 export * from './tan-query/lineups/useTrackPageLineup'
-export * from './tan-query/lineups/useLineupQuery'
 
 // Notifications
 export * from './tan-query/notifications/useMarkNotificationsAsViewed'

packages/common/src/api/tan-query/lineups/useExclusiveTracks.ts

@@ -5,24 +5,17 @@ import {
   useQuery,
   useQueryClient
 } from '@tanstack/react-query'
-import { useDispatch } from 'react-redux'
 
 import { transformAndCleanList, userTrackMetadataFromSDK } from '~/adapters'
 import { useQueryContext } from '~/api/tan-query/utils'
-import { PlaybackSource } from '~/models/Analytics'
 import { ID } from '~/models/Identifiers'
-import {
-  exclusiveTracksPageSelectors,
-  exclusiveTracksPageLineupActions
-} from '~/store/pages'
 
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, LineupData, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
+import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
-import { useLineupQuery } from './useLineupQuery'
-
 const DEFAULT_PAGE_SIZE = 10
 
 type GateCondition = 'ungated' | 'usdc_purchase' | 'follow' | 'token'
@@ -49,22 +42,22 @@ export const useExclusiveTracks = (
   {
     userId,
     gateConditions = ['token'],
-    pageSize = DEFAULT_PAGE_SIZE,
-    initialPageSize
+    pageSize = DEFAULT_PAGE_SIZE
   }: UseExclusiveTracksArgs,
   options?: QueryOptions
 ) => {
   const { audiusSdk } = useQueryContext()
   const { data: currentUserId } = useCurrentUserId()
   const queryClient = useQueryClient()
-  const dispatch = useDispatch()
-
-  const queryData = useInfiniteQuery({
-    queryKey: getExclusiveTracksQueryKey({
-      userId,
-      gateConditions,
-      pageSize
-    }),
+
+  const queryKey = getExclusiveTracksQueryKey({
+    userId,
+    gateConditions,
+    pageSize
+  })
+
+  const query = useInfiniteQuery({
+    queryKey,
     initialPageParam: 0,
     getNextPageParam: (lastPage: LineupData[], allPages) => {
       if (lastPage.length < pageSize) return undefined
@@ -86,16 +79,6 @@ export const useExclusiveTracks = (
       )
       primeTrackData({ tracks: processedTracks, queryClient })
 
-      // Update lineup when new data arrives
-      dispatch(
-        exclusiveTracksPageLineupActions.fetchLineupMetadatas(
-          pageParam,
-          pageSize,
-          false,
-          { items: processedTracks }
-        )
-      )
-
       return processedTracks.map((t) => ({
         id: t.track_id,
         type: EntityType.TRACK
@@ -106,20 +89,30 @@ export const useExclusiveTracks = (
     enabled: options?.enabled !== false && !!userId
   })
 
-  return useLineupQuery({
-    lineupData: queryData.data ?? [],
-    queryData,
-    queryKey: getExclusiveTracksQueryKey({
-      userId,
-      gateConditions,
-      pageSize
-    }),
-    lineupActions: exclusiveTracksPageLineupActions,
-    lineupSelector: exclusiveTracksPageSelectors.getLineup,
-    playbackSource: PlaybackSource.EXCLUSIVE_TRACKS_PAGE,
-    pageSize,
-    initialPageSize
-  })
+  const data = query.data ?? []
+  const trackIds = data
+    .filter((d) => d.type === EntityType.TRACK)
+    .map((d) => d.id as ID)
+
+  return {
+    // Raw data
+    data,
+    trackIds,
+
+    // Query state
+    isPending: query.isPending,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isSuccess: query.isSuccess,
+    isError: query.isError,
+    isInitialLoading: query.isInitialLoading,
+    hasNextPage: query.hasNextPage,
+    fetchNextPage: query.fetchNextPage,
+    loadNextPage: makeLoadNextPage(query),
+
+    // Identity
+    queryKey
+  }
 }
 
 // Hook to get the count of exclusive tracks

packages/common/src/api/tan-query/lineups/useFeed.ts

@@ -1,35 +1,31 @@
 import { EntityType, Id, type GetUserFeedFilterEnum } from '@audius/sdk'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
-import { useDispatch } from 'react-redux'
 
 import { transformAndCleanList, userFeedItemFromSDK } from '~/adapters'
 import { useQueryContext } from '~/api/tan-query/utils'
 import {
   FeedFilter,
   UserCollectionMetadata,
   ID,
-  UserTrackMetadata,
-  PlaybackSource
+  UserTrackMetadata
 } from '~/models'
-import { feedPageSelectors, feedPageLineupActions } from '~/store/pages'
 import { Nullable } from '~/utils/typeUtils'
 
 import { QUERY_KEYS } from '../queryKeys'
 import { LineupData, QueryKey, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
+import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeCollectionData } from '../utils/primeCollectionData'
 import { primeTrackData } from '../utils/primeTrackData'
 
-import { useLineupQuery } from './useLineupQuery'
-
 const filterMap: { [k in FeedFilter]: GetUserFeedFilterEnum } = {
   [FeedFilter.ALL]: 'all',
   [FeedFilter.ORIGINAL]: 'original',
   [FeedFilter.REPOST]: 'repost'
 }
 
 type FeedArgs = {
-  userId: Nullable<ID> | undefined
+  userId?: Nullable<ID> | undefined
   filter?: FeedFilter
   initialPageSize?: number
   loadMorePageSize?: number
@@ -55,17 +51,18 @@ export const useFeed = (
   const { data: currentUserId } = useCurrentUserId()
   const { audiusSdk } = useQueryContext()
   const queryClient = useQueryClient()
-  const dispatch = useDispatch()
 
-  const queryData = useInfiniteQuery({
+  const queryKey = getFeedQueryKey({ userId: currentUserId, filter })
+
+  const query = useInfiniteQuery({
     initialPageParam: 0,
     getNextPageParam: (lastPage: LineupData[], allPages) => {
       const isFirstPage = allPages.length === 1
       const currentPageSize = isFirstPage ? initialPageSize : loadMorePageSize
       if (lastPage.length < currentPageSize) return undefined
       return allPages.reduce((total, page) => total + page.length, 0)
     },
-    queryKey: getFeedQueryKey({ userId: currentUserId, filter }),
+    queryKey,
     queryFn: async ({ pageParam }) => {
       const isFirstPage = pageParam === 0
       const currentPageSize = isFirstPage ? initialPageSize : loadMorePageSize
@@ -103,16 +100,6 @@ export const useFeed = (
       primeTrackData({ tracks, queryClient })
       primeCollectionData({ collections, queryClient })
 
-      // Pass the data to lineup sagas
-      dispatch(
-        feedPageLineupActions.fetchLineupMetadatas(
-          pageParam,
-          currentPageSize,
-          false,
-          { items: feed }
-        )
-      )
-
       return feed.map((item) =>
         'track_id' in item
           ? { id: item.track_id, type: EntityType.TRACK }
@@ -124,17 +111,24 @@ export const useFeed = (
     enabled: currentUserId !== null
   })
 
-  return useLineupQuery({
-    lineupData: queryData.data ?? [],
-    queryData,
-    queryKey: getFeedQueryKey({
-      userId: currentUserId,
-      filter
-    }),
-    lineupActions: feedPageLineupActions,
-    lineupSelector: feedPageSelectors.getDiscoverFeedLineup,
-    playbackSource: PlaybackSource.TRACK_TILE_LINEUP,
-    pageSize: loadMorePageSize,
-    initialPageSize
-  })
+  const data = query.data ?? []
+  const trackIds = data
+    .filter((d) => d.type === EntityType.TRACK)
+    .map((d) => d.id as ID)
+
+  return {
+    data,
+    trackIds,
+    isPending: query.isPending,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isSuccess: query.isSuccess,
+    isError: query.isError,
+    isInitialLoading: query.isInitialLoading,
+    hasNextPage: query.hasNextPage,
+    fetchNextPage: query.fetchNextPage,
+    loadNextPage: makeLoadNextPage(query),
+    refetch: query.refetch,
+    queryKey
+  }
 }

packages/common/src/api/tan-query/lineups/useLibraryTracks.ts

@@ -9,16 +9,10 @@ import {
   useInfiniteQuery,
   useQueryClient
 } from '@tanstack/react-query'
-import { useDispatch } from 'react-redux'
 
 import { useQueryContext } from '~/api/tan-query/utils'
-import { PlaybackSource } from '~/models/Analytics'
 import { ID } from '~/models/Identifiers'
-import {
-  libraryPageTracksLineupActions,
-  libraryPageSelectors,
-  LibraryCategoryType
-} from '~/store/pages'
+import { LibraryCategoryType } from '~/store/pages'
 import { removeNullable } from '~/utils'
 
 import { userTrackMetadataFromSDK } from '../../../adapters/track'
@@ -28,8 +22,6 @@ import { useCurrentUserId } from '../users/account/useCurrentUserId'
 import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
-import { useLineupQuery } from './useLineupQuery'
-
 const DEFAULT_PAGE_SIZE = 5
 
 export type UseLibraryTracksArgs = {
@@ -73,17 +65,18 @@ export const useLibraryTracks = (
   const { data: currentUserId } = useCurrentUserId()
   const { audiusSdk } = useQueryContext()
   const queryClient = useQueryClient()
-  const dispatch = useDispatch()
+
+  const queryKey = getLibraryTracksQueryKey({
+    currentUserId,
+    category,
+    sortMethod,
+    sortDirection,
+    query,
+    pageSize
+  })
 
   const queryData = useInfiniteQuery({
-    queryKey: getLibraryTracksQueryKey({
-      currentUserId,
-      category,
-      sortMethod,
-      sortDirection,
-      query,
-      pageSize
-    }),
+    queryKey,
     queryFn: async ({ pageParam = 0 }) => {
       if (!currentUserId) return []
       const sdk = await audiusSdk()
@@ -104,16 +97,6 @@ export const useLibraryTracks = (
 
       primeTrackData({ tracks, queryClient })
 
-      // Update lineup when new data arrives
-      dispatch(
-        libraryPageTracksLineupActions.fetchLineupMetadatas(
-          pageParam,
-          pageSize,
-          false,
-          { tracks }
-        )
-      )
-
       return tracks.map((t) => ({
         id: t.track_id,
         type: EntityType.TRACK
@@ -130,26 +113,24 @@ export const useLibraryTracks = (
     enabled: config?.enabled !== false && !!currentUserId
   })
 
-  const lineupData = useLineupQuery({
-    lineupData: queryData.data ?? [],
-    queryData,
-    queryKey: getLibraryTracksQueryKey({
-      currentUserId,
-      category,
-      sortMethod,
-      sortDirection,
-      query,
-      pageSize
-    }),
-    lineupActions: libraryPageTracksLineupActions,
-    lineupSelector: libraryPageSelectors.getLibraryTracksLineup,
-    playbackSource: PlaybackSource.TRACK_TILE,
-    pageSize
-  })
+  const data = queryData.data ?? []
+  const trackIds = data
+    .filter((d) => d.type === EntityType.TRACK)
+    .map((d) => d.id as ID)
 
   return {
-    ...lineupData,
+    data,
+    trackIds,
+    isPending: queryData.isPending,
+    isLoading: queryData.isLoading,
+    isFetching: queryData.isFetching,
+    isSuccess: queryData.isSuccess,
+    isError: queryData.isError,
+    isInitialLoading: queryData.isInitialLoading,
+    hasNextPage: queryData.hasNextPage,
+    fetchNextPage: queryData.fetchNextPage,
     loadNextPage: makeLoadNextPage(queryData),
+    queryKey,
     pageSize
   }
 }