[C-1402] Migrate upload store to common (#2215)

AudiusProject · Nov 3, 2022 · 2b34ee1 · 2b34ee1
1 parent 186934f
commit 2b34ee1
Show file tree

Hide file tree

Showing 24 changed files with 227 additions and 143 deletions.
diff --git a/packages/common/src/store/index.ts b/packages/common/src/store/index.ts
@@ -23,3 +23,4 @@ export * from './user-list'
 export * from './commonStore'
 export * from './player'
 export * from './music-confetti'
+export * from './upload'
diff --git a/packages/common/src/store/reducers.ts b/packages/common/src/store/reducers.ts
@@ -87,6 +87,8 @@ import toastReducer from './ui/toast/slice'
 import transactionDetailsReducer from './ui/transaction-details/slice'
 import vipDiscordModalReducer from './ui/vip-discord-modal/slice'
 import { VipDiscordModalState } from './ui/vip-discord-modal/types'
+import upload from './upload/reducer'
+import { UploadState } from './upload/types'
 import favoritesUserListReducer from './user-list/favorites/reducers'
 import followersUserListReducer from './user-list/followers/reducers'
 import followingUserListReducer from './user-list/following/reducers'
@@ -175,6 +177,7 @@ export const reducers = () => ({
   pages: combineReducers({
     audioRewards: audioRewardsSlice.reducer,
     collection,
+    deactivateAccount: deactivateAccountReducer,
     feed,
     explore: explorePageReducer,
     exploreCollections: exploreCollectionsReducer,
@@ -190,8 +193,7 @@ export const reducers = () => ({
     trendingUnderground,
     settings,
     notifications,
-    remixes,
-    deactivateAccount: deactivateAccountReducer
+    remixes
   }),
 
   // Solana
@@ -200,7 +202,9 @@ export const reducers = () => ({
   stemsUpload,
 
   // Tipping
-  tipping: tippingReducer
+  tipping: tippingReducer,
+
+  upload
 })
 
 export type CommonState = {
@@ -271,6 +275,7 @@ export type CommonState = {
   pages: {
     audioRewards: ReturnType<typeof audioRewardsSlice.reducer>
     collection: CollectionsPageState
+    deactivateAccount: DeactivateAccountState
     feed: FeedPageState
     explore: ReturnType<typeof explorePageReducer>
     exploreCollections: ReturnType<typeof exploreCollectionsReducer>
@@ -287,13 +292,13 @@ export type CommonState = {
     trendingUnderground: ReturnType<typeof trendingUnderground>
     notifications: ReturnType<typeof notifications>
     remixes: ReturnType<typeof remixes>
-    deactivateAccount: DeactivateAccountState
   }
-
   solana: ReturnType<typeof solanaReducer>
 
   stemsUpload: ReturnType<typeof stemsUpload>
 
   // Tipping
   tipping: ReturnType<typeof tippingReducer>
+
+  upload: UploadState
 }
diff --git a/...eb/src/pages/upload-page/store/actions.js → packages/common/src/store/upload/actions.ts b/...eb/src/pages/upload-page/store/actions.js → packages/common/src/store/upload/actions.ts
@@ -1,3 +1,13 @@
+import { TrackMetadata } from '../../models'
+
+import {
+  ExtendedCollectionMetadata,
+  ExtendedTrackMetadata,
+  Progress,
+  UploadTrack,
+  UploadType
+} from './types'
+
 export const UPLOAD_TRACKS = 'UPLOAD/UPLOAD_TRACKS'
 export const UPLOAD_TRACKS_REQUESTED = 'UPLOAD/UPLOAD_TRACKS_REQUESTED'
 export const UPLOAD_TRACKS_SUCCEEDED = 'UPLOAD/UPLOAD_TRACKS_SUCCEEDED'
@@ -35,15 +45,25 @@ export const COLLECTION_CREATE_PLAYLIST_ID_EXISTS_ERROR =
 export const COLLECTION_POLL_PLAYLIST_TIMEOUT_ERROR =
   'UPLOAD/ERROR/COLLECTION_POLL_PLAYLIST_TIMEOUT'
 
-export const uploadTracks = (tracks, metadata, uploadType, stems) => {
+export const uploadTracks = (
+  tracks: UploadTrack[],
+  metadata?: ExtendedCollectionMetadata,
+  uploadType?: UploadType,
+  stems?: TrackMetadata[]
+) => {
   return { type: UPLOAD_TRACKS, tracks, metadata, uploadType, stems }
 }
 
-export const uploadSingleTrackFailed = (index) => {
+export const uploadSingleTrackFailed = (index: number) => {
   return { type: UPLOAD_SINGLE_TRACK_FAILED, index }
 }
 
-export const uploadTracksRequested = (tracks, metadata, uploadType, stems) => {
+export const uploadTracksRequested = (
+  tracks: UploadTrack[],
+  metadata?: ExtendedCollectionMetadata,
+  uploadType?: UploadType,
+  stems?: TrackMetadata[]
+) => {
   return {
     type: UPLOAD_TRACKS_REQUESTED,
     tracks,
@@ -53,15 +73,18 @@ export const uploadTracksRequested = (tracks, metadata, uploadType, stems) => {
   }
 }
 
-export const uploadTracksSucceeded = (id, trackMetadatas) => {
+export const uploadTracksSucceeded = (
+  id: number,
+  trackMetadatas: ExtendedTrackMetadata[]
+) => {
   return { type: UPLOAD_TRACKS_SUCCEEDED, id, trackMetadatas }
 }
 
 export const uploadTrackFailed = () => {
   return { type: UPLOAD_TRACKS_FAILED }
 }
 
-export const updateProgress = (index, progress) => {
+export const updateProgress = (index: number, progress: Progress) => {
   return { type: UPDATE_PROGRESS, index, progress }
 }
 
@@ -81,12 +104,16 @@ export const toggleMultiTrackNotification = (open = false) => {
   return { type: TOGGLE_MULTI_TRACK_NOTIFICATION, open }
 }
 
-export const upgradeToCreatorError = (error) => ({
+export const upgradeToCreatorError = (error: string) => ({
   type: UPGRADE_TO_CREATOR_ERROR,
   error
 })
 
-export const singleTrackUploadError = (error, phase, trackSizeBytes) => ({
+export const singleTrackUploadError = (
+  error: string,
+  phase?: string,
+  trackSizeBytes?: number
+) => ({
   type: SINGLE_TRACK_UPLOAD_ERROR,
   trackSizeBytes,
   error,
@@ -97,7 +124,12 @@ export const singleTrackTimeoutError = () => ({
   type: SINGLE_TRACK_UPLOAD_TIMEOUT_ERROR
 })
 
-export const multiTrackUploadError = (error, phase, numTracks, isStem) => ({
+export const multiTrackUploadError = (
+  error: string,
+  phase?: string,
+  numTracks?: number,
+  isStem?: boolean
+) => ({
   type: MULTI_TRACK_UPLOAD_ERROR,
   error,
   phase,
@@ -109,7 +141,7 @@ export const multiTrackTimeoutError = () => ({
   type: MULTI_TRACK_TIMEOUT_ERROR
 })
 
-export const creatorNodeUploadError = (error) => ({
+export const creatorNodeUploadError = (error: string) => ({
   type: COLLECTION_CREATOR_NODE_UPLOAD_ERROR,
   error
 })
@@ -118,22 +150,22 @@ export const creatorNodeTimeoutError = () => ({
   type: COLLECTION_CREATOR_NODE_TIMEOUT_ERROR
 })
 
-export const addTrackToChainError = (error) => ({
+export const addTrackToChainError = (error: string) => ({
   type: COLLECTION_ADD_TRACK_TO_CHAIN_ERROR,
   error
 })
 
-export const associateTracksError = (error) => ({
+export const associateTracksError = (error: string) => ({
   type: COLLECTION_ASSOCIATE_TRACKS_ERROR,
   error
 })
 
-export const createPlaylistErrorIDExists = (error) => ({
+export const createPlaylistErrorIDExists = (error: string) => ({
   type: COLLECTION_CREATE_PLAYLIST_ID_EXISTS_ERROR,
   error
 })
 
-export const createPlaylistErrorNoId = (error) => ({
+export const createPlaylistErrorNoId = (error: string) => ({
   type: COLLECTION_CREATE_PLAYLIST_NO_ID_ERROR,
   error
 })

diff --git a/packages/common/src/store/upload/index.ts b/packages/common/src/store/upload/index.ts
@@ -0,0 +1,4 @@
+export { default as uploadReducer } from './reducer'
+export * as uploadActions from './actions'
+export * as uploadSelectors from './selectors'
+export * from './types'
diff --git a/...eb/src/pages/upload-page/store/reducer.js → packages/common/src/store/upload/reducer.ts b/...eb/src/pages/upload-page/store/reducer.js → packages/common/src/store/upload/reducer.ts
@@ -7,10 +7,15 @@ import {
   UPDATE_PROGRESS,
   RESET,
   RESET_STATE,
-  UNDO_RESET_STATE
+  UNDO_RESET_STATE,
+  uploadTracksRequested,
+  uploadTracksSucceeded,
+  updateProgress,
+  uploadSingleTrackFailed
 } from './actions'
+import { ProgressStatus, UploadState } from './types'
 
-const initialState = {
+const initialState: UploadState = {
   openMultiTrackNotification: true,
   tracks: null,
   metadata: null,
@@ -27,27 +32,43 @@ const initialState = {
 
   // Id to take the user to after completing upload.
   // Can be either a track or playlist/album.
-  completionId: null
+  completionId: null,
+  error: false
+}
+
+const initialUploadState = {
+  status: ProgressStatus.UPLOADING,
+  loaded: 0,
+  total: 0
 }
 
 const actionsMap = {
-  [TOGGLE_MULTI_TRACK_NOTIFICATION](state, action) {
+  [TOGGLE_MULTI_TRACK_NOTIFICATION](
+    state: UploadState,
+    action: { open: boolean }
+  ) {
     return {
       ...state,
       openMultiTrackNotification: action.open
     }
   },
-  [UPLOAD_TRACKS_REQUESTED](state, action) {
+  [UPLOAD_TRACKS_REQUESTED](
+    state: UploadState,
+    action: ReturnType<typeof uploadTracksRequested>
+  ) {
     const newState = { ...state }
     newState.uploading = true
     newState.tracks = action.tracks
-    newState.uploadProgress = action.tracks.map((t) => ({}))
-    newState.metadata = action.metadata
-    newState.uploadType = action.uploadType
-    newState.stems = action.stems
+    newState.uploadProgress = action.tracks.map(() => initialUploadState)
+    newState.metadata = action.metadata ?? null
+    newState.uploadType = action.uploadType ?? null
+    newState.stems = action.stems ?? newState.stems
     return newState
   },
-  [UPLOAD_TRACKS_SUCCEEDED](state, action) {
+  [UPLOAD_TRACKS_SUCCEEDED](
+    state: UploadState,
+    action: ReturnType<typeof uploadTracksSucceeded>
+  ) {
     const newState = { ...state }
     newState.uploading = false
     newState.success = true
@@ -57,14 +78,15 @@ const actionsMap = {
 
     // Update the upload tracks with resulting metadata. This is used for TikTok sharing
     if (action.trackMetadatas) {
-      newState.tracks = state.tracks.map((t, i) => ({
-        ...t,
-        metadata: action.trackMetadatas[i]
-      }))
+      newState.tracks =
+        state.tracks?.map((t, i) => ({
+          ...t,
+          metadata: action.trackMetadatas[i]
+        })) ?? null
     }
     return newState
   },
-  [UPLOAD_TRACKS_FAILED](state, action) {
+  [UPLOAD_TRACKS_FAILED](state: UploadState) {
     const newState = { ...state }
     newState.uploading = false
     newState.uploadType = null
@@ -73,43 +95,53 @@ const actionsMap = {
     newState.stems = []
     return newState
   },
-  [UPDATE_PROGRESS](state, action) {
+  [UPDATE_PROGRESS](
+    state: UploadState,
+    action: ReturnType<typeof updateProgress>
+  ) {
     const newState = { ...state }
-    newState.uploadProgress = [...state.uploadProgress]
+    newState.uploadProgress = [...(state.uploadProgress ?? [])]
     newState.uploadProgress[action.index] = {
       ...newState.uploadProgress[action.index],
       ...action.progress
     }
     return newState
   },
-  [RESET](state, action) {
+  [RESET](state: UploadState) {
     return {
       ...initialState,
       openMultiTrackNotification: state.openMultiTrackNotification
     }
   },
-  [RESET_STATE](state) {
+  [RESET_STATE](state: UploadState) {
     return {
       ...state,
       shouldReset: true
     }
   },
-  [UNDO_RESET_STATE](state) {
+  [UNDO_RESET_STATE](state: UploadState) {
     return {
       ...state,
       shouldReset: false
     }
   },
-  [UPLOAD_SINGLE_TRACK_FAILED](state, action) {
+  [UPLOAD_SINGLE_TRACK_FAILED](
+    state: UploadState,
+    action: ReturnType<typeof uploadSingleTrackFailed>
+  ) {
     return {
       ...state,
       failedTrackIndices: [...state.failedTrackIndices, action.index]
     }
   }
 }
 
-export default function upload(state = initialState, action) {
+export default function upload(
+  state = initialState,
+  action: { type: keyof typeof actionsMap }
+) {
   const matchingReduceFunction = actionsMap[action.type]
   if (!matchingReduceFunction) return state
+  // @ts-ignore action type should be a unionType of all actions in actions.ts
   return matchingReduceFunction(state, action)
 }
diff --git a/packages/common/src/store/upload/selectors.ts b/packages/common/src/store/upload/selectors.ts
@@ -0,0 +1,5 @@
+import { CommonState } from '../commonStore'
+
+export const getStems = (state: CommonState) => state.upload.stems
+export const getUploadProgress = (state: CommonState) =>
+  state.upload.uploadProgress