Migrate/Outbox store to Pinia (#9688)

refactor: migrate outboxStore to Pinia



chore: update outbox store usages

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

package.json

@@ -68,6 +68,7 @@
     "nextcloud_issuetemplate_builder": "^0.1.0",
     "node-forge": "^1.3.1",
     "p-limit": "^5.0.0",
+    "pinia": "^2.1.7",
     "printscout": "2.0.3",
     "process": "^0.11.10",
     "ramda": "^0.29.1",

src/components/Navigation.vue

@@ -93,6 +93,8 @@ import NavigationOutbox from './NavigationOutbox.vue'
 import IconSetting from 'vue-material-design-icons/Cog.vue'
 import AppSettingsMenu from '../components/AppSettingsMenu.vue'
 import { UNIFIED_ACCOUNT_ID } from '../store/constants.js'
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'Navigation',
@@ -115,6 +117,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		menu() {
 			return this.$store.getters.accounts
 				.filter(account => account.id !== UNIFIED_ACCOUNT_ID)
@@ -148,7 +151,7 @@ export default {
 			return this.$store.getters.getPreference('password-is-unavailable', false)
 		},
 		outboxMessages() {
-			return this.$store.getters['outbox/getAllMessages']
+			return this.outboxStore.getAllMessages
 		},
 	},
 	methods: {

src/components/NavigationOutbox.vue

@@ -42,6 +42,9 @@
 import { NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble } from '@nextcloud/vue'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp.vue'
 
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
+
 export default {
 	name: 'NavigationOutbox',
 	components: {
@@ -50,8 +53,9 @@ export default {
 		IconOutbox,
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		count() {
-			return this.$store.getters['outbox/getAllMessages'].length
+			return this.outboxStore.getAllMessages.length
 		},
 		to() {
 			return {

src/components/NewMessageModal.vue

@@ -132,6 +132,8 @@ import MinimizeIcon from 'vue-material-design-icons/Minus.vue'
 import MaximizeIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
 import { deleteDraft, saveDraft, updateDraft } from '../service/DraftService.js'
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'NewMessageModal',
@@ -171,6 +173,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		...mapGetters(['showMessageComposer', 'getPreference']),
 		modalTitle() {
 			if (this.composerMessage.type === 'outbox') {
@@ -373,30 +376,30 @@ export default {
 					// This is a new message
 					const { id } = await saveDraft(dataForServer)
 					dataForServer.id = id
-					await this.$store.dispatch('outbox/enqueueFromDraft', {
+					await this.outboxStore.enqueueFromDraft({
 						draftMessage: dataForServer,
 						id,
 					})
 				} else if (this.composerData.type === 0) {
 					// This is an outbox message
 					dataForServer.id = this.composerData.id
-					await this.$store.dispatch('outbox/updateMessage', {
+					await this.outboxStore.updateMessage({
 						message: dataForServer,
 						id: this.composerData.id,
 					})
 				} else {
 					// This is a draft
 					await updateDraft(dataForServer)
 					dataForServer.id = this.composerData.id
-					await this.$store.dispatch('outbox/enqueueFromDraft', {
+					await this.outboxStore.enqueueFromDraft({
 						draftMessage: dataForServer,
 						id: this.composerData.id,
 					})
 				}
 
 				if (!data.sendAt || data.sendAt < Math.floor((now + UNDO_DELAY) / 1000)) {
 					// Awaiting here would keep the modal open for a long time and thus block the user
-					this.$store.dispatch('outbox/sendMessageWithUndo', { id: dataForServer.id }).catch((error) => {
+					this.outboxStore.sendMessageWithUndo({ id: dataForServer.id }).catch((error) => {
 						logger.debug('Could not send message', { error })
 					})
 				}
@@ -476,7 +479,7 @@ export default {
 
 			try {
 				if (isOutbox) {
-					await this.$store.dispatch('outbox/deleteMessage', { id })
+					await this.outboxStore.deleteMessage({ id })
 				} else {
 					deleteDraft(id)
 				}

src/components/Outbox.vue

@@ -51,6 +51,8 @@ import EmptyMailbox from './EmptyMailbox.vue'
 import OutboxMessageContent from './OutboxMessageContent.vue'
 import OutboxMessageListItem from './OutboxMessageListItem.vue'
 import logger from '../logger.js'
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'Outbox',
@@ -71,6 +73,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		isMessageShown() {
 			return !!this.$route.params.messageId
 		},
@@ -79,10 +82,10 @@ export default {
 				return null
 			}
 
-			return this.$store.getters['outbox/getMessage'](this.$route.params.messageId)
+			return this.outboxStore.getMessage(this.$route.params.messageId)
 		},
 		messages() {
-			return this.$store.getters['outbox/getAllMessages']
+			return this.outboxStore.getAllMessages
 		},
 	},
 	created() {
@@ -108,7 +111,7 @@ export default {
 			this.error = false
 
 			try {
-				await this.$store.dispatch('outbox/fetchMessages')
+				await this.outboxStore.fetchMessages()
 			} catch (error) {
 				this.error = true
 				logger.error('Failed to fetch outbox messages', { error })

src/components/OutboxMessageListItem.vue

@@ -81,6 +81,8 @@ import {
 	STATUS_SMTP_ERROR,
 	UNDO_DELAY,
 } from '../store/constants.js'
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
 
 export default {
 	name: 'OutboxMessageListItem',
@@ -102,6 +104,7 @@ export default {
 		},
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		selected() {
 			return this.$route.params.messageId === this.message.id
 		},
@@ -146,7 +149,7 @@ export default {
 		},
 		async deleteMessage() {
 			try {
-				await this.$store.dispatch('outbox/deleteMessage', {
+				await this.outboxStore.deleteMessage({
 					id: this.message.id,
 				})
 				showSuccess(t('mail', 'Message deleted'))
@@ -165,17 +168,17 @@ export default {
 				failed: false,
 				sendAt: (new Date().getTime() + UNDO_DELAY) / 1000,
 			}
-			await this.$store.dispatch('outbox/updateMessage', { message, id: message.id })
+			await this.outboxStore.updateMessage({ message, id: message.id })
 			try {
 				if (this.message.status !== STATUS_IMAP_SENT_MAILBOX_FAIL) {
-					await this.$store.dispatch('outbox/sendMessageWithUndo', { id: message.id })
+					await this.outboxStore.sendMessageWithUndo({ id: message.id })
 				} else {
-					await this.$store.dispatch('outbox/copyMessageToSentMailbox', { id: message.id })
+					await this.outboxStore.copyMessageToSentMailbox({ id: message.id })
 				}
 			} catch (error) {
 				logger.error('Could not send or copy message', { error })
 				if (error.data !== undefined) {
-					await this.$store.dispatch('outbox/updateMessage', { message: error.data[0], id: message.id })
+					await this.outboxStore.updateMessage({ message: error.data[0], id: message.id })
 				}
 			}
 		},

src/components/ThreadEnvelope.vue

@@ -281,6 +281,8 @@ import EventModal from './EventModal.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
+import useOutboxStore from '../store/outboxStore.js'
+import { mapStores } from 'pinia'
 
 // Ternary loading state
 const LOADING_DONE = 0
@@ -375,6 +377,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapStores(useOutboxStore),
 		inlineMenuSize() {
 			// eslint-disable-next-line no-unused-expressions
 			const { envelope } = this.$refs
@@ -731,7 +734,7 @@ export default {
 			}
 			try {
 				this.unsubscribing = true
-				const message = await this.$store.dispatch('outbox/enqueueMessage', {
+				const message = await this.outboxStore.enqueueMessage({
 					message: {
 						accountId: this.message.accountId,
 						subject: params.subject || 'Unsubscribe',
@@ -754,7 +757,7 @@ export default {
 					},
 				})
 				logger.debug('Unsubscribe email to ' + email + ' enqueued')
-				await this.$store.dispatch('outbox/sendMessage', { id: message.id })
+				await this.outboxStore.sendMessage({ id: message.id })
 				logger.debug('Unsubscribe email sent to ' + email)
 				showSuccess(t('mail', 'Unsubscribe request sent'))
 			} catch (error) {

src/main.js

@@ -38,12 +38,17 @@ import router from './router.js'
 import store from './store/index.js'
 import { fixAccountId } from './service/AccountService.js'
 import { loadState } from '@nextcloud/initial-state'
+import { createPinia, PiniaVuePlugin } from 'pinia'
+import useOutboxStore from './store/outboxStore.js'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
 // eslint-disable-next-line camelcase
 __webpack_public_path__ = generateFilePath('mail', '', 'js/')
 
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
+
 sync(store, router)
 
 Vue.mixin(Nextcloud)
@@ -143,8 +148,6 @@ accounts.map(fixAccountId).forEach((account) => {
 
 tags.forEach(tag => store.commit('addTag', { tag }))
 
-outboxMessages.forEach(message => store.commit('outbox/addMessage', { message }))
-
 store.commit('setScheduledSendingDisabled', disableScheduledSend)
 store.commit('setSnoozeDisabled', disableSnooze)
 store.commit('setGoogleOauthUrl', googleOauthUrl)
@@ -159,5 +162,9 @@ export default new Vue({
 	name: 'Mail',
 	router,
 	store,
+	pinia,
 	render: (h) => h(App),
 })
+
+const outboxStore = useOutboxStore()
+outboxMessages.forEach(message => outboxStore.addMessageMutation({ message }))