Convert trending page store js files to ts (#7396)

AudiusProject · Jan 31, 2024 · 8ff5b73 · 8ff5b73
1 parent 25e848c
commit 8ff5b73
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 64 deletions.
diff --git a/packages/common/src/store/pages/profile/lineups/feed/reducer.ts b/packages/common/src/store/pages/profile/lineups/feed/reducer.ts
@@ -2,9 +2,9 @@ import { RESET_SUCCEEDED, stripPrefix } from 'store/lineup/actions'
 import { initialLineupState } from 'store/lineup/reducer'
 import { PREFIX } from 'store/pages/profile/lineups/feed/actions'
 
-import { LineupState } from '../../../../../models'
+import { Collection, LineupState, Track } from '../../../../../models'
 
-export const initialState: LineupState<{ id: number }> = {
+export const initialState: LineupState<Track | Collection> = {
   ...initialLineupState,
   prefix: PREFIX
 }
@@ -15,7 +15,7 @@ type ResetSucceededAction = {
 
 const actionsMap = {
   [RESET_SUCCEEDED](
-    _state: LineupState<{ id: number }>,
+    _state: LineupState<Track | Collection>,
     _action: ResetSucceededAction
   ) {
     const newState = initialState

diff --git a/packages/common/src/store/pages/profile/reducer.ts b/packages/common/src/store/pages/profile/reducer.ts
@@ -6,7 +6,7 @@ import tracksReducer, {
   initialState as initialTracksLineupState
 } from 'store/pages/profile/lineups/tracks/reducer'
 
-import { Status, Track } from '../../../models'
+import { Collection, Status, Track } from '../../../models'
 
 import {
   FETCH_PROFILE,
@@ -329,7 +329,10 @@ const tracksLineupReducer = asLineup(tracksPrefix, tracksReducer)
 
 const reducer = (
   state = initialState,
-  action: ProfilePageAction | LineupActions<Track>
+  action:
+    | ProfilePageAction
+    | LineupActions<Track>
+    | LineupActions<Track | Collection>
 ) => {
   const { currentUser, entries } = state
 
@@ -339,7 +342,10 @@ const reducer = (
 
   let newEntry = entries[profileHandle] ?? initialProfileState
 
-  const feed = feedLineupReducer(newEntry.feed, action as LineupActions<Track>)
+  const feed = feedLineupReducer(
+    newEntry.feed,
+    action as LineupActions<Track | Collection>
+  )
   if (feed !== newEntry.feed) {
     newEntry = { ...newEntry, feed }
   }

diff --git a/packages/common/src/store/pages/profile/types.ts b/packages/common/src/store/pages/profile/types.ts
@@ -1,4 +1,12 @@
-import type { ID, UID, LineupState, Status, User } from '../../../models'
+import type {
+  ID,
+  UID,
+  LineupState,
+  Status,
+  User,
+  Track,
+  Collection
+} from '../../../models'
 import type { Nullable } from '../../../utils/typeUtils'
 
 export enum FollowType {
@@ -38,8 +46,8 @@ export type ProfileState = {
   followers: ProfilePageFollow
   followees: ProfilePageFollow
   followeeFollows: ProfilePageFollow
-  feed: LineupState<{ id: ID }>
-  tracks: LineupState<{ id: ID }>
+  feed: LineupState<Track | Collection>
+  tracks: LineupState<Track>
   isNotificationSubscribed: boolean
   error?: string
 }

diff --git a/packages/common/src/store/pages/trending/actions.ts b/packages/common/src/store/pages/trending/actions.ts
@@ -7,6 +7,26 @@ export const SET_TRENDING_TIME_RANGE = 'TRENDING/SET_TRENDING_TIME_RANGE'
 export const SET_LAST_FETCHED_TRENDING_GENRE =
   'TRENDING/SET_LAST_FETCHED_TRENDING_GENRE'
 
+export type SetTrendingGenreAction = {
+  type: typeof SET_TRENDING_GENRE
+  genre: Genre | null
+}
+
+export type SetTrendingTimeRangeAction = {
+  type: typeof SET_TRENDING_TIME_RANGE
+  timeRange: TimeRange
+}
+
+export type SetLastFetchedTrendingGenreAction = {
+  type: typeof SET_LAST_FETCHED_TRENDING_GENRE
+  genre: Genre | null
+}
+
+export type TrendingPageAction =
+  | SetTrendingGenreAction
+  | SetTrendingTimeRangeAction
+  | SetLastFetchedTrendingGenreAction
+
 export const setTrendingGenre = (genre: Genre | null) => ({
   type: SET_TRENDING_GENRE,
   genre

diff --git a/packages/common/src/store/pages/trending/lineup/reducer.ts b/packages/common/src/store/pages/trending/lineup/reducer.ts
@@ -22,7 +22,7 @@ type ResetSucceededAction = {
   type: typeof RESET_SUCCEEDED
 }
 
-export const makeInitialState = (prefix: string) => ({
+export const makeInitialState = (prefix: string): TrendingLineupState => ({
   ...initialState,
   entryIds: new Set() as Set<UID>,
   prefix

diff --git a/packages/common/src/store/pages/trending/reducer.ts b/packages/common/src/store/pages/trending/reducer.ts
@@ -1,43 +1,55 @@
-// @ts-nocheck
-// TODO(nkang) - convert to TS
 import { History } from 'history'
 
-import { asLineup } from 'store/lineup/reducer'
+import { LineupActions, asLineup } from 'store/lineup/reducer'
 import {
   SET_TRENDING_GENRE,
   SET_TRENDING_TIME_RANGE,
-  SET_LAST_FETCHED_TRENDING_GENRE
+  SET_LAST_FETCHED_TRENDING_GENRE,
+  SetTrendingGenreAction,
+  SetTrendingTimeRangeAction,
+  SetLastFetchedTrendingGenreAction,
+  TrendingPageAction
 } from 'store/pages/trending/actions'
 import {
   TRENDING_WEEK_PREFIX,
   TRENDING_MONTH_PREFIX,
   TRENDING_ALL_TIME_PREFIX
 } from 'store/pages/trending/lineup/actions'
-import { GENRES } from 'utils/genres'
+import { GENRES, Genre } from 'utils/genres'
 
-import { TimeRange } from '../../../models'
+import { TimeRange, Track } from '../../../models'
 
 import {
   trendingWeek,
   trendingMonth,
   trendingAllTime,
   makeInitialState
 } from './lineup/reducer'
+import { TrendingPageState } from './types'
 
 const actionsMap = {
-  [SET_TRENDING_TIME_RANGE](state, action) {
+  [SET_TRENDING_TIME_RANGE](
+    state: TrendingPageState,
+    action: SetTrendingTimeRangeAction
+  ) {
     return {
       ...state,
       trendingTimeRange: action.timeRange
     }
   },
-  [SET_TRENDING_GENRE](state, action) {
+  [SET_TRENDING_GENRE](
+    state: TrendingPageState,
+    action: SetTrendingGenreAction
+  ) {
     return {
       ...state,
       trendingGenre: action.genre
     }
   },
-  [SET_LAST_FETCHED_TRENDING_GENRE](state, action) {
+  [SET_LAST_FETCHED_TRENDING_GENRE](
+    state: TrendingPageState,
+    action: SetLastFetchedTrendingGenreAction
+  ) {
     return {
       ...state,
       lastFetchedTrendingGenre: action.genre
@@ -52,44 +64,61 @@ const trendingAllTimeReducer = asLineup(
   trendingAllTime
 )
 
-const reducer = (history?: History) => (state, action) => {
-  if (!state) {
-    const initialState = {
-      lastFetchedTrendingGenre: null,
-      trendingWeek: makeInitialState(TRENDING_WEEK_PREFIX),
-      trendingMonth: makeInitialState(TRENDING_MONTH_PREFIX),
-      trendingAllTime: makeInitialState(TRENDING_ALL_TIME_PREFIX)
-    }
+const reducer =
+  (history?: History) =>
+  (
+    state: TrendingPageState,
+    action: TrendingPageAction | LineupActions<Track>
+  ) => {
+    if (!state) {
+      const initialState = {
+        lastFetchedTrendingGenre: null,
+        trendingWeek: makeInitialState(TRENDING_WEEK_PREFIX),
+        trendingMonth: makeInitialState(TRENDING_MONTH_PREFIX),
+        trendingAllTime: makeInitialState(TRENDING_ALL_TIME_PREFIX)
+      }
 
-    if (history) {
-      const urlParams = new URLSearchParams(history.location.search)
-      const genre = urlParams.get('genre')
-      const timeRange = urlParams.get('timeRange')
-      return {
-        ...initialState,
-        trendingTimeRange: Object.values(TimeRange).includes(timeRange)
-          ? timeRange
-          : TimeRange.WEEK,
-        trendingGenre: Object.values(GENRES).includes(genre) ? genre : null
+      if (history) {
+        const urlParams = new URLSearchParams(history.location.search)
+        const genre = urlParams.get('genre') as Genre | null
+        const timeRange = urlParams.get('timeRange') as TimeRange | null
+        return {
+          ...initialState,
+          trendingTimeRange:
+            timeRange && Object.values(TimeRange).includes(timeRange)
+              ? timeRange
+              : TimeRange.WEEK,
+          trendingGenre:
+            genre && Object.values(GENRES).includes(genre) ? genre : null
+        }
       }
+
+      return initialState
     }
+    const trendingWeek = trendingWeekReducer(
+      state.trendingWeek,
+      action as LineupActions<Track>
+    )
+    if (trendingWeek !== state.trendingWeek) return { ...state, trendingWeek }
 
-    return initialState
-  }
-  const trendingWeek = trendingWeekReducer(state.trendingWeek, action)
-  if (trendingWeek !== state.trendingWeek) return { ...state, trendingWeek }
+    const trendingMonth = trendingMonthReducer(
+      state.trendingMonth,
+      action as LineupActions<Track>
+    )
+    if (trendingMonth !== state.trendingMonth)
+      return { ...state, trendingMonth }
 
-  const trendingMonth = trendingMonthReducer(state.trendingMonth, action)
-  if (trendingMonth !== state.trendingMonth) return { ...state, trendingMonth }
+    const trendingAllTime = trendingAllTimeReducer(
+      state.trendingAllTime,
+      action as LineupActions<Track>
+    )
+    if (trendingAllTime !== state.trendingAllTime) {
+      return { ...state, trendingAllTime }
+    }
 
-  const trendingAllTime = trendingAllTimeReducer(state.trendingAllTime, action)
-  if (trendingAllTime !== state.trendingAllTime) {
-    return { ...state, trendingAllTime }
+    const matchingReduceFunction = actionsMap[action.type]
+    if (!matchingReduceFunction) return state
+    return matchingReduceFunction(state, action as TrendingPageAction)
   }
 
-  const matchingReduceFunction = actionsMap[action.type]
-  if (!matchingReduceFunction) return state
-  return matchingReduceFunction(state, action)
-}
-
 export default reducer
diff --git a/packages/common/src/store/pages/trending/types.ts b/packages/common/src/store/pages/trending/types.ts
@@ -1,9 +1,9 @@
-import { ID, LineupState, TimeRange } from '../../../models'
+import { LineupState, TimeRange, Track } from '../../../models'
 
 export type TrendingPageState = {
-  trendingWeek: LineupState<{ id: ID }>
-  trendingMonth: LineupState<{ id: ID }>
-  trendingAllTime: LineupState<{ id: ID }>
+  trendingWeek: LineupState<Track>
+  trendingMonth: LineupState<Track>
+  trendingAllTime: LineupState<Track>
   trendingTimeRange: TimeRange
   trendingGenre: string | null
   lastFetchedTrendingGenre: string | null

diff --git a/packages/web/src/common/store/queue/sagas.ts b/packages/web/src/common/store/queue/sagas.ts
@@ -25,7 +25,8 @@ import {
   getContext,
   lineupRegistry,
   Collectible,
-  UserTrackMetadata
+  UserTrackMetadata,
+  Track
 } from '@audius/common'
 import { all, call, put, select, takeEvery, takeLatest } from 'typed-redux-saga'
 
@@ -235,8 +236,7 @@ export function* watchPlay() {
 
         const location = yield* select(getLocation)
 
-        // @ts-ignore todo
-        const lineup: LineupState<{ id: number }> = yield* select(
+        const lineup: LineupState<Track> = yield* select(
           getLineupSelectorForRoute(location)
         )
         if (!lineup) return

diff --git a/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
@@ -14,7 +14,8 @@ import {
   profilePageFeedLineupActions as feedActions,
   badgeTiers,
   useSelectTierInfo,
-  CreatePlaylistSource
+  CreatePlaylistSource,
+  Track
 } from '@audius/common'
 import { IconAlbum } from '@audius/harmony'
 
@@ -93,11 +94,11 @@ export type ProfilePageProps = {
   playlists: Collection[] | null
   status: Status
   goToRoute: (route: string) => void
-  artistTracks: LineupState<{ id: ID }>
+  artistTracks: LineupState<Track>
   playArtistTrack: (uid: UID) => void
   pauseArtistTrack: () => void
   // Feed
-  userFeed: LineupState<{ id: ID }>
+  userFeed: LineupState<Track | Collection>
   playUserFeedTrack: (uid: UID) => void
   pauseUserFeedTrack: () => void
 

diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
@@ -14,7 +14,8 @@ import {
   profilePageTracksLineupActions as tracksActions,
   profilePageFeedLineupActions as feedActions,
   badgeTiers,
-  useSelectTierInfo
+  useSelectTierInfo,
+  Track
 } from '@audius/common'
 import { IconAlbum } from '@audius/harmony'
 import cn from 'classnames'
@@ -92,8 +93,8 @@ export type ProfilePageProps = {
   playlists: Collection[] | null
   status: Status
   goToRoute: (route: string) => void
-  artistTracks: LineupState<{ id: ID }>
-  userFeed: LineupState<{ id: ID }>
+  artistTracks: LineupState<Track>
+  userFeed: LineupState<Track | Collection>
   playArtistTrack: (uid: UID) => void
   pauseArtistTrack: () => void
   playUserFeedTrack: (uid: UID) => void