From 4424be2da15786d0f6d557f3f789c00774db56b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20M=C3=A4ki?= <antti@anttimaki.com>
Date: Thu, 14 Nov 2024 11:14:08 +0200
Subject: [PATCH] Add ModListUpdateBanner

The banner will show on top of an empty online mod list, explaining
that the list is empty because splash screen failed to load it. A
one-click option for trying to update the mod list is offered.

This change is adjustment to the fact that the splash screen no longer
stops on errors and user is more likely to reach the manager view with
no mod list loaded into Vuex.
---
 src/components/ModListUpdateBanner.vue | 78 ++++++++++++++++++++++++++
 src/components/views/OnlineModView.vue |  3 +
 2 files changed, 81 insertions(+)
 create mode 100644 src/components/ModListUpdateBanner.vue

diff --git a/src/components/ModListUpdateBanner.vue b/src/components/ModListUpdateBanner.vue
new file mode 100644
index 00000000..b87d0e14
--- /dev/null
+++ b/src/components/ModListUpdateBanner.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import { mixins } from 'vue-class-component';
+import { Component, Watch } from 'vue-property-decorator';
+
+import UtilityMixin from './mixins/UtilityMixin.vue';
+import ManagerInformation from '../_managerinf/ManagerInformation';
+
+@Component({})
+export default class ModListUpdateBanner extends mixins(UtilityMixin) {
+    updateError = '';
+
+    get appName(): string {
+        return ManagerInformation.APP_NAME;
+    }
+
+    get isModListLoaded(): boolean {
+        return this.$store.state.tsMods.modsLastUpdated !== undefined;
+    }
+
+    get isUpdateInProgress(): boolean {
+        return this.$store.state.tsMods.isBackgroundUpdateInProgress;
+    }
+
+    @Watch('isUpdateInProgress')
+    onLoadingProgressChange(newVal: boolean, oldVal: boolean) {
+        // React to background update as well as the manual update from the banner.
+        if (!oldVal && newVal) {
+            this.updateError = '';
+        }
+    }
+
+    async updateModList() {
+        if (this.isUpdateInProgress) {
+            return;
+        }
+
+        this.$store.commit('tsMods/startBackgroundUpdate');
+        this.updateError = '';
+
+        try {
+            // Invalidate hash to force a refresh. Otherwise a scenario where
+            // the latest index hash is already present in IndexedDB but loading
+            // the package list into Vuex store has failed would cause the banner
+            // to just disappear when refreshThunderstoreModList skips the actual
+            // update but updates the timestamp of the hash.
+            await this.$store.dispatch('tsMods/updateIndexHash', 'invalidated');
+            await this.refreshThunderstoreModList();
+        } catch (e) {
+            this.updateError = `${e}`;
+        } finally {
+            this.$store.commit('tsMods/finishBackgroundUpdate');
+        }
+    }
+}
+</script>
+
+<template>
+    <div v-if="!isModListLoaded" id="mod-list-update-banner" class="margin-bottom">
+        <div class="notification is-warning margin-right">
+            <span v-if="isUpdateInProgress">
+                Updating mod list from Thunderstore...
+            </span>
+            <span v-else-if="updateError">
+                Error updating the mod list: {{ updateError }}<br />
+                {{ appName }} will keep trying to update the mod list in the background.
+            </span>
+            <span v-else>
+                It seems like the latest mod list hasn't been loaded from Thunderstore yet.
+                Would you like to
+                <a @click="updateModList">update now</a>?
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/views/OnlineModView.vue b/src/components/views/OnlineModView.vue
index ec0ce555..cba936a2 100644
--- a/src/components/views/OnlineModView.vue
+++ b/src/components/views/OnlineModView.vue
@@ -43,6 +43,7 @@
                 </div>
             </div>
         </div>
+        <ModListUpdateBanner />
         <OnlineModList
             :local-mod-list="localModList"
             :paged-mod-list="pagedThunderstoreModList"
@@ -78,10 +79,12 @@ import OnlineModListProvider from '../../providers/components/loaders/OnlineModL
 import SearchUtils from '../../utils/SearchUtils';
 import PaginationButtons from "../navigation/PaginationButtons.vue";
 import { DeferredInput } from "../all";
+import ModListUpdateBanner from "../ModListUpdateBanner.vue";
 
 @Component({
     components: {
         DeferredInput,
+        ModListUpdateBanner,
         OnlineModList: OnlineModListProvider.provider,
         PaginationButtons,
     }