chore: migrate dispatch and commit usages in components

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

src/components/AppSettingsMenu.vue

@@ -421,15 +421,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 +443,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 +455,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 +467,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 +480,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 +493,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 +508,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 +522,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 +533,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',
 				})

src/components/Mailbox.vue

@@ -155,7 +155,7 @@ export default {
 		await this.loadEnvelopes()
 		logger.debug(`syncing mailbox ${this.mailbox.databaseId} (${this.searchQuery}) after mount`)
 		await this.sync(false)
-		this.$store.commit('setHasFetchedInitialEnvelopes', true)
+		this.mainStore.setHasFetchedInitialEnvelopesMutation(true)
 	},
 	destroyed() {
 		this.bus.off('load-more', this.onScroll)
@@ -184,7 +184,7 @@ export default {
 			this.error = false
 
 			try {
-				const envelopes = await this.$store.dispatch('fetchEnvelopes', {
+				const envelopes = await this.mainStore.fetchEnvelopes({
 					mailboxId: this.mailbox.databaseId,
 					query: this.searchQuery,
 					limit: this.initialPageSize,
@@ -231,7 +231,7 @@ export default {
 			this.loadingMore = true
 
 			try {
-				const envelopes = await this.$store.dispatch('fetchNextEnvelopePage', {
+				const envelopes = await this.mainStore.fetchNextEnvelopePage({
 					mailboxId: this.mailbox.databaseId,
 					query: this.searchQuery,
 				})
@@ -304,7 +304,7 @@ export default {
 				logger.debug('deleting', { env })
 				this.onDelete(env.databaseId)
 				try {
-					await this.$store.dispatch('deleteThread', {
+					await this.mainStore.deleteThread({
 						envelope: env,
 					})
 				} catch (error) {
@@ -345,7 +345,7 @@ export default {
 				logger.debug('archiving', { env })
 				this.onDelete(env.databaseId)
 				try {
-					await this.$store.dispatch('moveThread', {
+					await this.mainStore.moveThread({
 						envelope: env,
 						destMailboxId: this.account.archiveMailboxId,
 					})
@@ -360,7 +360,7 @@ export default {
 				break
 			case 'flag':
 				logger.debug('flagging envelope via shortkey', { env })
-				this.$store.dispatch('toggleEnvelopeFlagged', env).catch((error) =>
+				this.mainStore.toggleEnvelopeFlagged(env).catch((error) =>
 					logger.error('could not flag envelope via shortkey', {
 						env,
 						error,
@@ -377,7 +377,7 @@ export default {
 					return
 				}
 				logger.debug('marking message as seen/unseen via shortkey', { env })
-				this.$store.dispatch('toggleEnvelopeSeen', { envelope: env }).catch((error) =>
+				this.mainStore.toggleEnvelopeSeen({ envelope: env }).catch((error) =>
 					logger.error('could not mark envelope as seen/unseen via shortkey', {
 						env,
 						error,
@@ -397,7 +397,7 @@ export default {
 
 			this.refreshing = true
 			try {
-				await this.$store.dispatch('syncEnvelopes', {
+				await this.mainStore.syncEnvelopes({
 					mailboxId: this.mailbox.databaseId,
 					query: this.searchQuery,
 					init,
@@ -421,7 +421,7 @@ export default {
 		// id: The id of the message being delete
 		onDelete(id) {
 			// Get a new message
-			this.$store.dispatch('fetchNextEnvelopes', {
+			this.mainStore.fetchNextEnvelopes({
 				mailboxId: this.mailbox.databaseId,
 				query: this.searchQuery,
 				quantity: 1,

src/components/MdnRequest.vue

@@ -26,6 +26,9 @@ import { sendMdn } from '../service/MessageService.js'
 import { showError } from '@nextcloud/dialogs'
 import { NcButton } from '@nextcloud/vue'
 
+import useMainStore from '../store/mainStore.js'
+import { mapStores } from 'pinia'
+
 export default {
 	name: 'MdnRequest',
 	components: {
@@ -44,6 +47,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useMainStore),
 		mdnSent() {
 			return this.message.flags.mdnsent
 		},
@@ -55,7 +59,7 @@ export default {
 
 			try {
 				await sendMdn(this.message.databaseId)
-				this.$store.commit('flagEnvelope', { envelope: this.message, flag: 'mdnsent', value: true })
+				this.mainStore.flagEnvelopeMutation({ envelope: this.message, flag: 'mdnsent', value: true })
 			} catch (error) {
 				logger.error('could not send mdn', error)
 				showError(t('mail', 'Could not send mdn'))

src/components/NavigationAccount.vue

@@ -191,7 +191,7 @@ export default {
 			logger.info('creating mailbox ' + name)
 			this.menuOpen = false
 			try {
-				await this.$store.dispatch('createMailbox', {
+				await this.mainStore.createMailbox({
 					account: this.account, name,
 				})
 			} catch (error) {
@@ -226,7 +226,7 @@ export default {
 						callback: async () => {
 							this.loading.delete = true
 							try {
-								await this.$store.dispatch('deleteAccount', this.account)
+								await this.mainStore.deleteAccount(this.account)
 								logger.info(`account ${id} deleted, redirecting …`)
 
 								// TODO: update store and handle this more efficiently
@@ -243,19 +243,16 @@ export default {
 			await dialog.show()
 		},
 		changeAccountOrderUp() {
-			this.$store
-				.dispatch('moveAccount', { account: this.account, up: true })
+			this.mainStore.moveAccount({ account: this.account, up: true })
 				.catch((error) => logger.error('could not move account up', { error }))
 		},
 		changeAccountOrderDown() {
-			this.$store
-				.dispatch('moveAccount', { account: this.account })
+			this.mainStore.moveAccount({ account: this.account })
 				.catch((error) => logger.error('could not move account down', { error }))
 		},
 		changeShowSubscribedOnly(onlySubscribed) {
 			this.savingShowOnlySubscribed = true
-			this.$store
-				.dispatch('patchAccount', {
+			this.mainStore.patchAccount({
 					account: this.account,
 					data: {
 						showSubscribedOnly: onlySubscribed,
@@ -297,9 +294,9 @@ export default {
 		 */
 		showAccountSettings(show) {
 			if (show) {
-				this.$store.commit('showSettingsForAccount', this.account.id)
+				this.mainStore.showSettingsForAccountMutation(this.account.id)
 			} else {
-				this.$store.commit('showSettingsForAccount', null)
+				this.mainStore.showSettingsForAccountMutation(null)
 			}
 		},
 	},

src/components/NavigationAccountExpandCollapse.vue

@@ -10,6 +10,8 @@
 <script>
 import { NcAppNavigationItem as AppNavigationItem } from '@nextcloud/vue'
 import logger from '../logger.js'
+import useMainStore from '../store/mainStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'NavigationAccountExpandCollapse',
@@ -23,6 +25,7 @@ export default {
 		},
 	},
 	computed: {
+		...mapStores(useMainStore),
 		id() {
 			return 'collapse-' + this.account.id
 		},
@@ -39,9 +42,8 @@ export default {
 		async toggleCollapse() {
 			logger.debug('toggling collapsed mailboxes for account ' + this.account.id)
 			try {
-				await this.$store.commit('toggleAccountCollapsed', this.account.id)
-				await this.$store
-					.dispatch('setAccountSetting', {
+				await this.mainStore.toggleAccountCollapsedMutation(this.account.id)
+				await this.mainStore.setAccountSetting({
 						accountId: this.account.id,
 						key: 'collapsed',
 						value: this.account.collapsed,

src/components/NavigationMailbox.vue

@@ -462,7 +462,7 @@ export default {
 			logger.info(`creating mailbox ${withPrefix} as submailbox of ${this.mailbox.databaseId}`)
 			this.menuOpen = false
 			try {
-				await this.$store.dispatch('createMailbox', {
+				await this.mainStore.createMailbox({
 					account: this.account,
 					name: withPrefix,
 				})
@@ -483,8 +483,7 @@ export default {
 		markAsRead() {
 			this.loadingMarkAsRead = true
 
-			this.$store
-				.dispatch('markMailboxRead', {
+			this.mainStore.markMailboxRead({
 					accountId: this.account.id,
 					mailboxId: this.mailbox.databaseId,
 				})
@@ -496,7 +495,7 @@ export default {
 			try {
 				this.changeSubscription = true
 
-				await this.$store.dispatch('changeMailboxSubscription', {
+				await this.mainStore.changeMailboxSubscription({
 					mailbox: this.mailbox,
 					subscribed,
 				})
@@ -511,7 +510,7 @@ export default {
 			try {
 				this.changingSyncInBackground = true
 
-				await this.$store.dispatch('patchMailbox', {
+				await this.mainStore.patchMailbox({
 					mailbox: this.mailbox,
 					attributes: {
 						syncInBackground,
@@ -553,8 +552,7 @@ export default {
 				},
 				(result) => {
 					if (result) {
-						return this.$store
-							.dispatch('clearMailbox', { mailbox: this.mailbox })
+						return this.mainStore.clearMailbox({ mailbox: this.mailbox })
 							.then(() => {
 								logger.info(`mailbox ${id} cleared`)
 							})
@@ -577,8 +575,7 @@ export default {
 				},
 				(result) => {
 					if (result) {
-						return this.$store
-							.dispatch('deleteMailbox', { mailbox: this.mailbox })
+						return this.mainStore.deleteMailbox({ mailbox: this.mailbox })
 							.then(() => {
 								logger.info(`mailbox ${id} deleted`)
 								if (parseInt(this.$route.params.mailboxId, 10) === this.mailbox.databaseId) {
@@ -604,7 +601,7 @@ export default {
 				if (this.mailbox.path) {
 					newName = this.mailbox.path + this.mailbox.delimiter + newName
 				}
-				await this.$store.dispatch('renameMailbox', {
+				await this.mainStore.renameMailbox({
 					account: this.account,
 					mailbox: this.mailbox,
 					newName,
@@ -634,7 +631,7 @@ export default {
 			if (accountId !== this.mailbox.accountId) {
 				return
 			}
-			this.$store.commit('expandAccount', accountId)
+			this.mainStore.expandAccountMutation(accountId)
 			this.showSubMailboxes = true
 		},
 		onDragEnd({ accountId }) {