Switch+scroll to joined listed conversation

When joining a listed conversation, the left sidebar now switches back
to the full list and displays a temporary entry while the joining
process is running.

When joining a conversation, the conversation list now automatically
scrolls to the item. It often happens that listable conversation entries
appear lower in the list, so they need to be made visible.

Signed-off-by: Vincent Petry <[email protected]>

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -23,8 +23,9 @@
 	<AppContentListItem
 		:title="item.displayName"
 		:anchor-id="`conversation_${item.token}`"
-		:to="{ name: 'conversation', params: { token: item.token }}"
-		:class="{ 'has-unread-messages': item.unreadMessages }">
+		:to="!isSearchResult ? { name: 'conversation', params: { token: item.token }} : ''"
+		:class="{ 'has-unread-messages': item.unreadMessages }"
+		@click="onClick">
 		<template v-slot:icon>
 			<ConversationIcon
 				:item="item"
@@ -196,6 +197,11 @@ export default {
 		},
 
 		conversationInformation() {
+			// temporary item while joining
+			if (!this.isSearchResult && !this.item.actorId) {
+				return t('spreed', 'Joining conversation...')
+			}
+
 			if (!Object.keys(this.lastChatMessage).length) {
 				return ''
 			}
@@ -361,6 +367,11 @@ export default {
 			await setNotificationLevel(this.item.token, level)
 			this.item.notificationLevel = level
 		},
+
+		// forward click event
+		onClick(event) {
+			this.$emit('click', event)
+		},
 	},
 }
 </script>

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -76,16 +76,21 @@ export default {
 	mounted() {
 		EventBus.$on('routeChange', this.onRouteChange)
 		EventBus.$on('newMessagePosted', this.onMessagePosted)
+		EventBus.$on('joinedConversation', this.onJoinedConversation)
 	},
 
 	beforeDestroy() {
 		EventBus.$off('routeChange', this.onRouteChange)
 		EventBus.$off('newMessagePosted', this.onMessagePosted)
+		EventBus.$off('joinedConversation', this.onJoinedConversation)
 	},
 
 	methods: {
-		onMessagePosted({ token }) {
+		scrollToConversation(token) {
 			const conversation = document.getElementById(`conversation_${token}`)
+			if (!conversation) {
+				return
+			}
 			this.$nextTick(() => {
 				conversation.scrollIntoView({
 					behavior: 'smooth',
@@ -94,6 +99,12 @@ export default {
 				})
 			})
 		},
+		onJoinedConversation({ token }) {
+			this.scrollToConversation(token)
+		},
+		onMessagePosted({ token }) {
+			this.scrollToConversation(token)
+		},
 		onRouteChange({ from, to }) {
 			if (from.name === 'conversation'
 				&& to.name === 'conversation'

src/components/LeftSidebar/LeftSidebar.vue

@@ -52,7 +52,7 @@
 						:key="item.id"
 						:item="item"
 						:is-search-result="true"
-						@click="joinListedConversation" />
+						@click="joinListedConversation(item)" />
 				</template>
 				<template v-if="searchResultsUsers.length !== 0">
 					<Caption
@@ -299,13 +299,6 @@ export default {
 			this.focusInitialise()
 		},
 
-		async joinListedConversation(item) {
-			// there's already an event handler in Component.vue that will take care
-			// of switching the route,
-			// so all we need to do today is reset the UI
-			EventBus.$emit('resetSearchFilter')
-		},
-
 		/**
 		 * Create a new conversation with the selected group/user/circle
 		 * @param {Object} item The autocomplete suggestion to start a conversation with
@@ -325,6 +318,13 @@ export default {
 			EventBus.$emit('resetSearchFilter')
 		},
 
+		async joinListedConversation(conversation) {
+			// add as temporary item that will refresh after the joining process is complete
+			this.$store.dispatch('addConversation', conversation)
+			this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+			EventBus.$emit('resetSearchFilter')
+		},
+
 		hasOneToOneConversationWith(userId) {
 			return !!this.conversationsList.find(conversation => conversation.type === CONVERSATION.TYPE.ONE_TO_ONE && conversation.name === userId)
 		},
@@ -341,14 +341,6 @@ export default {
 		handleClickSearchResult(selectedConversationToken) {
 			// End the search operation
 			this.abortSearch()
-			const selectedConversation = document.getElementById(`conversation_${selectedConversationToken}`)
-			this.$nextTick(() => {
-				 selectedConversation.scrollIntoView({
-					behavior: 'smooth',
-					block: 'center',
-					inline: 'nearest',
-				})
-			})
 		},
 
 		sortConversations(conversation1, conversation2) {

src/services/participantsService.js

@@ -61,7 +61,7 @@ const joinConversation = async(token) => {
 		// FIXME Signaling should not be synchronous
 		await signalingJoinConversation(token, response.data.ocs.data.sessionId)
 		SessionStorage.setItem('joined_conversation', token)
-		EventBus.$emit('joinedConversation')
+		EventBus.$emit('joinedConversation', { token })
 		return response
 	} catch (error) {
 		if (error.response.status === 409) {