From b4b5c2d7617e0d705b23c2ebc5c70eef0a7f1814 Mon Sep 17 00:00:00 2001
From: Grigory V <scratchx@gmx.com>
Date: Sun, 14 Jan 2024 18:56:22 +0100
Subject: [PATCH] Use store in components

Signed-off-by: Grigory V <scratchx@gmx.com>
---
 src/components/AppNavigation/AppointmentConfigList.vue | 9 +++++----
 src/components/AppointmentConfigModal.vue              | 8 ++++++--
 src/main.js                                            | 9 ++++-----
 src/store/appointmentConfigs.js                        | 9 +++++++--
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/AppNavigation/AppointmentConfigList.vue b/src/components/AppNavigation/AppointmentConfigList.vue
index f1a74b21cd..afbe079202 100644
--- a/src/components/AppNavigation/AppointmentConfigList.vue
+++ b/src/components/AppNavigation/AppointmentConfigList.vue
@@ -68,8 +68,8 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import AppointmentConfigModal from '../AppointmentConfigModal.vue'
 import AppointmentConfig from '../../models/appointmentConfig.js'
 import logger from '../../utils/logger.js'
-import { mapGetters } from 'vuex'
 import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning.vue'
+import useAppointmentConfigsStore from '../../store/appointmentConfigs.js'
 
 export default {
 	name: 'AppointmentConfigList',
@@ -87,9 +87,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
-			configs: 'allConfigs',
-		}),
+		configs() {
+			const store = useAppointmentConfigsStore()
+			return store.allConfigs
+		},
 		defaultConfig() {
 			return AppointmentConfig.createDefault(
 				this.calendarUrlToUri(this.$store.getters.ownSortedCalendars[0].url),
diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue
index 27a655034a..47808a1d4e 100644
--- a/src/components/AppointmentConfigModal.vue
+++ b/src/components/AppointmentConfigModal.vue
@@ -164,6 +164,7 @@ import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelec
 import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue'
 import logger from '../utils/logger.js'
 import Confirmation from './AppointmentConfigModal/Confirmation.vue'
+import useAppointmentConfigsStore from '../store/appointmentConfigs.js'
 
 export default {
 	name: 'AppointmentConfigModal',
@@ -201,6 +202,7 @@ export default {
 			enableFutureLimit: false,
 			rateLimitingReached: false,
 			showConfirmation: false,
+			store: useAppointmentConfigsStore(),
 		}
 	},
 	computed: {
@@ -308,10 +310,12 @@ export default {
 			try {
 				if (this.isNew) {
 					logger.info('Creating new config', { config })
-					this.editing = await this.$store.dispatch('createConfig', { config })
+					// this.editing = await this.$store.dispatch('createConfig', { config })
+					this.editing = await this.store.createConfig({ config })
 				} else {
 					logger.info('Saving config', { config })
-					this.editing = await this.$store.dispatch('updateConfig', { config })
+					// this.editing = await this.$store.dispatch('updateConfig', { config })
+					this.editing = await this.store.updateConfig({ config })
 				}
 				this.showConfirmation = true
 			} catch (error) {
diff --git a/src/main.js b/src/main.js
index d5e277b227..50e5046751 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,7 @@ import VTooltip from 'v-tooltip'
 import VueShortKey from 'vue-shortkey'
 import windowTitleService from './services/windowTitleService.js'
 import { createPinia, PiniaVuePlugin } from 'pinia'
+import useAppointmentConfigsStore from './store/appointmentConfigs.js'
 
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()
@@ -73,11 +74,6 @@ Vue.prototype.n = translatePlural
 
 windowTitleService(router, store)
 
-store.commit(
-	'addInitialConfigs',
-	loadState('calendar', 'appointmentConfigs', []).map(config => new AppointmentConfig(config))
-)
-
 export default new Vue({
 	el: '#content',
 	router,
@@ -85,3 +81,6 @@ export default new Vue({
 	render: h => h(App),
 	pinia,
 })
+
+const appointmentsConfigsStore = useAppointmentConfigsStore()
+appointmentsConfigsStore.addInitialConfigs(loadState('calendar', 'appointmentConfigs', []).map(config => new AppointmentConfig(config)))
diff --git a/src/store/appointmentConfigs.js b/src/store/appointmentConfigs.js
index e731710cb6..0706e6354d 100644
--- a/src/store/appointmentConfigs.js
+++ b/src/store/appointmentConfigs.js
@@ -31,11 +31,16 @@ export default defineStore('appointmentConfig', {
 		}
 	},
 	getters: {
-		allConfigs(state) {
-			return Object.values(state.configs)
+		allConfigs() {
+			return Object.values(this.configs)
 		},
 	},
 	actions: {
+		addInitialConfigs(configs) {
+			for (const config of configs) {
+				this.configs[config.id] = config
+			}
+		},
 		async updateConfig({ config }) {
 			try {
 				const updatedConfig = await updateConfig(config)