From 886d1a54a7d90186c6cd2a1f4a1d378c1227c2e7 Mon Sep 17 00:00:00 2001 From: KJ Shanks Date: Tue, 30 Jan 2024 12:55:12 -0800 Subject: [PATCH] Convert track page store js files to ts --- packages/common/src/store/pages/index.ts | 2 +- .../common/src/store/pages/track/actions.ts | 136 +++++++++++++++--- .../src/store/pages/track/lineup/reducer.ts | 19 ++- .../common/src/store/pages/track/reducer.ts | 66 ++++++--- .../common/src/store/pages/track/types.ts | 6 +- packages/common/src/store/reducers.ts | 2 +- .../src/screens/track-screen/TrackScreen.tsx | 2 +- .../track-screen/TrackScreenMainContent.tsx | 3 +- .../components/desktop/TrackPage.tsx | 2 +- .../components/mobile/TrackPage.tsx | 2 +- 10 files changed, 186 insertions(+), 54 deletions(-) diff --git a/packages/common/src/store/pages/index.ts b/packages/common/src/store/pages/index.ts index b5a1d9c9432..1e1ebbb9dc0 100644 --- a/packages/common/src/store/pages/index.ts +++ b/packages/common/src/store/pages/index.ts @@ -25,7 +25,7 @@ export * as trackPageLineupActions from './track/lineup/actions' export { default as trackPageReducer } from './track/reducer' export * as trackPageActions from './track/actions' export * as trackPageSelectors from './track/selectors' -export { default as TrackPageState } from './track/types' +export { TrackPageState } from './track/types' export * as tokenDashboardPageSelectors from './token-dashboard/selectors' export * from './token-dashboard/types' diff --git a/packages/common/src/store/pages/track/actions.ts b/packages/common/src/store/pages/track/actions.ts index 9069c7b6b1a..ecde8825a07 100644 --- a/packages/common/src/store/pages/track/actions.ts +++ b/packages/common/src/store/pages/track/actions.ts @@ -1,5 +1,6 @@ -// @ts-nocheck -// TODO(nkang) - convert to TS +import { ID } from 'models/Identifiers' +import { TrendingRange } from 'store/notifications' + export const SET_TRACK_RANK = 'TRACK_PAGE/SET_TRACK_RANK' export const GET_TRACK_RANKS = 'TRACK_PAGE/GET_TRACK_RANKS' export const RESET = 'TRACK_PAGE/RESET' @@ -19,31 +20,124 @@ export const GO_TO_REMIXES_OF_PARENT_PAGE = export const REFETCH_LINEUP = 'TRACK_PAGE/REFETCH_LINEUP' -export const getTrackRanks = (trackId) => ({ type: GET_TRACK_RANKS, trackId }) -export const setTrackRank = (duration, rank) => ({ +export type ResetAction = { + type: typeof RESET +} + +export type GetTrackRanksAction = { + type: typeof GET_TRACK_RANKS + trackId: ID +} + +export type SetTrackRankAction = { + type: typeof SET_TRACK_RANK + duration: TrendingRange + rank: number | null +} + +export type SetTrackIdAction = { + type: typeof SET_TRACK_ID + trackId: ID +} + +export type SetTrackPermalinkAction = { + type: typeof SET_TRACK_PERMALINK + permalink: string +} + +export type MakeTrackPublicAction = { + type: typeof MAKE_TRACK_PUBLIC + trackId: ID +} + +export type SetTrackTrendingRanksAction = { + type: typeof SET_TRACK_TRENDING_RANKS + trendingTrackRanks: Record +} + +export type SetIsInitialFetchAfterSSRAction = { + type: typeof SET_IS_INITIAL_FETCH_AFTER_SSR + isInitialFetchAfterSsr: boolean +} + +export type FetchTrackAction = { + type: typeof FETCH_TRACK + trackId: ID | null + slug?: string + handle?: string + canBeUnlisted?: boolean + forceRetrieveFromSource?: boolean + withRemixes?: boolean +} + +export type FetchTrackSucceededAction = { + type: typeof FETCH_TRACK_SUCCEEDED + trackId: ID +} +export type FetchTrackFailedAction = { + type: typeof FETCH_TRACK_FAILED +} + +export type GoToRemixesOfParentPageAction = { + type: typeof GO_TO_REMIXES_OF_PARENT_PAGE + parentTrackId: ID +} + +export type RefetchLineupAction = { + type: typeof REFETCH_LINEUP +} + +export type TrackPageAction = + | ResetAction + | SetTrackRankAction + | GetTrackRanksAction + | SetTrackIdAction + | SetTrackPermalinkAction + | MakeTrackPublicAction + | SetTrackTrendingRanksAction + | SetIsInitialFetchAfterSSRAction + | FetchTrackAction + | FetchTrackSucceededAction + | FetchTrackFailedAction + | GoToRemixesOfParentPageAction + | RefetchLineupAction + +export const getTrackRanks = (trackId: ID): GetTrackRanksAction => ({ + type: GET_TRACK_RANKS, + trackId +}) +export const setTrackRank = ( + duration: TrendingRange, + rank: number | null +): SetTrackRankAction => ({ type: SET_TRACK_RANK, duration, rank }) -export const resetTrackPage = () => ({ type: RESET }) -export const setTrackId = (trackId) => ({ type: SET_TRACK_ID, trackId }) -export const setTrackPermalink = (permalink) => ({ +export const resetTrackPage = (): ResetAction => ({ type: RESET }) +export const setTrackId = (trackId: ID): SetTrackIdAction => ({ + type: SET_TRACK_ID, + trackId +}) +export const setTrackPermalink = ( + permalink: string +): SetTrackPermalinkAction => ({ type: SET_TRACK_PERMALINK, permalink }) -export const makeTrackPublic = (trackId) => ({ +export const makeTrackPublic = (trackId: ID): MakeTrackPublicAction => ({ type: MAKE_TRACK_PUBLIC, trackId }) export const fetchTrack = ( - trackId: Nullable, + trackId: ID | null, slug?: string, handle?: string, canBeUnlisted?: boolean, forceRetrieveFromSource?: boolean, withRemixes?: boolean -) => ({ +): FetchTrackAction => ({ type: FETCH_TRACK, trackId, slug, @@ -52,13 +146,19 @@ export const fetchTrack = ( forceRetrieveFromSource, withRemixes }) -export const fetchTrackSucceeded = (trackId) => ({ +export const fetchTrackSucceeded = ( + trackId: ID +): FetchTrackSucceededAction => ({ type: FETCH_TRACK_SUCCEEDED, trackId }) -export const fetchTrackFailed = (trackId) => ({ type: FETCH_TRACK_FAILED }) +export const fetchTrackFailed = (_trackId: ID): FetchTrackFailedAction => ({ + type: FETCH_TRACK_FAILED +}) -export const goToRemixesOfParentPage = (parentTrackId) => ({ +export const goToRemixesOfParentPage = ( + parentTrackId: ID +): GoToRemixesOfParentPageAction => ({ type: GO_TO_REMIXES_OF_PARENT_PAGE, parentTrackId }) @@ -68,16 +168,20 @@ export const goToRemixesOfParentPage = (parentTrackId) => ({ * Useful when the lineup's content depends on changes that may * happen to the track in view on the track page. */ -export const refetchLineup = () => ({ +export const refetchLineup = (): RefetchLineupAction => ({ type: REFETCH_LINEUP }) -export const setTrackTrendingRanks = (trendingTrackRanks) => ({ +export const setTrackTrendingRanks = ( + trendingTrackRanks: Record +): SetTrackTrendingRanksAction => ({ type: SET_TRACK_TRENDING_RANKS, trendingTrackRanks }) -export const setIsInitialFetchAfterSsr = (isInitialFetchAfterSsr: boolean) => ({ +export const setIsInitialFetchAfterSsr = ( + isInitialFetchAfterSsr: boolean +): SetIsInitialFetchAfterSSRAction => ({ type: SET_IS_INITIAL_FETCH_AFTER_SSR, isInitialFetchAfterSsr }) diff --git a/packages/common/src/store/pages/track/lineup/reducer.ts b/packages/common/src/store/pages/track/lineup/reducer.ts index f6c277d67ec..9759a0baf87 100644 --- a/packages/common/src/store/pages/track/lineup/reducer.ts +++ b/packages/common/src/store/pages/track/lineup/reducer.ts @@ -1,24 +1,31 @@ -// @ts-nocheck -// TODO(nkang) - convert to TS import { RESET_SUCCEEDED, stripPrefix } from 'store/lineup/actions' import { initialLineupState } from 'store/lineup/reducer' import { PREFIX } from 'store/pages/track/lineup/actions' -export const initialState = { +import { LineupState, Track } from '../../../../models' + +export const initialState: LineupState = { ...initialLineupState, prefix: PREFIX, maxEntries: 6 } +type ResetSucceededAction = { + type: typeof RESET_SUCCEEDED +} + const actionsMap = { - [RESET_SUCCEEDED](state, action) { + [RESET_SUCCEEDED](_state: LineupState, _action: ResetSucceededAction) { const newState = initialState return newState } } -const tracks = (state = initialState, action) => { - const baseActionType = stripPrefix(PREFIX, action.type) +const tracks = (state = initialState, action: ResetSucceededAction) => { + const baseActionType = stripPrefix( + PREFIX, + action.type + ) as typeof RESET_SUCCEEDED const matchingReduceFunction = actionsMap[baseActionType] if (!matchingReduceFunction) return state return matchingReduceFunction(state, action) diff --git a/packages/common/src/store/pages/track/reducer.ts b/packages/common/src/store/pages/track/reducer.ts index ee0ba019ea6..c1611064ed7 100644 --- a/packages/common/src/store/pages/track/reducer.ts +++ b/packages/common/src/store/pages/track/reducer.ts @@ -1,8 +1,6 @@ -// @ts-nocheck -// TODO(nkang) - convert to TS - import { SsrPageProps } from 'models/SsrPageProps' -import { asLineup } from 'store/lineup/reducer' +import { Track } from 'models/Track' +import { LineupActions, asLineup } from 'store/lineup/reducer' import tracksReducer, { initialState as initialLineupState } from 'store/pages/track/lineup/reducer' @@ -14,13 +12,21 @@ import { RESET, SET_TRACK_RANK, SET_TRACK_TRENDING_RANKS, - SET_IS_INITIAL_FETCH_AFTER_SSR + SET_IS_INITIAL_FETCH_AFTER_SSR, + SetTrackIdAction, + SetTrackPermalinkAction, + SetTrackRankAction, + SetTrackTrendingRanksAction, + ResetAction, + SetIsInitialFetchAfterSSRAction, + TrackPageAction } from './actions' import { PREFIX as tracksPrefix } from './lineup/actions' -import TrackPageState from './types' +import { TrackPageState } from './types' const initialState: TrackPageState = { trackId: null, + trackPermalink: null, rank: { week: null, month: null, @@ -36,19 +42,22 @@ const initialState: TrackPageState = { } const actionsMap = { - [SET_TRACK_ID](state, action) { + [SET_TRACK_ID](state: TrackPageState, action: SetTrackIdAction) { return { ...state, trackId: action.trackId } }, - [SET_TRACK_PERMALINK](state, action) { + [SET_TRACK_PERMALINK]( + state: TrackPageState, + action: SetTrackPermalinkAction + ) { return { ...state, trackPermalink: action.permalink } }, - [SET_TRACK_RANK](state, action) { + [SET_TRACK_RANK](state: TrackPageState, action: SetTrackRankAction) { return { ...state, rank: { @@ -57,7 +66,10 @@ const actionsMap = { } } }, - [SET_TRACK_TRENDING_RANKS](state, action) { + [SET_TRACK_TRENDING_RANKS]( + state: TrackPageState, + action: SetTrackTrendingRanksAction + ) { return { ...state, trendingTrackRanks: { @@ -66,14 +78,19 @@ const actionsMap = { } } }, - [RESET](state, action) { + [RESET](state: TrackPageState, action: ResetAction) { return { ...state, ...initialState, + // @ts-ignore - Massaging the old reset action for track page to work with the lineup reducer + // Probably should use the lineup reset action instead tracks: tracksLineupReducer(undefined, action) } }, - [SET_IS_INITIAL_FETCH_AFTER_SSR](state, action) { + [SET_IS_INITIAL_FETCH_AFTER_SSR]( + state: TrackPageState, + action: SetIsInitialFetchAfterSSRAction + ) { return { ...state, isInitialFetchAfterSsr: action.isInitialFetchAfterSsr @@ -96,17 +113,22 @@ const buildInitialState = (ssrPageProps?: SsrPageProps) => { return initialState } -const reducer = (ssrPageProps?: SsrPageProps) => (state, action) => { - if (!state) { - state = buildInitialState(ssrPageProps) - } +const reducer = + (ssrPageProps?: SsrPageProps) => + (state: TrackPageState, action: TrackPageAction | LineupActions) => { + if (!state) { + state = buildInitialState(ssrPageProps) + } - const tracks = tracksLineupReducer(state.tracks, action) - if (tracks !== state.tracks) return { ...state, tracks } + const tracks = tracksLineupReducer( + state.tracks, + action as LineupActions + ) + if (tracks !== state.tracks) return { ...state, tracks } - const matchingReduceFunction = actionsMap[action.type] - if (!matchingReduceFunction) return state - return matchingReduceFunction(state, action) -} + const matchingReduceFunction = actionsMap[action.type] + if (!matchingReduceFunction) return state + return matchingReduceFunction(state, action as TrackPageAction) + } export default reducer diff --git a/packages/common/src/store/pages/track/types.ts b/packages/common/src/store/pages/track/types.ts index 7643013a793..d334d1d621f 100644 --- a/packages/common/src/store/pages/track/types.ts +++ b/packages/common/src/store/pages/track/types.ts @@ -1,6 +1,6 @@ -import { ID, LineupState } from '../../../models' +import { ID, LineupState, Track } from '../../../models' -export default interface TrackPageState { +export type TrackPageState = { trackId: ID | null trackPermalink: string | null rank: { @@ -13,6 +13,6 @@ export default interface TrackPageState { month: ID[] | null year: ID[] | null } - tracks: LineupState<{ id: ID }> + tracks: LineupState isInitialFetchAfterSsr: boolean } diff --git a/packages/common/src/store/reducers.ts b/packages/common/src/store/reducers.ts index 8d8d79711a7..6f853e781e9 100644 --- a/packages/common/src/store/reducers.ts +++ b/packages/common/src/store/reducers.ts @@ -60,7 +60,7 @@ import { SettingsPageState } from './pages/settings/types' import smartCollection from './pages/smart-collection/slice' import tokenDashboardSlice from './pages/token-dashboard/slice' import track from './pages/track/reducer' -import TrackPageState from './pages/track/types' +import { TrackPageState } from './pages/track/types' import trending from './pages/trending/reducer' import { TrendingPageState } from './pages/trending/types' import trendingPlaylists from './pages/trending-playlists/slice' diff --git a/packages/mobile/src/screens/track-screen/TrackScreen.tsx b/packages/mobile/src/screens/track-screen/TrackScreen.tsx index 8bafabbdc10..02b1ebd0b7d 100644 --- a/packages/mobile/src/screens/track-screen/TrackScreen.tsx +++ b/packages/mobile/src/screens/track-screen/TrackScreen.tsx @@ -79,7 +79,7 @@ export const TrackScreen = () => { dispatch(tracksActions.reset()) dispatch( fetchTrack( - id, + id ?? null, decodeURIComponent(slug ?? ''), handle ?? user?.handle, canBeUnlisted diff --git a/packages/mobile/src/screens/track-screen/TrackScreenMainContent.tsx b/packages/mobile/src/screens/track-screen/TrackScreenMainContent.tsx index efc46593212..cf93c022f2b 100644 --- a/packages/mobile/src/screens/track-screen/TrackScreenMainContent.tsx +++ b/packages/mobile/src/screens/track-screen/TrackScreenMainContent.tsx @@ -1,7 +1,6 @@ import type { ReactNode } from 'react' import type { - ID, LineupState, Track, User, @@ -28,7 +27,7 @@ const useStyles = makeStyles(({ spacing }) => ({ })) type TrackScreenMainContentProps = { - lineup: LineupState<{ id: ID }> + lineup: LineupState lineupHeader: ReactNode remixParentTrack: Nullable track: Track | SearchTrack diff --git a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx index 300b1f76a00..93af6489281 100644 --- a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx +++ b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx @@ -72,7 +72,7 @@ export type OwnProps = { parentTrackId?: ID }) => void // Tracks Lineup Props - tracks: LineupState<{ id: ID }> + tracks: LineupState currentQueueItem: QueueItem isPlaying: boolean isBuffering: boolean diff --git a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx index 0aaa3b5a396..9a3fd86f9dd 100644 --- a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx +++ b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx @@ -73,7 +73,7 @@ export type OwnProps = { parentTrackId?: ID }) => void // Tracks Lineup Props - tracks: LineupState<{ id: ID }> + tracks: LineupState currentQueueItem: QueueItem isPlaying: boolean isBuffering: boolean