[C-2327] Add playlist updates slice (#3063)

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

@@ -1,5 +1,7 @@
 import type { AudiusLibs } from '@audius/sdk/dist/native-libs'
 
+import { PlaylistUpdate } from 'store/playlist-updates'
+
 import {
   ID,
   TimeRange,
@@ -77,6 +79,8 @@ const FULL_ENDPOINT_MAP = {
     `/playlists/${playlistId}/reposts`,
   playlistFavoriteUsers: (playlistId: OpaqueID) =>
     `/playlists/${playlistId}/favorites`,
+  playlistUpdates: (userId: OpaqueID) =>
+    `/notifications/${userId}/playlist_updates`,
   getUser: (userId: OpaqueID) => `/users/${userId}`,
   userByHandle: (handle: OpaqueID) => `/users/handle/${handle}`,
   userTracksByHandle: (handle: OpaqueID) => `/users/handle/${handle}/tracks`,
@@ -1726,6 +1730,13 @@ export class AudiusAPIClient {
     return response ? response.data : null
   }
 
+  async getPlaylistUpdates(userId: number) {
+    const response = await this._getResponse<APIResponse<PlaylistUpdate[]>>(
+      FULL_ENDPOINT_MAP.playlistUpdates(encodeHashId(userId))
+    )
+    return response?.data
+  }
+
   async init() {
     if (this.initializationState.state === 'initialized') return
 

packages/common/src/store/index.ts

@@ -30,3 +30,4 @@ export * from './remix-settings'
 export * from './premium-content'
 export * from './collectibles'
 export * from './solana'
+export * from './playlist-updates'

packages/common/src/store/playlist-updates/index.ts

@@ -0,0 +1,8 @@
+export {
+  actions as playlistUpdatesActions,
+  default as playlistUpdatesReducer
+} from './playlistUpdatesSlice'
+
+export * as playlistUpdatesSelectors from './playlistUpdatesSelectors'
+export { default as playlistUpdatesSagas } from './playlistUpdatesSagas'
+export * from './types'

packages/common/src/store/playlist-updates/playlistUpdatesSagas.ts

@@ -0,0 +1,50 @@
+import { call, takeEvery, select, put } from 'typed-redux-saga'
+
+import { getContext } from 'store/effects'
+
+import { getUserId } from '../account/selectors'
+
+import {
+  fetchPlaylistUpdates,
+  playlistUpdatesReceived,
+  updatedPlaylistViewed
+} from './playlistUpdatesSlice'
+import { UpdatedPlaylistViewedAction } from './types'
+
+function* watchFetchPlaylistUpdates() {
+  yield* takeEvery(
+    fetchPlaylistUpdates,
+    function* fetchPlaylistUpdatesWorker() {
+      const currentUserId = yield* select(getUserId)
+      if (!currentUserId) return
+
+      const apiClient = yield* getContext('apiClient')
+
+      const playlistUpdates = yield* call(
+        [apiClient, apiClient.getPlaylistUpdates],
+        currentUserId
+      )
+
+      if (playlistUpdates && playlistUpdates.length > 0) {
+        yield* put(playlistUpdatesReceived({ playlistUpdates }))
+      }
+    }
+  )
+}
+
+function* watchUpdatedPlaylistViewedSaga() {
+  yield* takeEvery(
+    updatedPlaylistViewed.type,
+    function* updatePlaylistLastViewedAt(action: UpdatedPlaylistViewedAction) {
+      const audiusBackendInstance = yield* getContext('audiusBackendInstance')
+      yield* call(
+        audiusBackendInstance.updatePlaylistLastViewedAt,
+        action.payload.playlistId
+      )
+    }
+  )
+}
+
+export default function sagas() {
+  return [watchFetchPlaylistUpdates, watchUpdatedPlaylistViewedSaga]
+}

packages/common/src/store/playlist-updates/playlistUpdatesSelectors.ts

@@ -0,0 +1,4 @@
+import { playlistUpdatesEntityAdapter } from './playlistUpdatesSlice'
+
+export const { selectById: selectPlaylistUpdateById } =
+  playlistUpdatesEntityAdapter.getSelectors()

packages/common/src/store/playlist-updates/playlistUpdatesSlice.ts

@@ -0,0 +1,40 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+
+import {
+  PlaylistUpdate,
+  PlaylistUpdatesReceivedAction,
+  PlaylistUpdateState,
+  UpdatedPlaylistViewedAction
+} from './types'
+
+export const playlistUpdatesEntityAdapter = createEntityAdapter<PlaylistUpdate>(
+  {
+    selectId: (playlistUpdate) => playlistUpdate.playlist_id
+  }
+)
+
+const initialState: PlaylistUpdateState =
+  playlistUpdatesEntityAdapter.getInitialState()
+
+const slice = createSlice({
+  name: 'playlist-updates',
+  initialState,
+  reducers: {
+    fetchPlaylistUpdates() {},
+    playlistUpdatesReceived(state, action: PlaylistUpdatesReceivedAction) {
+      playlistUpdatesEntityAdapter.setAll(state, action.payload.playlistUpdates)
+    },
+    updatedPlaylistViewed(state, action: UpdatedPlaylistViewedAction) {
+      playlistUpdatesEntityAdapter.removeOne(state, action.payload.playlistId)
+    }
+  }
+})
+
+export const {
+  fetchPlaylistUpdates,
+  playlistUpdatesReceived,
+  updatedPlaylistViewed
+} = slice.actions
+
+export const { actions } = slice
+export default slice.reducer

packages/common/src/store/playlist-updates/types.ts

@@ -0,0 +1,19 @@
+import { EntityState, PayloadAction } from '@reduxjs/toolkit'
+
+import { ID } from 'models/Identifiers'
+
+export type PlaylistUpdate = {
+  playlist_id: number
+  updated_at: string
+  last_seen_at: string
+}
+
+export type PlaylistUpdateState = EntityState<PlaylistUpdate>
+
+export type PlaylistUpdatesReceivedAction = PayloadAction<{
+  playlistUpdates: PlaylistUpdate[]
+}>
+
+export type UpdatedPlaylistViewedAction = PayloadAction<{
+  playlistId: ID
+}>

packages/common/src/store/reducers.ts

@@ -62,6 +62,7 @@ import {
   playlistLibraryReducer,
   PlaylistLibraryState
 } from './playlist-library'
+import { playlistUpdatesReducer, PlaylistUpdateState } from './playlist-updates'
 import premiumContentSlice from './premium-content/slice'
 import queue from './queue/slice'
 import reachability from './reachability/reducer'
@@ -160,6 +161,7 @@ export const reducers = () => ({
 
   // Playlist Library
   playlistLibrary: playlistLibraryReducer,
+  playlistUpdates: playlistUpdatesReducer,
 
   notificationsLegacy: notificationsReducerLegacy,
   notifications: notificationsReducer,
@@ -274,6 +276,7 @@ export type CommonState = {
 
   // Playlist library
   playlistLibrary: PlaylistLibraryState
+  playlistUpdates: PlaylistUpdateState
 
   notificationsLegacy: NotificationState
   notifications: NotificationsState

packages/common/src/store/sagas.ts

@@ -14,6 +14,7 @@ import { premiumContentSagas } from 'store/premium-content'
 import remoteConfigSagas from 'store/remote-config/sagas'
 import { searchUsersModalSagas } from 'store/ui'
 
+import { playlistUpdatesSagas } from './playlist-updates'
 import { CommonStoreContext } from './storeContext'
 import {
   toastSagas,
@@ -45,7 +46,8 @@ export const sagas = (_ctx: CommonStoreContext) => ({
   mobileOverflowMenuUI: mobileOverflowMenuUISagas,
   deletePlaylistConfirmationModalUI: deletePlaylistConfirmationModalUISagas,
   player: playerSagas,
-  playbackPosition: playbackPositionSagas
+  playbackPosition: playbackPositionSagas,
+  playlistUpdates: playlistUpdatesSagas
 
   // signOut: signOutSagas
   // recoveryEmail: recoveryEmailSagas

packages/web/src/common/store/playlist-updates/sagas.ts

@@ -0,0 +1,5 @@
+import { watchUpdatedPlaylistViewedSaga } from './updatedPlaylistViewedSaga'
+
+export default function sagas() {
+  return [watchUpdatedPlaylistViewedSaga()]
+}

packages/web/src/common/store/playlist-updates/updatedPlaylistViewedSaga.ts

@@ -0,0 +1,20 @@
+import {
+  getContext,
+  playlistUpdatesActions,
+  UpdatedPlaylistViewedAction
+} from '@audius/common'
+import { call, takeEvery } from 'typed-redux-saga'
+
+const { updatedPlaylistViewed } = playlistUpdatesActions
+
+export function* watchUpdatedPlaylistViewedSaga() {
+  yield* takeEvery(updatedPlaylistViewed.type, updatePlaylistLastViewedAt)
+}
+
+function* updatePlaylistLastViewedAt(action: UpdatedPlaylistViewedAction) {
+  const audiusBackendInstance = yield* getContext('audiusBackendInstance')
+  yield* call(
+    audiusBackendInstance.updatePlaylistLastViewedAt,
+    action.payload.playlistId
+  )
+}

packages/web/src/store/sagas.ts

@@ -12,7 +12,8 @@ import {
   vipDiscordModalSagas,
   reachabilitySagas as commonReachabilitySagas,
   searchUsersModalSagas,
-  solanaSagas
+  solanaSagas,
+  playlistUpdatesSagas
 } from '@audius/common'
 import { all, fork } from 'redux-saga/effects'
 
@@ -104,6 +105,7 @@ export default function* rootSaga() {
     // Account
     accountSagas(),
     playlistLibrarySagas(),
+    playlistUpdatesSagas(),
     recoveryEmailSagas(),
     signOutSagas(),