Migrate/vuex to pinia

package.json

@@ -78,8 +78,6 @@
     "vue-router": "^3.6.5",
     "vue-shortkey": "^3.1.7",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0",
     "webdav": "^5.6.0"
   },
   "browserslist": [
@@ -140,7 +138,7 @@
       "clover"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@fullcalendar|uuid|webdav)).+\\.js$"
+      "/node_modules/(?!(@fullcalendar|uuid|webdav|p-limit|yocto-queue)).+\\.js$"
     ],
     "setupFilesAfterEnv": [
       "./tests/javascript/jest.setup.js",

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue

@@ -51,12 +51,14 @@
 	getDateFromFirstdayParam,
 	modifyDate,
 } from '../../../utils/date.js'
-import { mapState } from 'vuex'
+import { mapState, mapStores } from 'pinia'
 import formatDateRange from '../../../filters/dateRangeFormat.js'
 import DatePicker from '../../Shared/DatePicker.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import { NcButton } from '@nextcloud/vue'
+import useSettingsStore from '../../../store/settings.js'
+import useWidgetStore from '../../../store/widget.js'
 
 export default {
 	name: 'AppNavigationHeaderDatePicker',
@@ -81,12 +83,13 @@
 		}
 	},
 	computed: {
-		...mapState({
-			locale: (state) => state.settings.momentLocale,
+		...mapStores(useWidgetStore),
+		...mapState(useSettingsStore, {
+			locale: 'momentLocale',
 		}),
 		selectedDate() {
 			if (this.isWidget) {
-				return getDateFromFirstdayParam(this.$store.getters.widgetDate)
+				return getDateFromFirstdayParam(this.widgetStore.widgetDate)
 			}
 			return getDateFromFirstdayParam(this.$route.params?.firstDay ?? 'now')
 		},
@@ -136,7 +139,7 @@
 		},
 		view() {
 			if (this.isWidget) {
-				return this.$store.getters.widgetView
+				return this.widgetStore.widgetView
 			}
 			return this.$route.params.view
 		},
@@ -190,7 +193,7 @@
 		},
 		navigateToDate(date) {
 			if (this.isWidget) {
-				this.$store.commit('setWidgetDate', { widgetDate: getYYYYMMDDFromDate(date) })
+				this.widgetStore.setWidgetDate({ widgetDate: getYYYYMMDDFromDate(date) })
 			} else {
 				const name = this.$route.name
 				const params = Object.assign({}, this.$route.params, {

src/components/AppNavigation/AppointmentConfigList.vue

@@ -52,8 +52,11 @@
 import AppointmentConfig from '../../models/appointmentConfig.js'
 import logger from '../../utils/logger.js'
 import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning.vue'
-import useAppointmentConfigStore from '../../store/appointmentConfigs.js'
-import { mapStores } from 'pinia'
+import useAppointmentConfigsStore from '../../store/appointmentConfigs.js'
+import usePrincipalsStore from '../../store/principals.js'
+import useCalendarsStore from '../../store/calendars.js'
+import useSettingsStore from '../../store/settings.js'
+import { mapStores, mapState } from 'pinia'
 
 export default {
 	name: 'AppointmentConfigList',
@@ -71,22 +74,22 @@
 		}
 	},
 	computed: {
-		...mapStores(useAppointmentConfigStore),
-		configs() {
-			return this.appointmentConfigStore.allConfigs
-		},
+		...mapStores(useAppointmentConfigsStore, usePrincipalsStore, useCalendarsStore, useSettingsStore),
+		...mapState(useAppointmentConfigsStore, {
+			configs: (state) => state.allConfigs,
+		}),
 		defaultConfig() {
 			return AppointmentConfig.createDefault(
-				this.calendarUrlToUri(this.$store.getters.ownSortedCalendars[0].url),
-				this.$store.getters.scheduleInbox,
-				this.$store.getters.getResolvedTimezone,
+				this.calendarUrlToUri(this.calendarsStore.ownSortedCalendars[0].url),
+				this.calendarsStore.scheduleInbox,
+				this.settingsStore.getResolvedTimezone,
 			)
 		},
 		hasAtLeastOneCalendar() {
-			return !!this.$store.getters.ownSortedCalendars[0]
+			return !!this.calendarsStore.ownSortedCalendars[0]
 		},
 		hasUserEmailAddress() {
-			const principal = this.$store.getters.getCurrentUserPrincipal
+			const principal = this.principalsStore.getCurrentUserPrincipal
 			if (!principal) {
 				return false
 			}
@@ -111,7 +114,7 @@
 			logger.info('Deleting config', { config })
 
 			try {
-				await this.appointmentConfigStore.deleteConfig({ id: config.id })
+				await this.appointmentConfigsStore.deleteConfig({ id: config.id })
 
 				logger.info('Config deleted', { config })
 			} catch (error) {

src/components/AppNavigation/CalendarList.vue

@@ -33,9 +33,10 @@
 import CalendarListItemLoadingPlaceholder from './CalendarList/CalendarListItemLoadingPlaceholder.vue'
 import draggable from 'vuedraggable'
 import debounce from 'debounce'
-import { mapGetters } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
 import pLimit from 'p-limit'
+import { mapStores, mapState } from 'pinia'
+import useCalendarsStore from '../../store/calendars.js'
 
 const limit = pLimit(1)
 
@@ -64,7 +65,8 @@
 		}
 	},
 	computed: {
-		...mapGetters({
+		...mapStores(useCalendarsStore),
+		...mapState(useCalendarsStore, {
 			serverCalendars: 'sortedCalendarsSubscriptions',
 		}),
 		loadingKeyCalendars() {
@@ -85,11 +87,11 @@
 			}, {})
 
 			try {
-				await limit(() => this.$store.dispatch('updateCalendarListOrder', { newOrder }))
+				await limit(() => this.calendarsStore.updateCalendarListOrder({ newOrder }))
 			} catch (err) {
 				showError(this.$t('calendar', 'Could not update calendar order.'))
 				// Reset calendar list order on error
-				this.calendars = this.serverCalendars
+				this.calendars = this.calendarsStore.sortedCalendarsSubscriptions
 			} finally {
 				this.disableDragging = false
 			}

src/components/AppNavigation/CalendarList/CalendarListItem.vue

@@ -87,6 +87,9 @@
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
+import usePrincipalsStore from '../../../store/principals.js'
+import useCalendarsStore from '../../../store/calendars.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'CalendarListItem',
@@ -115,6 +118,7 @@
 		}
 	},
 	computed: {
+		...mapStores(usePrincipalsStore, useCalendarsStore),
 		/**
 		 * Whether to show the sharing section
 		 *
@@ -151,18 +155,18 @@
 		 * @return {boolean}
 		 */
 		loadedOwnerPrincipal() {
-			return this.$store.getters.getPrincipalByUrl(this.calendar.owner) !== undefined
+			return this.principalsStore.getPrincipalByUrl(this.calendar.owner) !== undefined
 		},
 		ownerUserId() {
-			const principal = this.$store.getters.getPrincipalByUrl(this.calendar.owner)
+			const principal = this.principalsStore.getPrincipalByUrl(this.calendar.owner)
 			if (principal) {
 				return principal.userId
 			}
 
 			return ''
 		},
 		ownerDisplayname() {
-			const principal = this.$store.getters.getPrincipalByUrl(this.calendar.owner)
+			const principal = this.principalsStore.getPrincipalByUrl(this.calendar.owner)
 			if (principal) {
 				return principal.displayname
 			}
@@ -206,28 +210,27 @@
 		/**
 		 * Toggles the enabled state of this calendar
 		 */
-		toggleEnabled() {
-			this.$store.dispatch('toggleCalendarEnabled', { calendar: this.calendar })
-				.catch((error) => {
-					showError(this.$t('calendar', 'An error occurred, unable to change visibility of the calendar.'))
-					console.error(error)
-				})
+		async toggleEnabled() {
+			try {
+				await this.calendarsStore.toggleCalendarEnabled({ calendar: this.calendar })
+			} catch (error) {
+				showError(this.$t('calendar', 'An error occurred, unable to change visibility of the calendar.'))
+				console.error(error)
+			}
 		},
 
 		/**
 		 * Cancels the deletion of a calendar
 		 */
 		cancelDeleteCalendar() {
-			this.$store.dispatch('cancelCalendarDeletion', { calendar: this.calendar })
+			this.calendarsStore.cancelCalendarDeletion({ calendar: this.calendar })
 		},
 
 		/**
 		 * Open the calendar modal for this calendar item.
 		 */
 		showEditModal() {
-			this.$store.commit('showEditCalendarModal', {
-				calendarId: this.calendar.id,
-			})
+			this.calendarsStore.editCalendarModal = { calendarId: this.calendar.id }
 		},
 	},
 }

src/components/AppNavigation/CalendarList/CalendarListNew.vue

@@ -115,7 +115,9 @@
 import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Web from 'vue-material-design-icons/Web.vue'
-import { mapState } from 'vuex'
+import { mapStores, mapState } from 'pinia'
+import useCalendarsStore from '../../../store/calendars.js'
+import useSettingsStore from '../../../store/settings.js'
 
 export default {
 	name: 'CalendarListNew',
@@ -153,10 +155,11 @@
 		}
 	},
 	computed: {
-		...mapState({
-			canSubscribeLink: state => state.settings.canSubscribeLink,
-			hasPublicCalendars: state => Boolean(state.settings.publicCalendars),
+		...mapState(useSettingsStore, {
+			canSubscribeLink: 'canSubscribeLink',
+			hasPublicCalendars: store => Boolean(store.publicCalendars),
 		}),
+		...mapStores(useCalendarsStore),
 	},
 	watch: {
 		isOpen() {
@@ -228,7 +231,7 @@
 			const displayName = event.target.querySelector('input[type=text]').value
 
 			try {
-				await this.$store.dispatch('appendCalendar', {
+				await this.calendarsStore.appendCalendar({
 					displayName,
 					color: uidToHexColor(displayName),
 				})
@@ -254,7 +257,7 @@
 			const displayName = event.target.querySelector('input[type=text]').value
 
 			try {
-				await this.$store.dispatch('appendCalendar', {
+				await this.calendarsStore.appendCalendar({
 					displayName,
 					color: uidToHexColor(displayName),
 					components: ['VEVENT', 'VTODO'],
@@ -291,7 +294,7 @@
 			}
 
 			try {
-				await this.$store.dispatch('appendSubscription', {
+				await this.calendarsStore.appendSubscription({
 					displayName: hostname,
 					color: uidToHexColor(link),
 					source: link,

src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue

@@ -77,6 +77,8 @@
 
 import Download from 'vue-material-design-icons/Download.vue'
 import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
+import useCalendarsStore from '../../../store/calendars.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'PublicCalendarListItem',
@@ -108,6 +110,7 @@
 		}
 	},
 	computed: {
+		...mapStores(useCalendarsStore),
 		/**
 		 * Download url of the calendar
 		 *
@@ -177,9 +180,10 @@
 				}, 2000)
 			}
 		},
-		toggleEnabled() {
-			this.$store.commit('toggleCalendarEnabled', {
+		async toggleEnabled() {
+			await this.calendarsStore.toggleCalendarEnabled({
 				calendar: this.calendar,
+				updateDav: false,
 			})
 		},
 	},