[PE-6060] Migrate library collections to tan-query

packages/common/src/api/index.ts

@@ -1,6 +1,5 @@
 // Audius query
 // TODO: migrate all of these to tan-query
-export * from './library'
 export * from './suggestedTracks'
 export * from './trending'
 export * from './user'
@@ -20,6 +19,7 @@ export * from './tan-query/collection/useCollectionFavorites'
 export * from './tan-query/collection/useCollectionReposts'
 export * from './tan-query/collection/useCollectionTracksWithUid'
 export * from './tan-query/collection/useFeaturedPlaylists'
+export * from './tan-query/collection/useLibraryCollections'
 
 // Developer Apps
 export * from '../schemas/developerApps'
@@ -139,6 +139,7 @@ export * from './tan-query/wallets/useUSDCBalance'
 // Saga fetch utils, remove when migration is complete
 export * from './tan-query/saga-utils'
 export * from './tan-query/utils/defaultConfig'
+export * from './tan-query/utils'
 
 // New authorized-apps exports
 export * from './tan-query/authorized-apps/useAuthorizedApps'

packages/common/src/api/reducer.ts

@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux'
 
 import { favoritesApiReducer } from './favorites'
-import { libraryApiReducer } from './library'
 import { trendingApiReducer } from './trending'
 import { userApiReducer } from './user'
 
 export default combineReducers({
   favoritesApi: favoritesApiReducer,
-  libraryApi: libraryApiReducer,
   trendingApi: trendingApiReducer,
   userApi: userApiReducer
 })

packages/common/src/api/tan-query/collection/useLibraryCollections.ts

@@ -17,8 +17,6 @@ import { QueryKey, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
 import { primeCollectionData } from '../utils/primeCollectionData'
 
-import { useCollections } from './useCollections'
-
 const PAGE_SIZE = 20
 
 type UseLibraryCollectionsArgs = {
@@ -68,7 +66,7 @@ export const useLibraryCollections = (
   const queryClient = useQueryClient()
   const dispatch = useDispatch()
 
-  const { data: collectionIds } = useInfiniteQuery({
+  return useInfiniteQuery({
     queryKey: getLibraryCollectionsQueryKey({
       currentUserId,
       collectionType,
@@ -118,6 +116,4 @@ export const useLibraryCollections = (
     gcTime: Infinity,
     enabled: options?.enabled !== false && !!currentUserId
   })
-
-  return useCollections(collectionIds)
 }

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

@@ -24,7 +24,7 @@ import { userTrackMetadataFromSDK } from '../../../adapters/track'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, QueryOptions, LineupData } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { loadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
 import { useLineupQuery } from './useLineupQuery'
@@ -147,7 +147,7 @@ export const useLibraryTracks = (
 
   return {
     ...lineupData,
-    loadNextPage: loadNextPage(queryData),
+    loadNextPage: makeLoadNextPage(queryData),
     pageSize
   }
 }

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

@@ -30,7 +30,7 @@ import { getPlaying } from '~/store/player/selectors'
 
 import { TQCollection, TQTrack } from '../models'
 import { LineupData } from '../types'
-import { loadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 
 type PartialQueryData<T> = Pick<
   UseInfiniteQueryResult<T>,
@@ -203,7 +203,7 @@ export const useLineupQuery = <T>({
     pageSize,
     // pass through specific queryData props
     //   this avoids spreading all queryData props which causes extra renders
-    loadNextPage: loadNextPage(queryData),
+    loadNextPage: makeLoadNextPage(queryData),
     loadCachedDataIntoLineup,
     data: lineupData,
     isInitialLoading: queryData.isInitialLoading,

packages/common/src/api/tan-query/purchases/usePurchases.ts

@@ -16,7 +16,7 @@ import { QUERY_KEYS } from '../queryKeys'
 import { useTracks } from '../tracks/useTracks'
 import { QueryKey, QueryOptions } from '../types'
 import { useUsers } from '../users/useUsers'
-import { loadNextPage } from '../utils'
+import { makeLoadNextPage } from '../utils'
 import { combineQueryStatuses } from '../utils/combineQueryResults'
 
 const PAGE_SIZE = 10
@@ -100,7 +100,7 @@ export const usePurchases = (
   const collectionsQueryResult = useCollections(collectionIdsToFetch)
 
   const loadNextPageCallback = useCallback(() => {
-    loadNextPage(queryResult)
+    makeLoadNextPage(queryResult)
   }, [queryResult])
 
   return {

packages/common/src/api/tan-query/purchases/useSales.ts

@@ -16,7 +16,7 @@ import { QUERY_KEYS } from '../queryKeys'
 import { useTracks } from '../tracks/useTracks'
 import { QueryKey, QueryOptions } from '../types'
 import { useUsers } from '../users/useUsers'
-import { loadNextPage } from '../utils'
+import { makeLoadNextPage } from '../utils'
 import { combineQueryStatuses } from '../utils/combineQueryResults'
 
 const PAGE_SIZE = 10
@@ -95,7 +95,7 @@ export const useSales = (args: GetSalesListArgs, options?: QueryOptions) => {
   const collectionsQueryResult = useCollections(collectionIdsToFetch)
 
   const loadNextPageCallback = useCallback(() => {
-    loadNextPage(queryResult)
+    makeLoadNextPage(queryResult)
   }, [queryResult])
 
   return {

packages/common/src/api/tan-query/purchases/useUSDCTransactions.ts

@@ -15,7 +15,7 @@ import { USDCTransactionDetails } from '~/models/USDCTransactions'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { loadNextPage } from '../utils'
+import { makeLoadNextPage } from '../utils'
 
 const DEFAULT_PAGE_SIZE = 50
 
@@ -125,7 +125,7 @@ export const useUSDCTransactions = (
   // @ts-ignore
   queryData.reset = reset
   const loadNextPageCallback = useCallback(
-    () => loadNextPage(queryData),
+    () => makeLoadNextPage(queryData),
     [queryData]
   )
   // @ts-ignore

packages/common/src/api/tan-query/search/useSearchResults.ts

@@ -32,7 +32,7 @@ import {
   QueryOptions,
   LineupData
 } from '../types'
-import { loadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeCollectionData } from '../utils/primeCollectionData'
 import { primeTrackData } from '../utils/primeTrackData'
 import { primeUserData } from '../utils/primeUserData'
@@ -417,7 +417,7 @@ export const useSearchUserResults = (
   const queryDataWithLoadNextPage = queryData as typeof queryData & {
     loadNextPage: () => void
   }
-  queryDataWithLoadNextPage.loadNextPage = loadNextPage(queryData)
+  queryDataWithLoadNextPage.loadNextPage = makeLoadNextPage(queryData)
 
   return queryDataWithLoadNextPage
 }
@@ -450,7 +450,7 @@ export const useSearchAlbumResults = (
   const queryDataWithLoadNextPage = queryData as typeof queryData & {
     loadNextPage: () => void
   }
-  queryDataWithLoadNextPage.loadNextPage = loadNextPage(queryData)
+  queryDataWithLoadNextPage.loadNextPage = makeLoadNextPage(queryData)
 
   return queryDataWithLoadNextPage
 }
@@ -483,7 +483,7 @@ export const useSearchPlaylistResults = (
   const queryDataWithLoadNextPage = queryData as typeof queryData & {
     loadNextPage: () => void
   }
-  queryDataWithLoadNextPage.loadNextPage = loadNextPage(queryData)
+  queryDataWithLoadNextPage.loadNextPage = makeLoadNextPage(queryData)
 
   return queryDataWithLoadNextPage
 }

packages/common/src/api/tan-query/types.ts

@@ -10,7 +10,7 @@ import {
 import { ID } from '~/models'
 
 import { UseLineupQueryData } from './lineups/useLineupQuery'
-import { loadNextPage } from './utils/infiniteQueryLoadNextPage'
+import { makeLoadNextPage } from './utils/infiniteQueryLoadNextPage'
 
 /**
  * Using DataTag allows tan-query to infer the data type stored at this key
@@ -43,7 +43,7 @@ export type LineupQueryData = UseLineupQueryData &
     | 'isPending'
     | 'isError'
   > & {
-    loadNextPage: ReturnType<typeof loadNextPage>
+    loadNextPage: ReturnType<typeof makeLoadNextPage>
     pageSize?: number
   }
 

packages/common/src/api/tan-query/utils/index.ts

@@ -1,5 +1,5 @@
 export { combineQueryResults } from './combineQueryResults'
-export { loadNextPage } from './infiniteQueryLoadNextPage'
+export { makeLoadNextPage } from './infiniteQueryLoadNextPage'
 export { handleStemUpdates } from './handleStemUpdates'
 export { parsePurchase } from './parsePurchase'
 export { primeCollectionData } from './primeCollectionData'

packages/common/src/api/tan-query/utils/infiniteQueryLoadNextPage.ts

@@ -8,7 +8,7 @@ import { UseInfiniteQueryResult } from '@tanstack/react-query'
  * @param queryData
  * @returns
  */
-export const loadNextPage =
+export const makeLoadNextPage =
   (
     queryData: Pick<
       UseInfiniteQueryResult,

packages/mobile/src/screens/favorites-screen/AlbumsTab.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react'
 
-import { statusIsNotFinalized } from '@audius/common/models'
 import type { CommonState } from '@audius/common/store'
 import {
   savedPageSelectors,
@@ -18,7 +17,7 @@ import { FilterInput } from 'app/components/filter-input'
 import { LoadingMoreSpinner } from './LoadingMoreSpinner'
 import { NoTracksPlaceholder } from './NoTracksPlaceholder'
 import { OfflineContentBanner } from './OfflineContentBanner'
-import { useCollectionsScreenData } from './useCollectionsScreenData'
+import { useLibraryCollections } from './useLibraryCollections'
 
 const { getCategory } = savedPageSelectors
 const { getIsReachable } = reachabilitySelectors
@@ -34,18 +33,23 @@ const messages = {
 
 export const AlbumsTab = () => {
   const [filterValue, setFilterValue] = useState('')
-  const { collectionIds, hasMore, fetchMore, status } =
-    useCollectionsScreenData({
-      filterValue,
-      collectionType: 'albums'
-    })
+  const {
+    collectionIds,
+    hasNextPage,
+    loadNextPage,
+    isPending,
+    isFetchingNextPage
+  } = useLibraryCollections({
+    filterValue,
+    collectionType: 'albums'
+  })
   const isReachable = useSelector(getIsReachable)
 
   const handleEndReached = useCallback(() => {
-    if (isReachable && hasMore) {
-      fetchMore()
+    if (isReachable) {
+      loadNextPage()
     }
-  }, [isReachable, hasMore, fetchMore])
+  }, [isReachable, loadNextPage])
 
   const emptyTabText = useSelector((state: CommonState) => {
     const selectedCategory = getCategory(state, {
@@ -63,12 +67,11 @@ export const AlbumsTab = () => {
   })
 
   const loadingSpinner = <LoadingMoreSpinner />
+  const noItemsLoaded = !isPending && !collectionIds?.length && !filterValue
 
   return (
     <VirtualizedScrollView>
-      {!statusIsNotFinalized(status) &&
-      !collectionIds?.length &&
-      !filterValue ? (
+      {noItemsLoaded ? (
         !isReachable ? (
           <NoTracksPlaceholder />
         ) : (
@@ -90,7 +93,7 @@ export const AlbumsTab = () => {
             collectionIds={collectionIds}
             showCreateCollectionTile={!!isReachable}
             ListFooterComponent={
-              statusIsNotFinalized(status) && isReachable
+              isPending || (isFetchingNextPage && hasNextPage)
                 ? loadingSpinner
                 : null
             }