chore: migrate dispatch and commit usages in components

Signed-off-by: Grigory V <[email protected]>

Author: GVodyanov

Diff for: src/App.vue

@@ -48,9 +48,9 @@ export default {
 		}
 
 		this.sync()
-		await this.$store.dispatch('fetchCurrentUserPrincipal')
-		await this.$store.dispatch('loadCollections')
-		this.$store.commit('hasCurrentUserPrincipalAndCollections', true)
+		await this.mainStore.fetchCurrentUserPrincipal()
+		await this.mainStore.loadCollections()
+		this.mainStore.hasCurrentUserPrincipalAndCollectionsMutation(true)
 	},
 	methods: {
 		reload() {
@@ -59,7 +59,7 @@ export default {
 		sync() {
 			setTimeout(async () => {
 				try {
-					await this.$store.dispatch('syncInboxes')
+					await this.mainStore.syncInboxes()
 
 					logger.debug("Inboxes sync'ed in background")
 				} catch (error) {

Diff for: src/components/AccountDefaultsSettings.vue

@@ -74,7 +74,7 @@ export default {
 				logger.debug('setting drafts mailbox to ' + draftsMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							draftsMailboxId,
@@ -101,7 +101,7 @@ export default {
 				logger.debug('setting sent mailbox to ' + sentMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							sentMailboxId,
@@ -128,7 +128,7 @@ export default {
 				logger.debug('setting trash mailbox to ' + trashMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							trashMailboxId,
@@ -155,7 +155,7 @@ export default {
 				logger.debug('setting archive mailbox to ' + archiveMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							archiveMailboxId,
@@ -182,7 +182,7 @@ export default {
 				logger.debug('setting junk mailbox to ' + junkMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							junkMailboxId,
@@ -209,7 +209,7 @@ export default {
 				logger.debug('setting snooze mailbox to ' + snoozeMailboxId)
 				this.saving = true
 				try {
-					await this.$store.dispatch('patchAccount', {
+					await this.mainStore.patchAccount({
 						account: this.account,
 						data: {
 							snoozeMailboxId,

Diff for: src/components/AccountForm.vue

@@ -239,7 +239,6 @@
 
 <script>
 import { Tab, Tabs } from 'vue-tabs-component'
-import { mapGetters } from 'vuex'
 import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcPasswordField, NcInputField, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { translate as t } from '@nextcloud/l10n'
@@ -251,6 +250,8 @@ import {
 	testConnectivity,
 } from '../service/AutoConfigService.js'
 import { CONSENT_ABORTED, getUserConsent } from '../integration/oauth.js'
+import useMainStore from '../store/mainStore.js'
+import { mapStores, mapState } from 'pinia'
 
 export default {
 	name: 'AccountForm',
@@ -314,7 +315,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
+		...mapStores(useMainStore),
+		...mapState(useMainStore, [
 			'googleOauthUrl',
 			'microsoftOauthUrl',
 		]),
@@ -563,7 +565,7 @@ export default {
 					delete data.smtpPassword
 				}
 				if (!this.account) {
-					const account = await this.$store.dispatch('startAccountSetup', data)
+					const account = await this.mainStore.startAccountSetup(data)
 					if (this.useOauth) {
 						this.loadingMessage = t('mail', 'Awaiting user consent')
 						try {
@@ -584,18 +586,18 @@ export default {
 							}
 						} catch (e) {
 							// Clean up the temporary account before we continue
-							this.$store.dispatch('deleteAccount', account)
+							this.mainStore.deleteAccount(account)
 							logger.info(`Temporary account ${account.id} deleted`)
 							throw e
 						}
 						this.clearFeedback()
 					}
 					this.loadingMessage = t('mail', 'Loading account')
-					await this.$store.dispatch('finishAccountSetup', { account })
+					await this.mainStore.finishAccountSetup({ account })
 					this.$emit('account-created', account)
 				} else {
 					const oldAccountData = this.account
-					const account = await this.$store.dispatch('updateAccount', {
+					const account = await this.mainStore.updateAccount({
 						...data,
 						accountId: this.account.id,
 					})
@@ -619,7 +621,7 @@ export default {
 							}
 						} catch (e) {
 							// Undo changes
-							await this.$store.dispatch('updateAccount', {
+							await this.mainStore.updateAccount({
 								...oldAccountData,
 								accountId: oldAccountData.id,
 							})

Diff for: src/components/AccountSettings.vue

@@ -104,6 +104,8 @@ import CertificateSettings from './CertificateSettings.vue'
 import SearchSettings from './SearchSettings.vue'
 import TrashRetentionSettings from './TrashRetentionSettings.vue'
 import logger from '../logger.js'
+import useMainStore from '../store/mainStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'AccountSettings',
@@ -139,6 +141,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useMainStore),
 		displayName() {
 			return this.account.name
 		},
@@ -151,7 +154,7 @@ export default {
 			if (newState === true && this.fetchActiveSieveScript === true) {
 				logger.debug(`Load active sieve script for account ${this.account.accountId}`)
 				this.fetchActiveSieveScript = false
-				this.$store.dispatch('fetchActiveSieveScript', {
+				this.mainStore.fetchActiveSieveScript({
 					accountId: this.account.id,
 				})
 			}

Diff for: src/components/AliasSettings.vue

@@ -83,6 +83,8 @@ import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/Pencil.vue'
 import logger from '../logger.js'
 import AliasForm from './AliasForm.vue'
+import useMainStore from '../store/mainStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'AliasSettings',
@@ -108,6 +110,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useMainStore),
 		aliases() {
 			return this.account.aliases
 		},
@@ -124,7 +127,7 @@ export default {
 		async createAlias() {
 			this.loading = true
 
-			await this.$store.dispatch('createAlias', {
+			await this.mainStore.createAlias({
 				account: this.account,
 				alias: this.newAlias,
 				name: this.newName,
@@ -147,7 +150,7 @@ export default {
 
 		async updateAlias(aliasId, newAlias) {
 			const alias = this.aliases.find((alias) => alias.id === aliasId)
-			await this.$store.dispatch('updateAlias', {
+			await this.mainStore.updateAlias({
 				account: this.account,
 				aliasId: alias.id,
 				alias: newAlias.alias,
@@ -156,7 +159,7 @@ export default {
 			})
 		},
 		async deleteAlias(aliasId) {
-			await this.$store.dispatch('deleteAlias', {
+			await this.mainStore.deleteAlias({
 				account: this.account,
 				aliasId,
 			})

Diff for: src/components/AppSettingsMenu.vue

@@ -312,7 +312,6 @@ import SmimeCertificateModal from './smime/SmimeCertificateModal.vue'
 import TrustedSenders from './TrustedSenders.vue'
 import InternalAddress from './InternalAddress.vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
-import { mapGetters } from 'vuex'
 import useMainStore from '../store/mainStore.js'
 import { mapStores, mapState } from 'pinia'
 
@@ -421,15 +420,15 @@ export default {
 			this.showAccountSettings = false
 		},
 		openAccountSettings(accountId) {
-			this.$store.commit('showSettingsForAccount', accountId)
+			this.mainStore.showSettingsForAccountMutation(accountId)
 			this.showSettings = false
 		},
 		checkMailvelope() {
 			this.mailvelopeIsAvailable = !!window.mailvelope
 		},
 		async setLayout(layoutMode) {
 			try {
-				await this.$store.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 					key: 'layout-mode',
 					value: layoutMode,
 				})
@@ -443,8 +442,7 @@ export default {
 		onToggleButtonReplies(e) {
 			this.loadingReplySettings = true
 
-			this.$store
-				.dispatch('savePreference', {
+			this.mainStore.savePreference({
 					key: 'reply-mode',
 					value: e.target.checked ? 'bottom' : 'top',
 				})
@@ -456,8 +454,7 @@ export default {
 		onToggleExternalAvatars(e) {
 			this.loadingAvatarSettings = true
 
-			this.$store
-				.dispatch('savePreference', {
+			this.mainStore.savePreference({
 					key: 'external-avatars',
 					value: e.target.checked ? 'true' : 'false',
 				})
@@ -469,8 +466,7 @@ export default {
 		async onToggleSearchPriorityBody(e) {
 			this.loadingPrioritySettings = true
 			try {
-				await this.$store
-					.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 						key: 'search-priority-body',
 						value: e.target.checked ? 'true' : 'false',
 					})
@@ -483,8 +479,7 @@ export default {
 		onToggleCollectData(e) {
 			this.loadingOptOutSettings = true
 
-			this.$store
-				.dispatch('savePreference', {
+			this.mainStore.savePreference({
 					key: 'collect-data',
 					value: e.target.checked ? 'true' : 'false',
 				})
@@ -497,13 +492,11 @@ export default {
 			const previousValue = this.sortOrder
 			try {
 				this.sortOrder = e
-				await this.$store
-					.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 						key: 'sort-order',
 						value: e,
 					})
-				this.$store.commit('removeAllEnvelopes')
-
+				this.mainStore.removeAllEnvelopesMutation()
 			} catch (error) {
 				Logger.error('could not save preferences', { error })
 				this.sortOrder = previousValue
@@ -514,8 +507,7 @@ export default {
 			this.toggleAutoTagging = true
 
 			try {
-				await this.$store
-					.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 						key: 'tag-classified-messages',
 						value: e.target.checked ? 'true' : 'false',
 					})
@@ -529,7 +521,7 @@ export default {
 		},
 		async onToggleFollowUpReminders(e) {
 			try {
-				await this.$store.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 					key: 'follow-up-reminders',
 					value: e.target.checked ? 'true' : 'false',
 				})
@@ -540,7 +532,7 @@ export default {
 		},
 		async onToggleInternalAddress(e) {
 			try {
-				await this.$store.dispatch('savePreference', {
+				await this.mainStore.savePreference({
 					key: 'internal-addresses',
 					value: e.target.checked ? 'true' : 'false',
 				})

Diff for: src/components/CertificateSettings.vue

@@ -36,10 +36,11 @@
 <script>
 import { NcSelect, NcButton, NcNoteCard } from '@nextcloud/vue'
 import { compareSmimeCertificates } from '../util/smime.js'
-import { mapGetters } from 'vuex'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import Logger from '../logger.js'
 import moment from '@nextcloud/moment'
+import useMainStore from '../store/mainStore.js'
+import { mapStores, mapState } from 'pinia'
 
 export default {
 	name: 'CertificateSettings',
@@ -61,7 +62,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
+		...mapStores(useMainStore),
+		...mapState(useMainState, {
 			smimeCertificates: 'getSmimeCertificates',
 		}),
 		savedCertificate: {
@@ -133,7 +135,7 @@ export default {
 	methods: {
 		async updateSmimeCertificate() {
 			if (this.alias.isAccountCertificate) {
-				await this.$store.dispatch('updateAccountSmimeCertificate', {
+				await this.mainStore.updateAccountSmimeCertificate({
 					account: this.account,
 					smimeCertificateId: this.certificate.id,
 				}).then(() => {
@@ -144,7 +146,7 @@ export default {
 				},
 				)
 			} else {
-				await this.$store.dispatch('updateAlias', {
+				await this.mainStore.updateAlias({
 					account: this.account,
 					aliasId: this.alias.id,
 					alias: this.alias.alias,

Diff for: src/components/ComposerSessionIndicator.vue

@@ -38,11 +38,12 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { NcActions, NcActionButton } from '@nextcloud/vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import ArrowExpandIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import useMainStore from '../store/mainStore.js'
+import { mapStores, mapState } from 'pinia'
 
 export default {
 	name: 'ComposerSessionIndicator',
@@ -59,7 +60,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['composerMessage']),
+		...mapStores(useMainStore),
+		...mapState(useMainStore, ['composerMessage']),
 		title() {
 			return this.composerMessage?.data.subject || t('mail', 'Untitled message')
 		},
@@ -73,7 +75,7 @@ export default {
 				return
 			}
 
-			await this.$store.dispatch('showMessageComposer')
+			await this.mainStore.showMessageComposer()
 		},
 		onClose() {
 			if (this.disabled) {