Move download progress modal open state management to vuex store

ebkr · Jan 8, 2025 · f5840ad · f5840ad
1 parent a94b557
commit f5840ad
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/src/components/mixins/DownloadMixin.vue b/src/components/mixins/DownloadMixin.vue
@@ -13,8 +13,6 @@ import { installModsAndResolveConflicts } from "../../utils/ProfileUtils";
 @Component
 export default class DownloadMixin extends Vue {
 
-    downloadingMod: boolean = false;
-
     get activeGame(): Game {
         return this.$store.state.activeGame;
     }

diff --git a/src/components/views/DownloadModModal.vue b/src/components/views/DownloadModModal.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div id='downloadProgressModal' :class="['modal', {'is-active':downloadingMod}]" v-if="$store.getters['download/currentDownload'] !== null">
-            <div class="modal-background" @click="downloadingMod = false;"></div>
+        <div id='downloadProgressModal' :class="['modal', {'is-active':$store.state.download.isModProgressModalOpen}]" v-if="$store.getters['download/currentDownload'] !== null">
+            <div class="modal-background" @click="$store.commit('download/setIsModProgressModalOpen', false);"></div>
             <div class='modal-content'>
                 <div class='notification is-info'>
                     <h3 class='title'>Downloading {{$store.getters['download/currentDownload'].modName}}</h3>
@@ -13,7 +13,7 @@
                     />
                 </div>
             </div>
-            <button class="modal-close is-large" aria-label="close" @click="downloadingMod = false;"></button>
+            <button class="modal-close is-large" aria-label="close" @click="$store.commit('download/setIsModProgressModalOpen', false);"></button>
         </div>
         <DownloadModVersionSelectModal @download-mod="downloadHandler" />
         <UpdateAllInstalledModsModal />
@@ -116,12 +116,12 @@ import ProfileModList from '../../r2mm/mods/ProfileModList';
                 [`${tsMod.getName()} (${tsVersion.getVersionNumber().toString()})`]
             );
 
-            this.downloadingMod = true;
+            this.$store.commit('download/setIsModProgressModalOpen', true);
             setTimeout(() => {
                 ThunderstoreDownloaderProvider.instance.download(this.profile.asImmutableProfile(), tsMod, tsVersion, this.ignoreCache, (progress: number, modName: string, status: number, err: R2Error | null) => {
                     try {
                         if (status === StatusEnum.FAILURE) {
-                            this.downloadingMod = false;
+                            this.$store.commit('download/setIsModProgressModalOpen', false);
                             this.$store.commit('download/updateDownload', {assignId, failed: true});
                             if (err !== null) {
                                 DownloadMixin.addSolutionsToError(err);
@@ -135,7 +135,7 @@ import ProfileModList from '../../r2mm/mods/ProfileModList';
                     }
                 }, async (downloadedMods) => {
                     await this.downloadCompletedCallback(downloadedMods);
-                    this.downloadingMod = false;
+                    this.$store.commit('download/setIsModProgressModalOpen', false);
                 });
             }, 1);
         }

diff --git a/src/components/views/UpdateAllInstalledModsModal.vue b/src/components/views/UpdateAllInstalledModsModal.vue
@@ -48,11 +48,11 @@ export default class UpdateAllInstalledModsModal extends mixins(DownloadMixin)
             modsWithUpdates.map(value => `${value.getMod().getName()} (${value.getVersion().toString()})`)
         );
 
-        this.downloadingMod = true;
+        this.$store.commit('download/setIsModProgressModalOpen', true);
         ThunderstoreDownloaderProvider.instance.downloadLatestOfAll(modsWithUpdates, this.ignoreCache, (progress: number, modName: string, status: number, err: R2Error | null) => {
             try {
                 if (status === StatusEnum.FAILURE) {
-                    this.downloadingMod = false;
+                    this.$store.commit('download/setIsModProgressModalOpen', false);
                     this.$store.commit('download/updateDownload', {assignId, failed: true});
                     if (err !== null) {
                         DownloadMixin.addSolutionsToError(err);
@@ -66,7 +66,7 @@ export default class UpdateAllInstalledModsModal extends mixins(DownloadMixin)
             }
         }, async (downloadedMods) => {
             await this.downloadCompletedCallback(downloadedMods);
-            this.downloadingMod = false;
+            this.$store.commit('download/setIsModProgressModalOpen', false);
         });
     }
 }

diff --git a/src/store/modules/DownloadModule.ts b/src/store/modules/DownloadModule.ts
@@ -20,6 +20,7 @@ interface UpdateObject {
 
 interface State {
     allDownloads: DownloadProgress[],
+    isModProgressModalOpen: boolean,
 }
 
 /**
@@ -30,6 +31,7 @@ export const DownloadModule = {
 
     state: (): State => ({
         allDownloads: [],
+        isModProgressModalOpen: false,
     }),
 
     actions: <ActionTree<State, RootState>>{
@@ -79,5 +81,8 @@ export const DownloadModule = {
             newDownloads[index] = {...newDownloads[index], ...update};
             state.allDownloads = newDownloads;
         },
+        setIsModProgressModalOpen(state: State, isModProgressModalOpen: boolean) {
+            state.isModProgressModalOpen = isModProgressModalOpen;
+        }
     },
 }