From e3e430e81b62c1b584b2ae794b5e5c5da6705f3b Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 4 Nov 2020 17:01:33 +0100
Subject: [PATCH] Rework scroll into view of conversation after post
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes an issue where a chat in the files sidebar would trigger a warning
because the conversation list element don't exist there.

When posting a message, an event is now triggered so other components
could react on it.

The conversation list will now take the responsibility of scrolling the
current conversation into view after posting, instead of the
NewMessageForm.

The behavior is also adjusted to always scroll regardless where the
conversation is located in the list.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Co-Authored-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 .../ConversationsList/ConversationsList.vue   | 12 +++++++++
 .../NewMessageForm/NewMessageForm.vue         | 25 +------------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
index 38631e435da..1fc4db73e49 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
@@ -75,13 +75,25 @@ export default {
 
 	mounted() {
 		EventBus.$on('routeChange', this.onRouteChange)
+		EventBus.$on('newMessagePosted', this.onMessagePosted)
 	},
 
 	beforeDestroy() {
 		EventBus.$off('routeChange', this.onRouteChange)
+		EventBus.$off('newMessagePosted', this.onMessagePosted)
 	},
 
 	methods: {
+		onMessagePosted({ token }) {
+			const conversation = document.getElementById(`conversation_${token}`)
+			this.$nextTick(() => {
+				conversation.scrollIntoView({
+					behavior: 'smooth',
+					block: 'start',
+					inline: 'nearest',
+				})
+			})
+		},
 		onRouteChange({ from, to }) {
 			if (from.name === 'conversation') {
 				leaveConversation(from.params.token)
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index e01e895c4b8..87a188f0c51 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -180,15 +180,7 @@ export default {
 		},
 	},
 
-	watch: {
-		token(newValue, oldValue) {
-			this.isCurrentConversationIsFirstInList()
-		},
-	},
-
 	mounted() {
-		this.isCurrentConversationIsFirstInList()
-
 		EventBus.$on('uploadStart', this.handleUploadStart)
 	},
 
@@ -271,16 +263,7 @@ export default {
 					// by the server
 					this.$store.dispatch('processMessage', response.data.ocs.data)
 					// Scrolls the conversationlist to conversation
-					if (!this.conversationIsFirstInList) {
-						const conversation = document.getElementById(`conversation_${this.token}`)
-						this.$nextTick(() => {
-							conversation.scrollIntoView({
-								behavior: 'smooth',
-								block: 'center',
-								inline: 'nearest',
-							})
-						})
-					}
+					EventBus.$emit('newMessagePosted', { token: this.token, message: temporaryMessage })
 				} catch (error) {
 					let statusCode = null
 					console.debug(`error while submitting message ${error}`, error)
@@ -387,12 +370,6 @@ export default {
 
 			range.setStartAfter(emojiTextNode)
 		},
-
-		// Check whether the current conversation is the first in the conversations
-		// list and stores the value in the component's data.
-		isCurrentConversationIsFirstInList() {
-			this.conversationIsFirstInList = this.$store.getters.conversationsList.map(conversation => conversation.token).indexOf(this.token) === 0
-		},
 	},
 }
 </script>