Don't remove message from store on deleting it but update it correctly

Signed-off-by: Joas Schilling <coding@schilljs.com>

2 files changed, 38 insertions, 11 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index b58d76386..8e371f477 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -90,7 +90,7 @@ the main body of the message as well as a quote.
 						title=""
 						:size="16" />
 				</div>
-				<div v-else-if="isTemporary && !isTemporaryUpload"
+				<div v-else-if="isTemporary && !isTemporaryUpload || isDeleting"
 					v-tooltip.auto="loadingIconTooltip"
 					class="icon-loading-small message-status"
 					:aria-label="loadingIconTooltip" />
@@ -310,6 +310,7 @@ export default {
 			// Is tall enough for both actions and date upon hovering
 			isTallEnough: false,
 			showReloadButton: false,
+			isDeleting: false,
 		}
 	},
 
@@ -358,6 +359,7 @@ export default {
 		showSentIcon() {
 			return !this.isSystemMessage
 				&& !this.isTemporary
+				&& !this.isDeleting
 				&& this.actorType === this.participant.actorType
 				&& this.actorId === this.participant.actorId
 		},
@@ -429,7 +431,7 @@ export default {
 
 		// Determines whether the date has to be displayed or not
 		hasDate() {
-			if (this.isTemporary || this.sendingFailure) {
+			if (this.isTemporary || this.isDeleting || this.sendingFailure) {
 				// Never on temporary or failed messages
 				return false
 			}
@@ -468,12 +470,14 @@ export default {
 		},
 
 		isMyMsg() {
-			return this.actorId === this.$store.getters.getActorId() && this.actorType === this.$store.getters.getActorType()
+			return this.actorId === this.$store.getters.getActorId()
+				&& this.actorType === this.$store.getters.getActorType()
 		},
 
 		isDeleteable() {
 			return (moment(this.timestamp * 1000).add(6, 'h')) > moment()
 				&& this.messageType === 'comment'
+				&& !this.isDeleting
 				&& (this.participant.participantType === PARTICIPANT.TYPE.OWNER
 					|| this.participant.participantType === PARTICIPANT.TYPE.MODERATOR
 					|| this.isMyMsg)
@@ -547,11 +551,16 @@ export default {
 			})
 			EventBus.$emit('focusChatInput')
 		},
-		handleDelete() {
-			this.$store.dispatch('deleteMessage', {
-				token: this.token,
-				id: this.id,
+		async handleDelete() {
+			this.isDeleting = true
+			await this.$store.dispatch('deleteMessage', {
+				message: {
+					token: this.token,
+					id: this.id,
+				},
+				placeholder: t('spreed', 'Deleting message'),
 			})
+			this.isDeleting = false
 		},
 	},
 }
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 7233f7bf7..5aee061ff 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -131,6 +131,16 @@ const mutations = {
 	},
 
 	/**
+	 * Deletes a message from the store.
+	 * @param {object} state current store state;
+	 * @param {object} message the message;
+	 * @param {string} tempMessage Placeholder message until deleting finished
+	 */
+	markMessageAsDeleted(state, { message, placeholder }) {
+		Vue.set(state.messages[message.token][message.id], 'messageType', 'comment_deleted')
+		Vue.set(state.messages[message.token][message.id], 'message', placeholder)
+	},
+	/**
 	 * Adds a temporary message to the store.
 	 * @param {object} state current store state;
 	 * @param {object} message the temporary message;
@@ -222,11 +232,19 @@ const actions = {
 	 * Delete a message
 	 *
 	 * @param {object} context default store context;
-	 * @param {string} message the message to be deleted;
+	 * @param {object} message the message to be deleted;
+	 * @param {string} placeholder Placeholder message until deleting finished
 	 */
-	deleteMessage(context, message) {
-		context.commit('deleteMessage', message)
-		deleteMessage(message)
+	async deleteMessage(context, { message, placeholder }) {
+		context.commit('markMessageAsDeleted', { message, placeholder })
+		const response = await deleteMessage(message)
+
+		if (response.parent) {
+			context.commit('addMessage', response.parent)
+			response.parent = response.parent.id
+		}
+
+		context.commit('addMessage', response)
 	},
 
 	/**