Queue downloads seperately so we don't overwhelm the app

src/store/downloads/actions.ts

@@ -8,6 +8,7 @@ export const downloadAdapter = createEntityAdapter<DownloadEntity>({
     selectId: (entity) => entity.id,
 });
 
+export const queueTrackForDownload = createAction<EntityId>('download/queue');
 export const initializeDownload = createAction<{ id: EntityId, size?: number, jobId?: number }>('download/initialize');
 export const progressDownload = createAction<{ id: EntityId, progress: number, jobId?: number }>('download/progress');
 export const completeDownload = createAction<{ id: EntityId, location: string, size?: number }>('download/complete');
@@ -46,7 +47,7 @@ export const downloadTrack = createAsyncThunk(
 );
 
 export const removeDownloadedTrack = createAsyncThunk(
-    '/downloads/track/remove',
+    '/downloads/remove/track',
     async(id: EntityId) => {
         return unlink(`${DocumentDirectoryPath}/${id}.mp3`);
     }

src/store/downloads/index.ts

@@ -1,15 +1,25 @@
 import { createSlice, Dictionary, EntityId } from '@reduxjs/toolkit';
-import { completeDownload, downloadAdapter, failDownload, initializeDownload, progressDownload, removeDownloadedTrack } from './actions';
+import {
+    completeDownload,
+    downloadAdapter,
+    failDownload,
+    initializeDownload,
+    progressDownload,
+    queueTrackForDownload,
+    removeDownloadedTrack
+} from './actions';
 import { DownloadEntity } from './types';
 
 interface State {
     entities: Dictionary<DownloadEntity>;
     ids: EntityId[];
+    queued: EntityId[];
 }
 
 export const initialState: State = {
     entities: {},
     ids: [],
+    queued: [],
 };
 
 const downloads = createSlice({
@@ -32,6 +42,7 @@ const downloads = createSlice({
             });
         });
         builder.addCase(completeDownload, (state, action) => {
+            // Update the item to be completed
             downloadAdapter.updateOne(state, {
                 id: action.payload.id,
                 changes: {
@@ -40,6 +51,11 @@ const downloads = createSlice({
                     isComplete: true,
                 }
             });
+
+            // Remove the item from the queue
+            const newSet = new Set(state.queued);
+            newSet.delete(action.payload.id);
+            state.queued = Array.from(newSet);
         });
         builder.addCase(failDownload, (state, action) => {
             downloadAdapter.updateOne(state, {
@@ -52,7 +68,17 @@ const downloads = createSlice({
             });
         });
         builder.addCase(removeDownloadedTrack.fulfilled, (state, action) => {
+            // Remove the download if it exists
             downloadAdapter.removeOne(state, action.meta.arg);
+
+            // Remove the item from the queue if it is in there
+            const newSet = new Set(state.queued);
+            newSet.delete(action.meta.arg);
+            state.queued = Array.from(newSet);
+        });
+        builder.addCase(queueTrackForDownload, (state, action) => {
+            const newSet = new Set(state.queued).add(action.payload);
+            state.queued = Array.from(newSet);
         });
     },
 });

src/store/index.ts

@@ -9,10 +9,10 @@ import music, { initialState as musicInitialState } from './music';
 import downloads, { initialState as downloadsInitialState } from './downloads';
 import { PersistState } from 'redux-persist/es/types';
 
-const persistConfig: PersistConfig<AppState> = {
+const persistConfig: PersistConfig<Omit<AppState, '_persist'>> = {
     key: 'root',
     storage: AsyncStorage,
-    version: 1,
+    version: 2,
     stateReconciler: autoMergeLevel2,
     migrate: createMigrate({
         // @ts-expect-error migrations are poorly typed
@@ -23,6 +23,16 @@ const persistConfig: PersistConfig<AppState> = {
                 downloads: downloadsInitialState,
                 music: musicInitialState
             };
+        },
+        // @ts-expect-error migrations are poorly typed
+        2: (state: AppState) => {
+            return {
+                ...state,
+                downloads: {
+                    ...state.downloads,
+                    queued: []
+                }
+            };
         }
     })
 };
@@ -48,7 +58,7 @@ const store = configureStore({
     ),
 });
 
-export type AppState = ReturnType<typeof reducers>;
+export type AppState = ReturnType<typeof reducers> & { _persist: PersistState };
 export type AppDispatch = typeof store.dispatch;
 export type AsyncThunkAPI = { state: AppState, dispatch: AppDispatch };
 export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;