From 1a9ae3c5c792bdbef3e2c0a96260d9b65184622d Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Fri, 7 Jul 2023 18:38:53 +0200
Subject: [PATCH] First component to use vuex

---
 package-lock.json            | 11 +++++++-
 package.json                 |  3 +-
 src/components/AddRss.vue    |  5 ++--
 src/main.js                  |  7 +++++
 src/modules/index.js         |  5 ++++
 src/modules/subscriptions.js | 53 ++++++++++++++++++++++++++++++++++++
 src/views/Discover.vue       |  2 +-
 src/views/Index.vue          | 45 ++++--------------------------
 8 files changed, 85 insertions(+), 46 deletions(-)
 create mode 100644 src/modules/index.js
 create mode 100644 src/modules/subscriptions.js

diff --git a/package-lock.json b/package-lock.json
index d561175..5b9d984 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
         "vue": "^2",
         "vue-fragment": "^1.6.0",
         "vue-material-design-icons": "^5.2.0",
-        "vue-router": "^3"
+        "vue-router": "^3",
+        "vuex": "^3"
       },
       "devDependencies": {
         "@nextcloud/babel-config": "^1.0.0",
@@ -13066,6 +13067,14 @@
         "vue": "^2.5.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 393b3a5..73918ef 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "vue": "^2",
     "vue-fragment": "^1.6.0",
     "vue-material-design-icons": "^5.2.0",
-    "vue-router": "^3"
+    "vue-router": "^3",
+    "vuex": "^3"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
diff --git a/src/components/AddRss.vue b/src/components/AddRss.vue
index 3782b7e..5b6b70b 100644
--- a/src/components/AddRss.vue
+++ b/src/components/AddRss.vue
@@ -1,8 +1,8 @@
 <template>
 	<ul>
-		<NcAppNavigationNewItem :title="t('', 'Add a RSS link')">
+		<NcAppNavigationNewItem :title="t('Add a RSS link')">
 			<template #icon>
-				<Plus size="20" />
+				<Plus :size="20" />
 			</template>
 		</NcAppNavigationNewItem>
 	</ul>
@@ -19,7 +19,6 @@ export default {
 		Plus,
 	},
 	methods: {
-
 	},
 }
 </script>
diff --git a/src/main.js b/src/main.js
index f9d2b10..d66643d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
+import Vuex, { Store } from 'vuex'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import App from './App.vue'
 import { Plugin } from 'vue-fragment'
 import Vue from 'vue'
 import { generateFilePath } from '@nextcloud/router'
+import modules from './modules/index.js'
 import router from './router.js'
 
 // eslint-disable-next-line
@@ -13,13 +15,18 @@ const n = (...args) => translatePlural('repod', ...args)
 
 Vue.mixin({ methods: { t, n } })
 Vue.use(Plugin)
+Vue.use(Vuex)
+
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 Vue.prototype.OCP = window.OCP
 Vue.prototype.AppConfig = window.oc_appconfig
 
+const store = new Store({ modules })
+
 export default new Vue({
 	el: '#content',
 	router,
+	store,
 	render: h => h(App),
 })
diff --git a/src/modules/index.js b/src/modules/index.js
new file mode 100644
index 0000000..5ac6289
--- /dev/null
+++ b/src/modules/index.js
@@ -0,0 +1,5 @@
+import { subscriptions } from './subscriptions.js'
+
+export default {
+	subscriptions,
+}
diff --git a/src/modules/subscriptions.js b/src/modules/subscriptions.js
new file mode 100644
index 0000000..3c6bceb
--- /dev/null
+++ b/src/modules/subscriptions.js
@@ -0,0 +1,53 @@
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export const subscriptions = {
+	namespaced: true,
+	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: {
+		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
+			}
+		},
+		delete: (state, subscription) => {
+			const subscriptionId = state.subscriptions.findIndex(sub => sub.url === subscription.url)
+			delete state.subscriptions[subscriptionId]
+		},
+	},
+	actions: {
+		fetchAll: async (context) => {
+			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) {
+				context.dispatch('fetchMeta', subscription)
+			}
+		},
+		fetchMeta: async (context, subscription) => {
+			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)
+			}
+		},
+	},
+}
diff --git a/src/views/Discover.vue b/src/views/Discover.vue
index edd09cf..52b29a7 100644
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@@ -2,7 +2,7 @@
 	<div class="main">
 		<p>
 			<NcTextField :value.sync="search" :label="t('Find a podcast')">
-				<Magnify size="20" />
+				<Magnify :size="20" />
 			</NcTextField>
 		</p>
 		<Top v-if="!search" />
diff --git a/src/views/Index.vue b/src/views/Index.vue
index b7d53d9..c9ff5b9 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -5,13 +5,13 @@
 				<router-link to="/discover">
 					<NcAppNavigationNew :text="t('Add a podcast')">
 						<template #icon>
-							<Plus size="20" />
+							<Plus :size="20" />
 						</template>
 					</NcAppNavigationNew>
 				</router-link>
 				<NcLoadingIcon v-if="loading" />
 				<ul v-if="!loading">
-					<NcAppNavigationItem v-for="subscription in sortedSubscriptions"
+					<NcAppNavigationItem v-for="subscription in subscriptions"
 						:key="subscription.id"
 						:loading="subscription.loading"
 						:title="subscription.title ?? subscription.url">
@@ -38,8 +38,6 @@ import {
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
@@ -55,55 +53,22 @@ export default {
 	},
 	data() {
 		return {
-			subscriptions: [],
 			loading: true,
 		}
 	},
 	computed: {
-		sortedSubscriptions() {
-			return this.subscriptions.concat().sort((a, b) => {
-				if (a.title && b.title) return a.title.localeCompare(b.title)
-				return a.id - b.id
-			})
+		subscriptions() {
+			return this.$store.getters['subscriptions/sortedSubscriptions']
 		},
 	},
 	async mounted() {
 		try {
-			const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
-			for (const subscriptionId in metrics.data.subscriptions) {
-				this.addSubscription({
-					id: subscriptionId,
-					url: metrics.data.subscriptions[subscriptionId].url,
-					loading: true,
-				})
-			}
-			for (const subscription of this.subscriptions) {
-				this.updateSubscriptionMeta(subscription)
-			}
+			await this.$store.dispatch('subscriptions/fetchAll')
 		} catch (e) {
 			console.error(e)
 			showError(t('Could not fetch subscriptions'))
 		}
 		this.loading = false
 	},
-	methods: {
-		addSubscription(subscription) {
-			const subscriptionId = this.subscriptions.findIndex(sub => sub.url === subscription.url)
-
-			if (subscriptionId === -1) {
-				this.subscriptions.push(subscription)
-			} else {
-				this.subscriptions[subscriptionId] = subscription
-			}
-		},
-		async updateSubscriptionMeta(subscription) {
-			try {
-				const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
-				this.addSubscription({ ...podcasts.data.data, ...subscription, ...{ loading: false } })
-			} catch (e) {
-				console.error(e)
-			}
-		},
-	},
 }
 </script>