Add request pagination for favorites for the new table (#1850)

packages/common/src/models/Kind.ts

@@ -2,5 +2,6 @@ export enum Kind {
   TRACKS = 'TRACKS',
   COLLECTIONS = 'COLLECTIONS',
   USERS = 'USERS',
-  TRACK_ROUTES = 'TRACK_ROUTES'
+  TRACK_ROUTES = 'TRACK_ROUTES',
+  EMPTY = 'EMPTY'
 }

packages/common/src/services/audius-api-client/AudiusAPIClient.ts

@@ -241,6 +241,9 @@ type GetProfileListArgs = {
   currentUserId: Nullable<ID>
   limit?: number
   offset?: number
+  query?: string
+  sortMethod?: string
+  sortDirection?: string
 }
 
 type GetTopArtistGenresArgs = {
@@ -994,15 +997,21 @@ export class AudiusAPIClient {
     profileUserId,
     currentUserId,
     limit,
-    offset
+    offset,
+    query,
+    sortMethod,
+    sortDirection
   }: GetProfileListArgs) {
     this._assertInitialized()
     const encodedUserId = encodeHashId(currentUserId)
     const encodedProfileUserId = this._encodeOrThrow(profileUserId)
     const params = {
       user_id: encodedUserId || undefined,
       limit,
-      offset
+      offset,
+      ...(query && { query }),
+      ...(sortMethod && { sort_method: sortMethod }),
+      ...(sortDirection && { sort_direction: sortDirection })
     }
 
     const response: Nullable<APIResponse<APIActivity[]>> =
@@ -1357,14 +1366,16 @@ export class AudiusAPIClient {
   async getUserTrackHistory({
     currentUserId,
     userId,
-    limit
+    offset = 0,
+    limit = 100
   }: GetUserTrackHistoryArgs) {
     const encodedUserId = this._encodeOrThrow(userId)
     const encodedCurrentUserId = encodeHashId(currentUserId)
-    limit = limit || 100
     this._assertInitialized()
     const params = {
-      user_id: encodedCurrentUserId || undefined
+      user_id: encodedCurrentUserId || undefined,
+      limit,
+      offset
     }
 
     const response: Nullable<APIResponse<APIActivity[]>> =

packages/common/src/store/lineup/selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 
+import { Kind } from 'models'
 import { getTracksByUid } from 'store/cache/tracks/selectors'
 import { getUsers } from 'store/cache/users/selectors'
 import { removeNullable } from 'utils/typeUtils'
@@ -39,15 +40,21 @@ export const makeGetTableMetadatas = <T, State>(
                 .map((repost) => ({ ...repost, user: users[repost.user_id] }))
                 .filter((repost) => !!repost.user)
             }
+          } else if (entry.kind === Kind.EMPTY) {
+            return { ...entry, owner_id: null }
           }
 
           deleted += 1
           return null
         })
         .filter(removeNullable)
         .map((entry) => {
-          if (entry.owner_id in users)
-            return { ...entry, user: users[entry.owner_id] }
+          const ownerId = entry.owner_id
+          if (ownerId && ownerId in users) {
+            return { ...entry, user: users[ownerId] }
+          } else if (entry.kind === Kind.EMPTY) {
+            return entry
+          }
           deleted += 1
           return null
         })

packages/common/src/store/pages/saved-page/actions.ts

@@ -1,14 +1,59 @@
 // @ts-nocheck
 // TODO(nkang) - convert to TS
 export const FETCH_SAVES = 'SAVED/FETCH_SAVES'
+export const FETCH_SAVES_REQUESTED = 'SAVED/FETCH_SAVES_REQUESTEd'
 export const FETCH_SAVES_SUCCEEDED = 'SAVED/FETCH_SAVES_SUCCEEDED'
 export const FETCH_SAVES_FAILED = 'SAVED/FETCH_SAVES_FAILED'
 
+export const FETCH_MORE_SAVES = 'SAVED/FETCH_MORE_SAVES'
+export const FETCH_MORE_SAVES_SUCCEEDED = 'SAVED/FETCH_MORE_SAVES_SUCCEEDED'
+export const FETCH_MORE_SAVES_FAILED = 'SAVED/FETCH_MORE_SAVES_FAILED'
+
 export const ADD_LOCAL_SAVE = 'SAVED/ADD_LOCAL_SAVE'
 export const REMOVE_LOCAL_SAVE = 'SAVED/REMOVE_LOCAL_SAVE'
 
-export const fetchSaves = () => ({
-  type: FETCH_SAVES
+export const fetchSaves = (
+  // the filter query for the "get tracks" query
+  query = '',
+  // the sort method for the "get tracks" query
+  sortMethod = '',
+  // the sort direction for the "get tracks" query
+  sortDirection = '',
+  // the offset into the "get tracks" query
+  offset = 0,
+  // the limit for the "get tracks" query
+  limit = 50
+) => ({
+  type: FETCH_SAVES,
+  offset,
+  limit,
+  query,
+  sortMethod,
+  sortDirection
+})
+
+export const fetchMoreSaves = (
+  // the filter query for the "get tracks" query
+  query = '',
+  // the sort method for the "get tracks" query
+  sortMethod = '',
+  // the sort direction for the "get tracks" query
+  sortDirection = '',
+  // the offset into the "get tracks" query
+  offset = 0,
+  // the limit for the "get tracks" query
+  limit = 50
+) => ({
+  type: FETCH_MORE_SAVES,
+  offset,
+  limit,
+  query,
+  sortMethod,
+  sortDirection
+})
+
+export const fetchSavesRequested = () => ({
+  type: FETCH_SAVES_REQUESTED
 })
 
 export const fetchSavesSucceeded = (saves) => ({
@@ -20,6 +65,16 @@ export const fetchSavesFailed = () => ({
   type: FETCH_SAVES_FAILED
 })
 
+export const fetchMoreSavesSucceeded = (saves, offset) => ({
+  type: FETCH_MORE_SAVES_SUCCEEDED,
+  saves,
+  offset
+})
+
+export const fetchMoreSavesFailed = () => ({
+  type: FETCH_MORE_SAVES_FAILED
+})
+
 export const addLocalSave = (trackId, uid) => ({
   type: ADD_LOCAL_SAVE,
   trackId,

packages/common/src/store/pages/saved-page/reducer.ts

@@ -2,8 +2,12 @@
 // TODO(nkang) - convert to TS
 import { asLineup } from 'store/lineup/reducer'
 import {
+  FETCH_SAVES,
+  FETCH_SAVES_REQUESTED,
   FETCH_SAVES_SUCCEEDED,
   FETCH_SAVES_FAILED,
+  FETCH_MORE_SAVES_SUCCEEDED,
+  FETCH_MORE_SAVES_FAILED,
   ADD_LOCAL_SAVE,
   REMOVE_LOCAL_SAVE
 } from 'store/pages/saved-page/actions'
@@ -14,14 +18,27 @@ import { PREFIX as tracksPrefix } from './lineups/tracks/actions'
 const initialState = {
   // id => uid
   localSaves: {},
-  saves: []
+  saves: [],
+  initialFetch: false
 }
 
 const actionsMap = {
+  [FETCH_SAVES](state, action) {
+    return {
+      ...state
+    }
+  },
+  [FETCH_SAVES_REQUESTED](state, action) {
+    return {
+      ...state,
+      initialFetch: true
+    }
+  },
   [FETCH_SAVES_SUCCEEDED](state, action) {
     return {
       ...state,
-      saves: action.saves
+      saves: action.saves,
+      initialFetch: false
     }
   },
   [FETCH_SAVES_FAILED](state, action) {
@@ -30,6 +47,18 @@ const actionsMap = {
       saves: []
     }
   },
+  [FETCH_MORE_SAVES_SUCCEEDED](state, action) {
+    const savesCopy = state.saves.slice()
+    savesCopy.splice(action.offset, action.saves.length, ...action.saves)
+
+    return {
+      ...state,
+      saves: savesCopy
+    }
+  },
+  [FETCH_MORE_SAVES_FAILED](state, action) {
+    return { ...state }
+  },
   [ADD_LOCAL_SAVE](state, action) {
     return {
       ...state,

packages/common/src/store/pages/saved-page/selectors.ts

@@ -8,6 +8,8 @@ export const getLocalSaves = (state: CommonState) =>
   state.pages.savedPage.localSaves
 export const getLocalSave = (state: CommonState, props: { id: ID }) =>
   state.pages.savedPage.localSaves[props.id]
+export const getInitialFetchStatus = (state: CommonState) =>
+  state.pages.savedPage.initialFetch
 
 export const getSavedTracksStatus = (state: CommonState) =>
   state.pages.savedPage.tracks.status

packages/web/src/common/store/lineup/sagas.js

@@ -303,7 +303,7 @@ function* updateQueueLineup(lineupPrefix, source, lineupEntries) {
     const toQueue = yield all(
       lineupEntries.map((e) => call(getToQueue, lineupPrefix, e))
     )
-    const flattenedQueue = flatten(toQueue)
+    const flattenedQueue = flatten(toQueue).filter((e) => Boolean(e))
     yield put(queueActions.add({ entries: flattenedQueue }))
   }
 }
@@ -323,7 +323,7 @@ function* play(lineupActions, lineupSelector, prefix, action) {
       const toQueue = yield all(
         lineup.entries.map((e) => call(getToQueue, lineup.prefix, e))
       )
-      const flattenedQueue = flatten(toQueue)
+      const flattenedQueue = flatten(toQueue).filter((e) => Boolean(e))
       yield put(queueActions.clear({}))
       yield put(queueActions.add({ entries: flattenedQueue }))
     }
@@ -432,7 +432,7 @@ function* refreshInView(lineupActions, lineupSelector, action) {
 
 const keepUidAndKind = (entry) => ({
   uid: entry.uid,
-  kind: entry.track_id ? Kind.TRACKS : Kind.COLLECTIONS,
+  kind: entry.kind ?? (entry.track_id ? Kind.TRACKS : Kind.COLLECTIONS),
   id: entry.track_id || entry.playlist_id
 })
 

packages/web/src/common/store/pages/saved/lineups/sagas.js

@@ -26,7 +26,7 @@ const PREFIX = savedTracksActions.prefix
 
 function* getTracks() {
   const savedTracks = yield select(getSaves)
-  const savedTrackIds = savedTracks.map((save) => save.save_item_id)
+  const savedTrackIds = savedTracks.map((save) => save.save_item_id ?? null)
   const savedTrackTimestamps = savedTracks.reduce((map, save) => {
     map[save.save_item_id] = save.created_at
     return map
@@ -48,7 +48,9 @@ function* getTracks() {
   }
 
   if (allSavedTrackIds.length > 0) {
-    const tracks = yield call(retrieveTracks, { trackIds: allSavedTrackIds })
+    const tracks = yield call(retrieveTracks, {
+      trackIds: allSavedTrackIds.filter((id) => id !== null)
+    })
     const tracksMap = tracks.reduce((map, track) => {
       // If the track hasn't confirmed save from the backend, pretend it is for the client.
       if (!track.has_current_user_saved) {
@@ -60,14 +62,16 @@ function* getTracks() {
       map[track.track_id] = track
       return map
     }, {})
-    return allSavedTrackIds.map((id) => tracksMap[id])
+    return allSavedTrackIds.map((id) =>
+      id ? tracksMap[id] : { kind: Kind.EMPTY }
+    )
   }
   return []
 }
 
 const keepDateSaved = (entry) => ({
   uid: entry.uid,
-  kind: entry.track_id ? Kind.TRACKS : Kind.COLLECTIONS,
+  kind: entry.kind ?? (entry.track_id ? Kind.TRACKS : Kind.COLLECTIONS),
   id: entry.track_id || entry.playlist_id,
   dateSaved: entry.dateSaved
 })