Keep pending input message per conversation

Save the message from the current input field by conversation into the
store.

This makes it possible to keep the message when switching the
conversation.

Also fixes an issue where joining or leaving a call would clear the
message due to the field being destroyed and recreated between the
message list and the sidebar.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

2 files changed, 65 insertions, 3 deletions

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index c16c5a101..faeb145a5 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -230,11 +230,24 @@ export default {
 		disabled(newValue) {
 			this.$refs.uploadMenu.$refs.menuButton.disabled = newValue
 		},
+
+		text(newValue) {
+			this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: newValue })
+		},
+
+		token(token) {
+			if (token) {
+				this.text = this.$store.getters.currentMessageInput(token) || ''
+			} else {
+				this.text = ''
+			}
+		},
 	},
 
 	mounted() {
 		EventBus.$on('uploadStart', this.handleUploadStart)
 		EventBus.$on('retryMessage', this.handleRetryMessage)
+		this.text = this.$store.getters.currentMessageInput(this.token) || ''
 	},
 
 	beforeDestroy() {
diff --git a/src/store/quoteReplyStore.js b/src/store/quoteReplyStore.js
index 27b93605e..334bf8293 100644
--- a/src/store/quoteReplyStore.js
+++ b/src/store/quoteReplyStore.js
@@ -24,6 +24,11 @@ import Vue from 'vue'
 
 const state = {
 	messagesToBeReplied: {},
+
+	/**
+	 * Cached last message input by conversation token
+	 */
+	currentMessageInput: {},
 }
 
 const getters = {
@@ -32,6 +37,12 @@ const getters = {
 			return state.messagesToBeReplied[token]
 		}
 	},
+
+	currentMessageInput: (state) => (token) => {
+		if (state.currentMessageInput[token]) {
+			return state.currentMessageInput[token]
+		}
+	},
 }
 
 const mutations = {
@@ -46,15 +57,30 @@ const mutations = {
 		Vue.set(state.messagesToBeReplied, [messageToBeReplied.token], messageToBeReplied)
 	},
 	/**
-	 * Add a message to be replied to the store. This message is generated when the
-	 * reply button is clicked.
+	 * Removes message to be replied from the store for the
+	 * given conversation.
 	 *
 	 * @param {object} state current store state;
-	 * @param {object} token The message to be replied;
+	 * @param {string} token The conversation token
 	 */
 	removeMessageToBeReplied(state, token) {
 		Vue.delete(state.messagesToBeReplied, token)
 	},
+
+	/**
+	 * Sets the current message input for a given conversation
+	 *
+	 * @param {object} state Current store state;
+	 * @param {string} token The conversation token;
+	 * @param {string} text Message text to set or null to clear it;
+	 */
+	setCurrentMessageInput(state, { token, text = null }) {
+		if (text !== null) {
+			Vue.set(state.currentMessageInput, token, text)
+		} else {
+			Vue.delete(state.currentMessageInput, token)
+		}
+	},
 }
 
 const actions = {
@@ -69,6 +95,7 @@ const actions = {
 	addMessageToBeReplied(context, messageToBeReplied) {
 		context.commit('addMessageToBeReplied', messageToBeReplied)
 	},
+
 	/**
 	 * Remove a message to be replied to the store. This is used either when the message
 	 * has been replied to or the user finally decides to dismiss the reply operation.
@@ -80,6 +107,28 @@ const actions = {
 	removeMessageToBeReplied(context, token) {
 		context.commit('removeMessageToBeReplied', token)
 	},
+
+	/**
+	 * Clears current messages from a deleted conversation
+	 *
+	 * @param {object} context default store context;
+	 * @param {string} token the token of the conversation to be deleted;
+	 */
+	deleteMessages(context, token) {
+		context.commit('removeMessageToBeReplied', token)
+		context.commit('setCurrentMessageInput', { token, text: null })
+	},
+
+	/**
+	 * Stores the current message input for a given conversation
+	 *
+	 * @param {object} context default store context;
+	 * @param {string} token the token of the conversation to be deleted;
+	 * @param {string} text string to set or null to clear it;
+	 */
+	setCurrentMessageInput(context, { token, text }) {
+		context.commit('setCurrentMessageInput', { token, text })
+	},
 }
 
 export default { state, mutations, getters, actions }