Merge pull request #12431 from nextcloud/fix/12206/speed-up-new-conve…

…rsation

fix(NewConversationDialog): speed up conversation creation flow

src/components/ConversationSettings/ConversationAvatarEditor.vue

@@ -292,60 +292,50 @@ export default {
 			this.emojiAvatar = emoji
 		},
 
-		saveAvatar() {
+		async saveAvatar() {
 			this.loading = true
 
-			if (this.emojiAvatar) {
-				this.saveEmojiAvatar()
-			} else {
-				this.savePictureAvatar()
-			}
-		},
-
-		async saveEmojiAvatar() {
 			try {
-				await this.$store.dispatch('setConversationEmojiAvatarAction', {
-					token: this.conversation.token,
-					emoji: this.emojiAvatar,
-					color: this.backgroundColor ? this.backgroundColor.slice(1) : null,
-				})
-				this.emojiAvatar = ''
-				this.backgroundColor = ''
+				if (this.emojiAvatar) {
+					await this.saveEmojiAvatar()
+				} else {
+					await this.savePictureAvatar()
+				}
 			} catch (error) {
-				showError(t('spreed', 'Could not set the conversation picture: {error}',
-					{ error: error.message },
-				))
+				showError(t('spreed', 'Could not set the conversation picture: {error}', { error: error.message }))
+				this.cancel()
 			} finally {
 				this.loading = false
 			}
 		},
 
-		savePictureAvatar() {
+		async saveEmojiAvatar() {
+			await this.$store.dispatch('setConversationEmojiAvatarAction', {
+				token: this.conversation.token,
+				emoji: this.emojiAvatar,
+				color: this.backgroundColor ? this.backgroundColor.slice(1) : null,
+			})
+			this.emojiAvatar = ''
+			this.backgroundColor = ''
+		},
+
+		async savePictureAvatar() {
 			this.showCropper = false
 			const canvasData = this.$refs.cropper.getCroppedCanvas()
 			const scaleFactor = canvasData.width > 512 ? 512 / canvasData.width : 1
-			this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas().toBlob(async (blob) => {
-				if (blob === null) {
-					showError(t('spreed', 'Error cropping conversation picture'))
-					this.cancel()
-					return
-				}
 
-				const formData = new FormData()
-				formData.append('file', blob)
-
-				try {
-					await this.$store.dispatch('setConversationAvatarAction', {
-						token: this.conversation.token,
-						file: formData,
-					})
-				} catch (error) {
-					showError(t('spreed', 'Could not set the conversation picture: {error}',
-						{ error: error.message },
-					))
-				} finally {
-					this.loading = false
-				}
+			const blob = await new Promise((resolve, reject) => {
+				this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas()
+					.toBlob(blob => blob === null
+						? reject(new Error(t('spreed', 'Error cropping conversation picture')))
+						: resolve(blob))
+			})
+			const formData = new FormData()
+			formData.append('file', blob)
+
+			await this.$store.dispatch('setConversationAvatarAction', {
+				token: this.conversation.token,
+				file: formData,
 			})
 		},
 

src/components/NewConversationDialog/NewConversationDialog.vue

@@ -126,12 +126,8 @@ import NewConversationSetupPage from './NewConversationSetupPage.vue'
 import LoadingComponent from '../LoadingComponent.vue'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
-import { CONVERSATION, PRIVACY } from '../../constants.js'
-import {
-	createPublicConversation,
-	createPrivateConversation,
-	setConversationPassword,
-} from '../../services/conversationsService.js'
+import { CONVERSATION } from '../../constants.js'
+import { setConversationPassword } from '../../services/conversationsService.js'
 import { addParticipant } from '../../services/participantsService.js'
 import { copyConversationLinkToClipboard } from '../../utils/handleUrl.ts'
 
@@ -288,106 +284,67 @@ export default {
 		async handleCreateConversation() {
 			this.page = 2
 
-			// TODO: move all operations to a single store action
-			// and commit + addConversation only once at the very end
 			try {
-				if (this.isPublic) {
-					await this.createConversation(PRIVACY.PUBLIC)
-					if (this.password && this.newConversation.hasPassword) {
-						await setConversationPassword(this.newConversation.token, this.password)
-					}
-				} else {
-					await this.createConversation(PRIVACY.PRIVATE)
+				this.newConversation.token = await this.$store.dispatch('createGroupConversation', {
+					conversationName: this.conversationName,
+					isPublic: this.isPublic,
+				})
+
+				// Gather all secondary requests to run in parallel
+				const promises = []
+
+				if (this.isPublic && this.password && this.newConversation.hasPassword) {
+					promises.push(setConversationPassword(this.newConversation.token, this.password))
 				}
-			} catch (exception) {
-				console.error(exception)
-				this.isLoading = false
-				this.error = true
-				// Stop the execution of the method on exceptions.
-				return
-			}
 
-			try {
-				await this.$store.dispatch('setListable', {
-					token: this.newConversation.token,
-					listable: this.listable,
-				})
+				if (this.isAvatarEdited) {
+					promises.push(this.$refs.setupPage.$refs.conversationAvatar.saveAvatar)
+				}
+
+				if (this.newConversation.description) {
+					promises.push(this.$store.dispatch('setConversationDescription', {
+						token: this.newConversation.token,
+						description: this.newConversation.description,
+					}))
+				}
+
+				if (this.listable !== CONVERSATION.LISTABLE.NONE) {
+					promises.push(this.$store.dispatch('setListable', {
+						token: this.newConversation.token,
+						listable: this.listable,
+					}))
+				}
+
+				for (const participant of this.selectedParticipants) {
+					promises.push(addParticipant(this.newConversation.token, participant.id, participant.source))
+				}
+
+				await Promise.all(promises)
 			} catch (exception) {
-				console.error(exception)
+				console.error('Error creating new conversation: ', exception)
 				this.isLoading = false
 				this.error = true
 				// Stop the execution of the method on exceptions.
 				return
 			}
 
-			for (const participant of this.selectedParticipants) {
-				try {
-					await addParticipant(this.newConversation.token, participant.id, participant.source)
-				} catch (exception) {
-					console.error(exception)
-					this.isLoading = false
-					this.error = true
-					// Stop the execution of the method on exceptions.
-					return
-				}
-			}
-
 			this.success = true
 			this.isLoading = false
 
 			if (!this.isInCall) {
 				// Push the newly created conversation's route.
-				this.pushNewRoute()
+				this.$router.push({ name: 'conversation', params: { token: this.newConversation.token } })
+					.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+
+				// Get complete participant list in advance
+				this.$store.dispatch('fetchParticipants', { token: this.newConversation.token })
 			}
 
 			// Close the modal right away if the conversation is public.
 			if (!this.isPublic) {
 				this.closeModal()
 			}
 		},
-		/**
-		 * Creates a new private or public conversation, adds it to the store and sets
-		 * the local token value to the newly created conversation's token
-		 *
-		 * @param {number} flag choose to send a request with private or public flag
-		 */
-		async createConversation(flag) {
-			try {
-				let response
-				if (flag === PRIVACY.PRIVATE) {
-					response = await createPrivateConversation(this.conversationName)
-				} else if (flag === PRIVACY.PUBLIC) {
-					response = await createPublicConversation(this.conversationName)
-				}
-				const conversation = response.data.ocs.data
-				this.$store.dispatch('addConversation', conversation)
-				this.newConversation.token = conversation.token
-				if (this.isAvatarEdited) {
-					this.$refs.setupPage.$refs.conversationAvatar.saveAvatar()
-				}
-				if (this.newConversation.description) {
-					this.handleUpdateDescription()
-				}
-			} catch (error) {
-				console.error('Error creating new conversation: ', error)
-			}
-		},
-		pushNewRoute() {
-			this.$router.push({ name: 'conversation', params: { token: this.newConversation.token } })
-				.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
-		},
-
-		async handleUpdateDescription() {
-			try {
-				await this.$store.dispatch('setConversationDescription', {
-					token: this.newConversation.token,
-					description: this.newConversation.description,
-				})
-			} catch (error) {
-				console.error('Error while setting conversation description', error)
-				showError(t('spreed', 'Error while updating conversation description'))
-			}
-		},
 
 		/** Handles the press of the enter key */
 		handleEnter() {

src/store/conversationsStore.js

@@ -43,6 +43,8 @@ import {
 	setCallPermissions,
 	setMessageExpiration,
 	setConversationPassword,
+	createPublicConversation,
+	createPrivateConversation,
 } from '../services/conversationsService.js'
 import {
 	clearConversationHistory,
@@ -918,6 +920,29 @@ const actions = {
 		}
 	},
 
+	/**
+	 * Creates a new private or public conversation, adds it to the store
+	 *
+	 * @param {object} context default store context;
+	 * @param {object} payload action payload;
+	 * @param {string} payload.conversationName displayed name for a new conversation
+	 * @param {number} payload.isPublic whether a conversation is public or private
+	 * @return {string} token of new conversation
+	 */
+	async createGroupConversation(context, { conversationName, isPublic }) {
+		try {
+			const response = isPublic
+				? await createPublicConversation(conversationName)
+				: await createPrivateConversation(conversationName)
+			const conversation = response.data.ocs.data
+			context.dispatch('addConversation', conversation)
+			return conversation.token
+		} catch (error) {
+			console.error('Error creating new group conversation: ', error)
+			return ''
+		}
+	},
+
 	async setConversationPermissions(context, { token, permissions }) {
 		try {
 			await setConversationPermissions(token, permissions)