src/components/Discover/Search.vue

@@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!subs.includes(feed.link)"
+						v-if="!getSubscriptions.includes(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@@ -67,7 +67,7 @@ export default {
 		loading: false,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['subs']),
+		...mapState(useSubscriptions, ['getSubscriptions']),
 	},
 	watch: {
 		value() {

src/components/Feed/Banner.vue

@@ -23,7 +23,7 @@
 					<SafeHtml :source="description" />
 				</div>
 				<NcAppNavigationNew
-					v-if="!subs.includes(url)"
+					v-if="!getSubscriptions.includes(url)"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@@ -79,7 +79,7 @@ export default {
 		},
 	},
 	computed: {
-		...mapState(useSubscriptions, ['subs']),
+		...mapState(useSubscriptions, ['getSubscriptions']),
 		url() {
 			return decodeUrl(this.$route.params.url)
 		},

src/components/Feed/Favorites.vue

@@ -53,9 +53,9 @@ export default {
 		loading: true,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['favs']),
+		...mapState(useSubscriptions, ['getFavorites']),
 		currentFavoriteData() {
-			return this.favs.find((fav) => fav.url === this.url)
+			return this.getFavorites.find((fav) => fav.url === this.url)
 		},
 	},
 	async mounted() {

src/components/Sidebar/Subscription.vue

@@ -75,9 +75,9 @@ export default {
 		feed: null,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['favs']),
+		...mapState(useSubscriptions, ['getFavorites']),
 		isFavorite() {
-			return this.favs.map((fav) => fav.url).includes(this.url)
+			return this.getFavorites.map((fav) => fav.url).includes(this.url)
 		},
 	},
 	async mounted() {
@@ -131,7 +131,7 @@ export default {
 		},
 		switchFavorite(value) {
 			if (value) {
-				if (this.favs.length >= 10) {
+				if (this.getFavorites.length >= 10) {
 					showError(t('repod', 'You can only have 10 favorites'))
 					return
 				}

src/components/Sidebar/Subscriptions.vue

@@ -12,15 +12,13 @@
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
 					<Subscription
-						v-for="url of favs
+						v-for="url of getFavorites.map((fav) => fav.url)"
-							.sort((fav) => fav.lastPub)
-							.map((fav) => fav.url)
-							.filter((url) => subs.includes(url))"
 						:key="url"
 						:url="url" />
 					<Subscription
-						v-for="url of subs.filter(
+						v-for="url of getSubscriptions.filter(
-							(sub) => !favs.map((fav) => fav.url).includes(sub),
+							(sub) =>
+								!getFavorites.map((fav) => fav.url).includes(sub),
 						)"
 						:key="url"
 						:url="url" />
@@ -64,7 +62,7 @@ export default {
 		loading: true,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['subs', 'favs']),
+		...mapState(useSubscriptions, ['getSubscriptions', 'getFavorites']),
 	},
 	async mounted() {
 		try {

src/store/subscriptions.js

@@ -8,6 +8,16 @@ export const useSubscriptions = defineStore('subscriptions', {
 		subs: [],
 		favs: [],
 	}),
+	getters: {
+		getSubscriptions: (state) => {
+			return state.subs
+		},
+		getFavorites: (state) => {
+			return state.favs
+				.filter((fav) => state.subs.includes(fav.url))
+				.sort((fav) => fav.lastPub)
+		},
+	},
 	actions: {
 		async fetch() {
 			const metrics = await axios.get(

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<AppContent>
 		<EmptyContent
-			v-if="!favs.length"
+			v-if="!getFavorites.length"
 			class="empty"
 			:description="
 				t('repod', 'Pin some subscriptions to see their latest updates')
@@ -11,10 +11,8 @@
 				<StarOffIcon :size="20" />
 			</template>
 		</EmptyContent>
-		<ul v-if="favs.length">
+		<ul v-if="getFavorites.length">
-			<li
+			<li v-for="url in getFavorites.map((fav) => fav.url)" :key="url">
-				v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
-				:key="url">
 				<Favorites :url="url" />
 			</li>
 		</ul>
@@ -38,7 +36,7 @@ export default {
 		StarOffIcon,
 	},
 	computed: {
-		...mapState(useSubscriptions, ['favs']),
+		...mapState(useSubscriptions, ['getFavorites']),
 	},
 }
 </script>