WIP: PoC of mod download/install through vuex store

src/components/views/DownloadModModal.vue

@@ -220,6 +220,11 @@ let assignId = 0;
             return this.$store.state.modals.isDownloadModModalOpen;
         }
 
+        @Watch('$store.state.modDownload.activeDownload')
+        async updateProgress() {
+            console.log(this.$store.state.modDownload.activeDownload);
+        }
+
         @Watch('$store.state.modals.downloadModModalMod')
         async getModVersions() {
             this.currentVersion = null;
@@ -327,46 +332,14 @@ let assignId = 0;
         }
 
         downloadHandler(tsMod: ThunderstoreMod, tsVersion: ThunderstoreVersion) {
-            this.closeModal();
-            const currentAssignId = assignId++;
-            const progressObject = {
-                progress: 0,
-                initialMods: [`${tsMod.getName()} (${tsVersion.getVersionNumber().toString()})`],
-                modName: '',
-                assignId: currentAssignId,
-                failed: false,
-            };
-            this.downloadObject = progressObject;
-            DownloadModModal.allVersions.push([currentAssignId, this.downloadObject]);
-            this.downloadingMod = true;
-            setTimeout(() => {
-                ThunderstoreDownloaderProvider.instance.download(this.profile.asImmutableProfile(), tsMod, tsVersion, this.ignoreCache, (progress: number, modName: string, status: number, err: R2Error | null) => {
-                    const assignIndex = DownloadModModal.allVersions.findIndex(([number, val]) => number === currentAssignId);
-                    if (status === StatusEnum.FAILURE) {
-                        if (err !== null) {
-                            this.downloadingMod = false;
-                            const existing = DownloadModModal.allVersions[assignIndex]
-                            existing[1].failed = true;
-                            this.$set(DownloadModModal.allVersions, assignIndex, [currentAssignId, existing[1]]);
-                            DownloadModModal.addSolutionsToError(err);
-                            this.$store.commit('error/handleError', err);
-                            return;
-                        }
-                    } else if (status === StatusEnum.PENDING) {
-                        const obj = {
-                            progress: progress,
-                            initialMods: [`${tsMod.getName()} (${tsVersion.getVersionNumber().toString()})`],
-                            modName: modName,
-                            assignId: currentAssignId,
-                            failed: false,
-                        }
-                        if (this.downloadObject!.assignId === currentAssignId) {
-                            this.downloadObject = Object.assign({}, obj);
-                        }
-                        this.$set(DownloadModModal.allVersions, assignIndex, [currentAssignId, obj]);
-                    }
-                }, this.downloadCompletedCallback);
-            }, 1);
+            const tsCombo: ThunderstoreCombo = new ThunderstoreCombo();
+            tsCombo.setMod(tsMod);
+            tsCombo.setVersion(tsVersion);
+            this.$store.dispatch(
+                'modDownload/downloadAndInstallMod',
+                { profile: this.profile.asImmutableProfile(), mods: [tsCombo] }
+            );
+            console.log("downloadAndInstallMod dispatched");
         }
 
         async downloadCompletedCallback(downloadedMods: ThunderstoreCombo[]) {

src/store/index.ts

@@ -13,6 +13,7 @@ import GameManager from '../model/game/GameManager';
 import R2Error from '../model/errors/R2Error';
 import { getModLoaderPackageNames } from '../r2mm/installing/profile_installers/ModLoaderVariantRecord';
 import ManagerSettings from '../r2mm/manager/ManagerSettings';
+import ModDownloadModule from "../store/modules/ModDownloadModule";
 
 Vue.use(Vuex);
 
@@ -128,6 +129,7 @@ export const store = {
         profile: ProfileModule,
         profiles: ProfilesModule,
         tsMods: TsModsModule,
+        modDownload: ModDownloadModule,
     },
 
     // enable strict mode (adds overhead!)

src/store/modules/ModDownloadModule.ts

@@ -0,0 +1,72 @@
+import { ActionTree, GetterTree } from 'vuex';
+
+import { State as RootState } from '../index';
+import StatusEnum from '../../model/enums/StatusEnum';
+import { ImmutableProfile } from '../../model/Profile';
+import ThunderstoreCombo from '../../model/ThunderstoreCombo';
+import ThunderstoreDownloaderProvider from '../../providers/ror2/downloading/ThunderstoreDownloaderProvider';
+
+interface Progress {
+    progress: number;
+    status: number; // StatusEnum
+}
+
+interface ModProgressItem {
+    mod: ThunderstoreCombo;
+    installProgress: Progress;
+    downloadProgress: Progress;
+}
+
+interface State {
+    allDownloads: ModProgressItem[];
+}
+
+/**
+ * State for Mod Downloadning/Installation.
+ */
+export default {
+    namespaced: true,
+
+    state: (): State => ({
+        allDownloads: [],
+    }),
+
+    getters: <GetterTree<State, RootState>>{
+        activeDownload(state): ModProgressItem {
+            return state.allDownloads.slice(-1)[0]; // Last element of the array
+        },
+        allDownloads(state): ModProgressItem[] {
+            return state.allDownloads;
+        },
+    },
+    mutations: {},
+    actions: <ActionTree<State, RootState>>{
+        async downloadAndInstallMod(
+            {dispatch, getters, state},
+            params: {
+                profile: ImmutableProfile,
+                mods: ThunderstoreCombo[],
+            }
+        ) {
+            params.mods.forEach((mod) => {
+                state.allDownloads.push({
+                    mod: mod,
+                    installProgress: { progress: 0, status: StatusEnum.PENDING },
+                    downloadProgress: { progress: 0, status: StatusEnum.PENDING }
+                });
+                ThunderstoreDownloaderProvider.instance.download(
+                    params.profile,
+                    mod.getMod(),
+                    mod.getVersion(),
+                    false,
+                    (progress, modName, status) => {
+                        const index = state.allDownloads.findIndex((modProgressItem) => modProgressItem.mod.getMod().getFullName() === modName);
+                        state.allDownloads[index].downloadProgress = { progress: progress, status: status };
+                    },
+                    () => {}
+                );
+
+            })
+        },
+    },
+}