Rework subscriptionlistitem component

src/components/SubscriptionListItem.vue

@@ -0,0 +1,54 @@
+<template>
+	<NcAppNavigationItem :loading="loading"
+		:title="title ?? subscriptionUrl">
+		<template #icon>
+			<img v-if="imageUrl"
+				:src="imageUrl"
+				:alt="title"
+				width="20"
+				height="20">
+			<Alert v-if="failed" />
+		</template>
+	</NcAppNavigationItem>
+</template>
+
+<script>
+import Alert from 'vue-material-design-icons/Alert.vue'
+import { NcAppNavigationItem } from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'SubscriptionListItem',
+	components: {
+		Alert,
+		NcAppNavigationItem,
+	},
+	props: {
+		subscriptionUrl: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			failed: false,
+			loading: true,
+			title: null,
+			imageUrl: null,
+		}
+	},
+	async mounted() {
+		try {
+			const podcastData = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.subscriptionUrl }))
+			this.title = podcastData.data.data.title
+			this.imageUrl = podcastData.data.data.imageUrl
+		} catch (e) {
+			this.failed = true
+			console.error(e)
+		} finally {
+			this.loading = false
+		}
+	},
+}
+</script>

src/modules/subscriptions.js

@@ -6,45 +6,15 @@ export const subscriptions = {
 	state: {
 		subscriptions: [],
 	},
-	getters: {
-		sortedSubscriptions: (state) => state.subscriptions.concat().sort((a, b) => {
-			if (a.title && b.title) return a.title.localeCompare(b.title)
-			return a.id - b.id
-		}),
-	},
 	mutations: {
-		reset: (state) => {
-			state.subscriptions = []
-		},
-		add: (state, subscription) => {
-			const subscriptionId = state.subscriptions.findIndex(sub => sub.url === subscription.url)
-
-			if (subscriptionId === -1) {
-				state.subscriptions.push(subscription)
-			} else {
-				state.subscriptions[subscriptionId] = subscription
-			}
+		set: (state, subscriptions) => {
+			state.subscriptions = subscriptions
 		},
 	},
 	actions: {
 		fetch: async (context) => {
-			context.commit('reset')
 			const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
-			for (const subscriptionId in metrics.data.subscriptions) {
-				context.commit('add', {
-					id: subscriptionId,
-					url: metrics.data.subscriptions[subscriptionId].url,
-					loading: true,
-				})
-			}
-			for (const subscription of context.state.subscriptions) {
-				try {
-					const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
-					context.commit('add', { ...podcasts.data.data, ...subscription, ...{ loading: false } })
-				} catch (e) {
-					console.error(e)
-				}
-			}
+			context.commit('set', metrics.data.subscriptions.map(sub => sub.url))
 		},
 	},
 }

src/views/Index.vue

@@ -11,17 +11,9 @@
 				</router-link>
 				<NcLoadingIcon v-if="loading" />
 				<ul v-if="!loading">
-					<NcAppNavigationItem v-for="subscription in subscriptions"
-						:key="subscription.id"
-						:loading="subscription.loading"
-						:title="subscription.title ?? subscription.url">
-						<template #icon>
-							<img :src="subscription.imageUrl"
-								:alt="subscription.title"
-								width="20"
-								height="20">
-						</template>
-					</NcAppNavigationItem>
+					<SubscriptionListItem v-for="subscriptionUrl of subscriptions"
+						:key="subscriptionUrl"
+						:subscription-url="subscriptionUrl" />
 				</ul>
 			</NcAppContentList>
 		</NcAppNavigation>
@@ -36,11 +28,11 @@ import {
 	NcAppContent,
 	NcAppContentList,
 	NcAppNavigation,
-	NcAppNavigationItem,
 	NcAppNavigationNew,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import SubscriptionListItem from '../components/SubscriptionListItem.vue'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
@@ -49,10 +41,10 @@ export default {
 		NcAppContent,
 		NcAppContentList,
 		NcAppNavigation,
-		NcAppNavigationItem,
 		NcAppNavigationNew,
 		NcLoadingIcon,
 		Plus,
+		SubscriptionListItem,
 	},
 	data() {
 		return {
@@ -61,7 +53,7 @@ export default {
 	},
 	computed: {
 		subscriptions() {
-			return this.$store.getters['subscriptions/sortedSubscriptions']
+			return this.$store.state.subscriptions.subscriptions
 		},
 	},
 	async mounted() {
@@ -70,8 +62,9 @@ export default {
 		} catch (e) {
 			console.error(e)
 			showError(t('Could not fetch subscriptions'))
-		}
+		} finally {
 			this.loading = false
+		}
 	},
 }
 </script>