Merge pull request #48871 from nextcloud/fix/app-store-reactivity

fix(app-store): Update update count in navigation

apps/settings/src/components/AppList.vue

@@ -140,9 +140,11 @@
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { useAppsStore } from '../store/apps-store'
 import AppItem from './AppList/AppItem.vue'
 import pLimit from 'p-limit'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import AppManagement from '../mixins/AppManagement'
 
 export default {
 	name: 'AppList',
@@ -151,13 +153,22 @@ export default {
 		NcButton,
 	},
 
+	mixins: [AppManagement],
+
 	props: {
 		category: {
 			type: String,
 			required: true,
 		},
 	},
 
+	setup() {
+		const store = useAppsStore()
+		return {
+			store,
+		}
+	},
+
 	data() {
 		return {
 			search: '',
@@ -304,8 +315,9 @@ export default {
 			const limit = pLimit(1)
 			this.apps
 				.filter(app => app.update)
-				.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id })),
-				)
+				.map((app) => limit(() => {
+					this.update(app.id)
+				}))
 		},
 	},
 }

apps/settings/src/components/AppList/AppItem.vue

@@ -111,6 +111,8 @@
 </template>
 
 <script>
+import { useAppsStore } from '../../store/apps-store.js'
+
 import AppScore from './AppScore.vue'
 import AppLevelBadge from './AppLevelBadge.vue'
 import AppManagement from '../../mixins/AppManagement.js'
@@ -151,6 +153,10 @@ export default {
 			default: false,
 		},
 	},
+	setup() {
+		const store = useAppsStore()
+		return { store }
+	},
 	data() {
 		return {
 			isSelected: false,

apps/settings/src/mixins/AppManagement.js

@@ -121,8 +121,11 @@ export default {
 		},
 		update(appId) {
 			this.$store.dispatch('updateApp', { appId })
-				.then((response) => { rebuildNavigation() })
 				.catch((error) => { showError(error) })
+				.then(() => {
+					rebuildNavigation()
+					this.store.updateCount = Math.max(this.store.updateCount - 1, 0)
+				})
 		},
 	},
 }

apps/settings/src/views/AppStoreNavigation.vue

@@ -35,12 +35,12 @@
 					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.disabled" />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem v-if="updateCount > 0"
+			<NcAppNavigationItem v-if="store.updateCount > 0"
 				id="app-category-updates"
 				:to="{ name: 'apps-category', params: { category: 'updates' } }"
 				:name="APPS_SECTION_ENUM.updates">
 				<template #counter>
-					<NcCounterBubble>{{ updateCount }}</NcCounterBubble>
+					<NcCounterBubble>{{ store.updateCount }}</NcCounterBubble>
 				</template>
 				<template #icon>
 					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.updates" />
@@ -114,7 +114,6 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import APPSTORE_CATEGORY_ICONS from '../constants/AppstoreCategoryIcons.ts'
 
-const updateCount = loadState<number>('settings', 'appstoreUpdateCount', 0)
 const appstoreEnabled = loadState<boolean>('settings', 'appstoreEnabled', true)
 const developerDocsUrl = loadState<string>('settings', 'appstoreDeveloperDocs', '')