Add showCurrentCdn to R2Error and use it when network errors occur

* Remove the closeModal boolean flag, as it wasn't really needed
* Make CdnProvider more reactive, to update the value in the errormodal

Author: VilppeRiskidev

src/components/modals/ErrorModal.vue

@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import R2Error from '../../model/errors/R2Error';
+import CdnProvider from '../../providers/generic/connection/CdnProvider';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
-import { computed, ComputedRef } from 'vue';
+import { computed } from 'vue';
 
 const store = getStore<State>();
 
-const error: ComputedRef<R2Error | null> = computed(() => store.state.error.error);
+const error = computed(() => store.state.error.error);
+const currentCdnName = computed(() => CdnProvider.current.label);
+
 const name = computed(() => error.value ? error.value.name : '');
 const message = computed(() => error.value ? error.value.message : '');
 const solution = computed(() => error.value ? error.value.solution : '');
+const showCurrentCdn = computed(() => error.value ? error.value.showCurrentCdn : false);
 
 function close() {
     store.commit('error/discardError');
@@ -26,7 +29,7 @@ function close() {
                 <p>{{message}}</p>
                 <div v-if="solution">
                     <h5 class="title is-5">Suggestion</h5>
-                    <p>{{solution}}</p>
+                    <p>{{solution + (showCurrentCdn ? ` Current CDN: ${currentCdnName}` : '')}}</p>
                 </div>
                 <div class="mt-3 text-right" v-if="error.actions">
                     <button 

src/components/profiles-modals/ImportProfileModal.vue

@@ -8,6 +8,7 @@ import ThunderstoreCombo from "../../model/ThunderstoreCombo";
 import InteractionProvider from "../../providers/ror2/system/InteractionProvider";
 import { ProfileImportExport } from "../../r2mm/mods/ProfileImportExport";
 import { sleep } from "../../utils/Common";
+import { addSolutionsToError } from "../../utils/DownloadUtils";
 import * as ProfileUtils from "../../utils/ProfileUtils";
 import { ModalCard } from "../all";
 import OnlineModList from "../views/OnlineModList.vue";
@@ -106,6 +107,7 @@ async function onProfileCodeEntered() {
         await validateProfileFile([filepath]);
     } catch (e: any) {
         const err = R2Error.fromThrownValue(e, 'Failed to import profile');
+        addSolutionsToError(err);
         store.commit('error/handleError', err);
     } finally {
         importViaCodeInProgress.value = false;
@@ -242,7 +244,9 @@ async function importProfile(targetProfileName: string, mods: ExportMod[], zipPa
     } catch (e) {
         await store.dispatch('profiles/ensureProfileExists');
         closeModal();
-        store.commit('error/handleError', R2Error.fromThrownValue(e));
+        const r2Error = R2Error.fromThrownValue(e);
+        addSolutionsToError(r2Error);
+        store.commit('error/handleError', r2Error);
         return;
     }
 

src/model/errors/R2Error.ts

@@ -1,7 +1,6 @@
 interface Action {
     function: () => Promise<void>;
     label: string;
-    closeModal?: boolean;
 }
 
 export default class R2Error extends Error {
@@ -11,6 +10,7 @@ export default class R2Error extends Error {
     public solution: string;
     public errorReferenceString: string | undefined;
     public actions: Action[] = [];
+    public showCurrentCdn: boolean = false;
 
     public constructor(name: string, message: string, solution: string | null = null) {
         super(message);

src/providers/generic/connection/CdnProvider.ts

@@ -1,3 +1,5 @@
+import { ref } from 'vue';
+
 import R2Error from '../../../model/errors/R2Error';
 import { getAxiosWithTimeouts } from '../../../utils/HttpUtils';
 import { addOrReplaceSearchParams, replaceHost } from '../../../utils/UrlUtils';
@@ -20,13 +22,13 @@ const CONNECTION_ERROR = new R2Error(
 
 export default class CdnProvider {
     private static axios = getAxiosWithTimeouts(5000, 5000);
-    private static preferredCdn = "";
+    private static preferredCdn = ref("");
 
     public static get current() {
-        const i = CDNS.findIndex((cdn) => cdn === CdnProvider.preferredCdn);
+        const i = CDNS.findIndex((cdn) => cdn === CdnProvider.preferredCdn.value);
         return {
             label: [-1, 0].includes(i) ? "Main CDN" : `Mirror #${i}`,
-            url: CdnProvider.preferredCdn
+            url: CdnProvider.preferredCdn.value
         };
     }
 
@@ -49,7 +51,7 @@ export default class CdnProvider {
             }
 
             if (res.status === 200) {
-                CdnProvider.preferredCdn = cdn;
+                CdnProvider.preferredCdn.value = cdn;
                 return;
             }
         };
@@ -58,24 +60,24 @@ export default class CdnProvider {
     }
 
     public static replaceCdnHost(url: string) {
-        return CdnProvider.preferredCdn
-            ? replaceHost(url, CdnProvider.preferredCdn)
+        return CdnProvider.preferredCdn.value
+            ? replaceHost(url, CdnProvider.preferredCdn.value)
             : url;
     }
 
     public static addCdnQueryParameter(url: string) {
-        return CdnProvider.preferredCdn
-            ? addOrReplaceSearchParams(url, `cdn=${CdnProvider.preferredCdn}`)
+        return CdnProvider.preferredCdn.value
+            ? addOrReplaceSearchParams(url, `cdn=${CdnProvider.preferredCdn.value}`)
             : url;
     }
 
     public static togglePreferredCdn() {
-        let currentIndex = CDNS.findIndex((cdn) => cdn === CdnProvider.preferredCdn);
+        let currentIndex = CDNS.findIndex((cdn) => cdn === CdnProvider.preferredCdn.value);
 
         if (currentIndex === -1) {
             currentIndex = 0;
         }
 
-        CdnProvider.preferredCdn = CDNS[currentIndex + 1] || CDNS[0];
+        CdnProvider.preferredCdn.value = CDNS[currentIndex + 1] || CDNS[0];
     }
 }

src/store/modules/DownloadModule.ts

@@ -137,8 +137,10 @@ export const DownloadModule = {
                     if (profile.getProfilePath() === rootGetters['profile/activeProfile'].getProfilePath()) {
                         r2Error.addAction({
                             label: 'Retry',
-                            function: () => dispatch('retryDownloadById', downloadId),
-                            closeModal: true
+                            function: async () => {
+                                commit('error/discardError', null, { root: true });
+                                await dispatch('retryDownloadById', downloadId);
+                            },
                         });
                     }
                 }
@@ -155,13 +157,7 @@ export const DownloadModule = {
             progressCallback: (progress: number, modName: string, status: number, err: R2Error | null) => void
         }) {
             const { combos, progressCallback } = params;
-            try {
-                await ThunderstoreDownloaderProvider.instance.download(combos, state.ignoreCache, progressCallback);
-            } catch (e) {
-                const r2Error = R2Error.fromThrownValue(e);
-                DownloadUtils.addSolutionsToError(r2Error, true);
-                throw r2Error;
-            }
+            await ThunderstoreDownloaderProvider.instance.download(combos, state.ignoreCache, progressCallback);
         },
 
         async _download({state, commit, dispatch}, params: {

src/utils/DownloadUtils.ts

@@ -1,7 +1,7 @@
 import CdnProvider from "../providers/generic/connection/CdnProvider";
 import R2Error from "../model/errors/R2Error";
 
-export function addSolutionsToError(err: R2Error, closeModalOnToggleCDN: boolean = false): void {
+export function addSolutionsToError(err: R2Error): void {
     // Sanity check typing.
     if (!(err instanceof R2Error)) {
         return;
@@ -12,10 +12,10 @@ export function addSolutionsToError(err: R2Error, closeModalOnToggleCDN: boolean
         err.name.includes("System.Net.WebException")
     ) {
         err.solution = "Try toggling the preferred Thunderstore CDN by clicking the button below (or in the settings).";
+        err.showCurrentCdn = true;
         err.addAction({
             label: 'Toggle CDN',
             function: async () => CdnProvider.togglePreferredCdn(),
-            closeModal: closeModalOnToggleCDN
         });
     }