Merge pull request #3766 from nextcloud/chore/vue3/migrate-event-buse…

…s-to-mitt chore(vue3): migrate event buses to mitt
nextcloud · Jan 3, 2024 · 0195719 · 0195719
2 parents ebe8c80 + 045ede5
commit 0195719
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "debounce": "^1.2.1",
     "downloadjs": "^1.4.7",
     "ical.js": "^1.5.0",
+    "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "p-limit": "^4.0.0",
     "qr-image": "^3.2.0",

diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
@@ -84,7 +84,7 @@ import ContactDetails from '../ContactDetails.vue'
 import ContactsList from '../ContactsList.vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import RouterMixin from '../../mixins/RouterMixin.js'
-import Vue from 'vue'
+import mitt from 'mitt'
 
 export default {
 	name: 'ContactsContent',
@@ -117,7 +117,7 @@ export default {
 		return {
 			searchQuery: '',
 			// communication for ContactListItem and ContactDetails (reload avatar)
-			reloadBus: new Vue(),
+			reloadBus: mitt(),
 		}
 	},
 

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
@@ -373,7 +373,7 @@ import { showError } from '@nextcloud/dialogs'
 
 import { stringify } from 'ical.js'
 import qr from 'qr-image'
-import Vue from 'vue'
+import mitt from 'mitt'
 import {
 	NcActions as Actions,
 	NcActionButton as ActionButton,
@@ -500,7 +500,7 @@ export default {
 			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
 
 			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
-			bus: new Vue(),
+			bus: mitt(),
 			showMenuPopover: false,
 			profileEnabled,
 			isTalkEnabled,

diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -195,11 +195,11 @@ export default {
 	},
 
 	created() {
-		this.bus.$on('add-prop', this.addProp)
+		this.bus.on('add-prop', this.addProp)
 	},
 
 	destroyed() {
-		this.bus.$off('add-prop', this.addProp)
+		this.bus.off('add-prop', this.addProp)
 	},
 
 	methods: {
@@ -210,7 +210,7 @@ export default {
 		 */
 		async addProp(id) {
 			if (this.usedProperties.includes(id) && !this.properties[id].multiple) {
-				this.bus.$emit('focus-prop', id)
+				this.bus.emit('focus-prop', id)
 				return
 			}
 
@@ -240,7 +240,7 @@ export default {
 				}
 			}
 			this.moreActionsOpen = false
-			this.bus.$emit('focus-prop', id)
+			this.bus.emit('focus-prop', id)
 		},
 	},
 }

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -383,7 +383,7 @@ export default {
 
 			await this.loadPhotoUrl()
 
-			await this.reloadBus.$emit('reload-avatar', this.contact.key)
+			await this.reloadBus.emit('reload-avatar', this.contact.key)
 
 			this.loading = false
 		},
@@ -438,7 +438,7 @@ export default {
 			this.$store.dispatch('updateContact', this.contact)
 			// somehow the avatarUrl is not unavailable immediately, so we just set undefined
 			this.photoUrl = undefined
-			this.reloadBus.$emit('delete-avatar', this.contact.key)
+			this.reloadBus.emit('delete-avatar', this.contact.key)
 		},
 
 		/**
@@ -530,7 +530,7 @@ export default {
 
 					await this.loadPhotoUrl()
 
-					await this.reloadBus.$emit('reload-avatar', this.contact.key)
+					await this.reloadBus.emit('reload-avatar', this.contact.key)
 
 					// Notify user
 					showSuccess(t('contacts', 'Avatar downloaded from social network'))

diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -369,11 +369,11 @@ export default {
 	},
 
 	created() {
-		this.bus.$on('focus-prop', this.onFocusProp)
+		this.bus.on('focus-prop', this.onFocusProp)
 	},
 
 	destroyed() {
-		this.bus.$off('focus-prop', this.onFocusProp)
+		this.bus.off('focus-prop', this.onFocusProp)
 	},
 
 	methods: {

diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
@@ -70,12 +70,12 @@ export default {
 	},
 
 	created() {
-		this.reloadBus.$on('reload-avatar', this.reloadAvatarUrl)
-		this.reloadBus.$on('delete-avatar', this.deleteAvatar)
+		this.reloadBus.on('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.on('delete-avatar', this.deleteAvatar)
 	},
 	destroyed() {
-		this.reloadBus.$off('reload-avatar', this.reloadAvatarUrl)
-		this.reloadBus.$off('delete-avatar', this.deleteAvatar)
+		this.reloadBus.off('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.off('delete-avatar', this.deleteAvatar)
 	},
 	async mounted() {
 		await this.loadAvatarUrl()

diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
@@ -96,7 +96,7 @@ export default {
 		 * @param {string} id type of prop
 		 */
 		onAddProp(id) {
-			this.bus.$emit('add-prop', id)
+			this.bus.emit('add-prop', id)
 		},
 	},
 }