From 72a3d2122c7c9d1289ad32a1a1aa46935acbce22 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Sat, 1 Apr 2023 10:45:40 +0200
Subject: [PATCH] flatten components, remove redundant files

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ConversationsOptionsList.vue   |  90 ----------
 .../ConversationsList/ConversationsList.vue   | 145 ----------------
 src/components/LeftSidebar/LeftSidebar.vue    | 156 ++++++++++++++----
 3 files changed, 121 insertions(+), 270 deletions(-)
 delete mode 100644 src/components/ConversationsOptionsList.vue
 delete mode 100644 src/components/LeftSidebar/ConversationsList/ConversationsList.vue

diff --git a/src/components/ConversationsOptionsList.vue b/src/components/ConversationsOptionsList.vue
deleted file mode 100644
index c6bf5af722..0000000000
--- a/src/components/ConversationsOptionsList.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
-  -
-  - @author Joas Schilling <coding@schilljs.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<ul class="contacts-list">
-		<NcListItem v-for="item of items"
-			:key="item.id"
-			:title="item.label"
-			@click="onClick(item)">
-			<template #icon>
-				<ConversationIcon :item="iconData(item)"
-					:disable-menu="true" />
-			</template>
-		</NcListItem>
-	</ul>
-</template>
-
-<script>
-import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
-
-import ConversationIcon from './ConversationIcon.vue'
-
-import { CONVERSATION } from '../constants.js'
-
-export default {
-	name: 'ConversationsOptionsList',
-	components: {
-		ConversationIcon,
-		NcListItem,
-	},
-	props: {
-		items: {
-			type: Array,
-			required: true,
-		},
-		isLoading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	methods: {
-		// forward click event
-		onClick(item) {
-			this.$emit('click', item)
-		},
-		iconData(item) {
-			if (item.source === 'users') {
-				return {
-					type: CONVERSATION.TYPE.ONE_TO_ONE,
-					displayName: item.label,
-					name: item.id,
-				}
-			}
-			return {
-				type: CONVERSATION.TYPE.GROUP,
-				objectType: item.source,
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.ellipsis {
-	text-overflow: ellipsis;
-}
-
-// Override vue overflow rules for <ul> elements within app-navigation
-.contacts-list {
-	overflow: visible !important;
-}
-</style>
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
deleted file mode 100644
index 2cebe19c41..0000000000
--- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @author Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<ul class="conversations">
-		<Conversation v-for="item of conversationsList"
-			:key="item.id"
-			:item="item"
-			@click="handleConversationClick(item)" />
-		<template v-if="!initialisedConversations">
-			<LoadingPlaceholder type="conversations" />
-		</template>
-		<Hint v-else-if="searchText && !conversationsList.length"
-			:hint="t('spreed', 'No matches')" />
-	</ul>
-</template>
-
-<script>
-import { emit } from '@nextcloud/event-bus'
-
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
-
-import Hint from '../../Hint.vue'
-import LoadingPlaceholder from '../../LoadingPlaceholder.vue'
-import Conversation from './Conversation.vue'
-
-import { EventBus } from '../../../services/EventBus.js'
-
-export default {
-	name: 'ConversationsList',
-	components: {
-		Conversation,
-		Hint,
-		LoadingPlaceholder,
-	},
-	mixins: [isMobile],
-	props: {
-		searchText: {
-			type: String,
-			default: '',
-		},
-
-		conversationsList: {
-			type: Array,
-			required: true,
-		},
-
-		initialisedConversations: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	data() {
-		return {
-			isFetchingConversations: false,
-		}
-	},
-
-	mounted() {
-		EventBus.$on('route-change', this.onRouteChange)
-		EventBus.$once('joined-conversation', ({ token }) => {
-			this.scrollToConversation(token)
-		})
-	},
-
-	beforeDestroy() {
-		EventBus.$off('route-change', this.onRouteChange)
-	},
-
-	methods: {
-		scrollToConversation(token) {
-			// FIXME: not sure why we can't scroll earlier even when the element exists already
-			// when too early, Firefox only scrolls a few pixels towards the element but
-			// not enough to make it visible
-			setTimeout(() => {
-				const conversation = document.getElementById(`conversation_${token}`)
-				if (!conversation) {
-					return
-				}
-				this.$nextTick(() => {
-					conversation.scrollIntoView({
-						behavior: 'smooth',
-						block: 'start',
-						inline: 'nearest',
-					})
-				})
-			}, 500)
-		},
-		onRouteChange({ from, to }) {
-			if (from.name === 'conversation'
-				&& to.name === 'conversation'
-				&& from.params.token === to.params.token) {
-				// this is triggered when the hash in the URL changes
-				return
-			}
-			if (from.name === 'conversation') {
-				this.$store.dispatch('leaveConversation', { token: from.params.token })
-				if (to.name !== 'conversation') {
-					this.$store.dispatch('updateToken', '')
-				}
-			}
-			if (to.name === 'conversation') {
-				this.$store.dispatch('joinConversation', { token: to.params.token })
-			}
-		},
-
-		// Emit the click event so the search text in the leftsidebar can be reset.
-		handleConversationClick(item) {
-			this.$emit('click-search-result', item.token)
-			if (this.isMobile) {
-				emit('toggle-navigation', {
-					open: false,
-				})
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-// Override vue overflow rules for <ul> elements within app-navigation
-.conversations {
-	overflow: visible !important;
-	margin-top: 4px;
-}
-</style>
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index bc2f0ba89c..fb40ee1513 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -33,20 +33,21 @@
 			<NewGroupConversation v-if="canStartConversations" />
 		</div>
 		<template #list>
-			<li ref="container"
-				class="left-sidebar__list"
-				@scroll="debounceHandleScroll">
-				<ul class="scroller">
+			<li class="left-sidebar__list">
+				<ul ref="scroller"
+					class="scroller"
+					@scroll="debounceHandleScroll">
 					<NcAppNavigationCaption :class="{'hidden-visually': !isSearching}"
 						:title="t('spreed', 'Conversations')" />
-					<li role="presentation">
-						<ConversationsList ref="conversationsList"
-							:conversations-list="conversationsList"
-							:initialised-conversations="initialisedConversations"
-							:search-text="searchText"
-							@click-search-result="handleClickSearchResult"
-							@focus="setFocusedIndex" />
-					</li>
+					<Conversation v-for="item of conversationsList"
+						:key="item.id"
+						:item="item"
+						@click="handleClickSearchResult(item)" />
+					<template v-if="!initialisedConversations">
+						<LoadingPlaceholder type="conversations" />
+					</template>
+					<Hint v-else-if="searchText && !conversationsList.length"
+						:hint="t('spreed', 'No matches')" />
 					<template v-if="isSearching">
 						<template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0">
 							<NcAppNavigationCaption :title="t('spreed', 'Open conversations')" />
@@ -58,10 +59,15 @@
 						</template>
 						<template v-if="searchResultsUsers.length !== 0">
 							<NcAppNavigationCaption :title="t('spreed', 'Users')" />
-							<li v-if="searchResultsUsers.length !== 0" role="presentation">
-								<ConversationsOptionsList :items="searchResultsUsers"
-									@click="createAndJoinConversation" />
-							</li>
+							<NcListItem v-for="item of searchResultsUsers"
+								:key="item.id"
+								:title="item.label"
+								@click="createAndJoinConversation(item)">
+								<template #icon>
+									<ConversationIcon :item="iconData(item)"
+										:disable-menu="true" />
+								</template>
+							</NcListItem>
 						</template>
 						<template v-if="!showStartConversationsOptions">
 							<NcAppNavigationCaption v-if="searchResultsUsers.length === 0"
@@ -73,18 +79,28 @@
 					<template v-if="showStartConversationsOptions">
 						<template v-if="searchResultsGroups.length !== 0">
 							<NcAppNavigationCaption :title="t('spreed', 'Groups')" />
-							<li v-if="searchResultsGroups.length !== 0" role="presentation">
-								<ConversationsOptionsList :items="searchResultsGroups"
-									@click="createAndJoinConversation" />
-							</li>
+							<NcListItem v-for="item of searchResultsGroups"
+								:key="item.id"
+								:title="item.label"
+								@click="createAndJoinConversation(item)">
+								<template #icon>
+									<ConversationIcon :item="iconData(item)"
+										:disable-menu="true" />
+								</template>
+							</NcListItem>
 						</template>
 
 						<template v-if="searchResultsCircles.length !== 0">
 							<NcAppNavigationCaption :title="t('spreed', 'Circles')" />
-							<li v-if="searchResultsCircles.length !== 0" role="presentation">
-								<ConversationsOptionsList :items="searchResultsCircles"
-									@click="createAndJoinConversation" />
-							</li>
+							<NcListItem v-for="item of searchResultsCircles"
+								:key="item.id"
+								:title="item.label"
+								@click="createAndJoinConversation(item)">
+								<template #icon>
+									<ConversationIcon :item="iconData(item)"
+										:disable-menu="true" />
+								</template>
+							</NcListItem>
 						</template>
 
 						<NcAppNavigationCaption v-if="sourcesWithoutResults"
@@ -124,11 +140,13 @@ import { loadState } from '@nextcloud/initial-state'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
-import ConversationsOptionsList from '../ConversationsOptionsList.vue'
+import ConversationIcon from '../ConversationIcon.vue'
 import Hint from '../Hint.vue'
+import LoadingPlaceholder from '../LoadingPlaceholder.vue'
 import Conversation from './ConversationsList/Conversation.vue'
-import ConversationsList from './ConversationsList/ConversationsList.vue'
 import NewGroupConversation from './NewGroupConversation/NewGroupConversation.vue'
 import SearchBox from './SearchBox/SearchBox.vue'
 
@@ -148,17 +166,19 @@ export default {
 	components: {
 		NcAppNavigation,
 		NcAppNavigationCaption,
-		ConversationsList,
 		NcButton,
-		ConversationsOptionsList,
 		Hint,
 		SearchBox,
 		NewGroupConversation,
 		Conversation,
+		LoadingPlaceholder,
+		NcListItem,
+		ConversationIcon,
 	},
 
 	mixins: [
 		arrowNavigation,
+		isMobile,
 	],
 
 	data() {
@@ -268,13 +288,17 @@ export default {
 
 		EventBus.$on('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$once('conversations-received', this.handleUnreadMention)
-
+		EventBus.$on('route-change', this.onRouteChange)
+		EventBus.$once('joined-conversation', ({ token }) => {
+			this.scrollToConversation(token)
+		})
 		this.mountArrowNavigation()
 	},
 
 	beforeDestroy() {
 		EventBus.$off('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$off('conversations-received', this.handleUnreadMention)
+		EventBus.$off('route-change', this.onRouteChange)
 
 		this.cancelSearchPossibleConversations()
 		this.cancelSearchPossibleConversations = null
@@ -388,9 +412,12 @@ export default {
 				const conversation = await this.$store.dispatch('createOneToOneConversation', item.id)
 				this.abortSearch()
 				EventBus.$once('joined-conversation', ({ token }) => {
-					this.$refs.conversationsList.scrollToConversation(token)
+					this.scrollToConversation(token)
 				})
-				this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+				this.$router.push({
+					name: 'conversation',
+					params: { token: conversation.token },
+				}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			} else {
 				// For other types we start the conversation creation dialog
 				EventBus.$emit('new-group-conversation-dialog', item)
@@ -400,11 +427,14 @@ export default {
 		async joinListedConversation(conversation) {
 			this.abortSearch()
 			EventBus.$once('joined-conversation', ({ token }) => {
-				this.$refs.conversationsList.scrollToConversation(token)
+				this.scrollToConversation(token)
 			})
 			// 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}`))
+			this.$router.push({
+				name: 'conversation',
+				params: { token: conversation.token },
+			}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 		},
 
 		hasOneToOneConversationWith(userId) {
@@ -427,10 +457,15 @@ export default {
 			emit('show-settings')
 		},
 
-		handleClickSearchResult(selectedConversationToken) {
+		handleClickSearchResult(conversation) {
 			if (this.searchText !== '') {
 				EventBus.$once('joined-conversation', ({ token }) => {
-					this.$refs.conversationsList.scrollToConversation(token)
+					if (this.isMobile) {
+						emit('toggle-navigation', {
+							open: false,
+						})
+					}
+					this.scrollToConversation(token)
 				})
 			}
 			// End the search operation
@@ -547,6 +582,54 @@ export default {
 			}
 			this.handleClickSearchResult()
 		},
+
+		scrollToConversation(token) {
+			// FIXME: not sure why we can't scroll earlier even when the element exists already
+			// when too early, Firefox only scrolls a few pixels towards the element but
+			// not enough to make it visible
+			setTimeout(() => {
+				const conversation = document.getElementById(`conversation_${token}`)
+				if (!conversation) {
+					return
+				}
+				this.$nextTick(() => {
+					conversation.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start',
+						inline: 'nearest',
+					})
+				})
+			}, 500)
+		},
+
+		onRouteChange({ from, to }) {
+			if (from.name === 'conversation'
+				&& to.name === 'conversation'
+				&& from.params.token === to.params.token) {
+				// this is triggered when the hash in the URL changes
+				return
+			}
+			if (from.name === 'conversation') {
+				this.$store.dispatch('leaveConversation', { token: from.params.token })
+			}
+			if (to.name === 'conversation') {
+				this.$store.dispatch('joinConversation', { token: to.params.token })
+			}
+		},
+
+		iconData(item) {
+			if (item.source === 'users') {
+				return {
+					type: CONVERSATION.TYPE.ONE_TO_ONE,
+					displayName: item.label,
+					name: item.id,
+				}
+			}
+			return {
+				type: CONVERSATION.TYPE.GROUP,
+				objectType: item.source,
+			}
+		},
 	},
 }
 </script>
@@ -554,6 +637,7 @@ export default {
 <style lang="scss" scoped>
 
 @import '../../assets/variables';
+
 .scroller {
 	padding: 0 4px 0 6px;
 }
@@ -562,6 +646,7 @@ export default {
 	display: flex;
 	padding: 8px 0 8px 12px;
 	align-items: center;
+
 	&--scrolled-down {
 		border-bottom: 1px solid var(--color-placeholder-dark);
 	}
@@ -587,6 +672,7 @@ export default {
 
 .conversations-search {
 	flex-grow: 1;
+
 	::v-deep .input-field__input {
 		border-radius: var(--border-radius-pill);
 	}