From 8e973719804b582f05ed116116c2926f103abecc Mon Sep 17 00:00:00 2001
From: Andrey Borysenko <andrey18106x@gmail.com>
Date: Fri, 30 Jun 2023 14:27:09 +0300
Subject: [PATCH] Polish. Use try-catch-finally. Some restructure

---
 .../ProfilePickerReferenceProvider.php        | 97 +++++++++----------
 .../ProfilePickerReferenceWidget.vue          | 90 +++++++----------
 .../ProfilePicker/ProfilesCustomPicker.vue    | 88 +++++++++--------
 .../ProfilePicker/icons/UserIcon.vue          | 39 --------
 src/reference.js                              |  2 +-
 5 files changed, 132 insertions(+), 184 deletions(-)
 delete mode 100644 src/components/ProfilePicker/icons/UserIcon.vue

diff --git a/lib/Reference/ProfilePickerReferenceProvider.php b/lib/Reference/ProfilePickerReferenceProvider.php
index f279dd6ed..6644bbe9b 100644
--- a/lib/Reference/ProfilePickerReferenceProvider.php
+++ b/lib/Reference/ProfilePickerReferenceProvider.php
@@ -26,6 +26,7 @@
 
 namespace OCA\Contacts\Reference;
 
+
 use OC\Collaboration\Reference\LinkReferenceProvider;
 use OCP\Collaboration\Reference\ADiscoverableReferenceProvider;
 use OCP\Collaboration\Reference\Reference;
@@ -39,10 +40,7 @@
 use OCP\IUserManager;
 
 class ProfilePickerReferenceProvider extends ADiscoverableReferenceProvider {
-
-//	private const RICH_OBJECT_TYPE = Application::APP_ID . '_profile_picker';
 	private const RICH_OBJECT_TYPE = 'users_picker_profile';
-
 	private ?string $userId;
 	private IL10N $l10n;
 	private IURLGenerator $urlGenerator;
@@ -105,52 +103,53 @@ public function matchReference(string $referenceText): bool {
 	 * @inheritDoc
 	 */
 	public function resolveReference(string $referenceText): ?IReference {
-		if ($this->matchReference($referenceText)) {
-			$userId = $this->getObjectId($referenceText);
-			$user = $this->userManager->get($userId);
-			if ($user !== null) {
-				$reference = new Reference($referenceText);
-
-				$userDisplayName = $user->getDisplayName();
-				$userEmail = $user->getEMailAddress();
-				$userAvatarUrl = $this->urlGenerator->linkToRouteAbsolute('core.avatar.getAvatar', ['userId' => $userId, 'size' => '64']);
-
-				$bio = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_BIOGRAPHY);
-				$bio = $bio->getScope() !== IAccountManager::SCOPE_PRIVATE ? $bio->getValue() : null;
-				$headline = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_HEADLINE);
-				$location = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ADDRESS);
-				$website = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_WEBSITE);
-				$organisation = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ORGANISATION);
-				$role = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ROLE);
-
-				// for clients who can't render the reference widgets
-				$reference->setTitle($userDisplayName);
-				$reference->setDescription($userEmail ?? $userDisplayName);
-				$reference->setImageUrl($userAvatarUrl);
-
-				// for the Vue reference widget
-				$reference->setRichObject(
-					self::RICH_OBJECT_TYPE,
-					[
-						'user_id' => $userId,
-						'title' => $userDisplayName,
-						'subline' => $userEmail ?? $userDisplayName,
-						'email' => $userEmail,
-						'bio' => isset($bio) && $bio !== '' ? substr_replace($bio, '...', 80, strlen($bio)) : null,
-						'headline' => $headline->getScope() !== IAccountManager::SCOPE_PRIVATE ? $headline->getValue() : null,
-						'location' => $location->getScope() !== IAccountManager::SCOPE_PRIVATE ? $location->getValue() : null,
-						'location_url' => $location->getScope() !== IAccountManager::SCOPE_PRIVATE ? $this->getOpenStreetLocationUrl($location->getValue()) : null,
-						'website' => $website->getScope() !== IAccountManager::SCOPE_PRIVATE ? $website->getValue() : null,
-						'organisation' => $organisation->getScope() !== IAccountManager::SCOPE_PRIVATE ? $organisation->getValue() : null,
-						'role' => $role->getScope() !== IAccountManager::SCOPE_PRIVATE ? $role->getValue() : null,
-						'url' => $referenceText,
-					]
-				);
-				return $reference;
-			}
-			return $this->linkReferenceProvider->resolveReference($referenceText);
+		if (!$this->matchReference($referenceText)) {
+			return null;
 		}
-		return null;
+
+		$userId = $this->getObjectId($referenceText);
+		$user = $this->userManager->get($userId);
+		if ($user !== null) {
+			$reference = new Reference($referenceText);
+
+			$userDisplayName = $user->getDisplayName();
+			$userEmail = $user->getEMailAddress();
+			$userAvatarUrl = $this->urlGenerator->linkToRouteAbsolute('core.avatar.getAvatar', ['userId' => $userId, 'size' => '64']);
+
+			$bio = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_BIOGRAPHY);
+			$bio = $bio->getScope() !== IAccountManager::SCOPE_PRIVATE ? $bio->getValue() : null;
+			$headline = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_HEADLINE);
+			$location = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ADDRESS);
+			$website = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_WEBSITE);
+			$organisation = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ORGANISATION);
+			$role = $this->accountManager->getAccount($user)->getProperty(IAccountManager::PROPERTY_ROLE);
+
+			// for clients who can't render the reference widgets
+			$reference->setTitle($userDisplayName);
+			$reference->setDescription($userEmail ?? $userDisplayName);
+			$reference->setImageUrl($userAvatarUrl);
+
+			// for the Vue reference widget
+			$reference->setRichObject(
+				self::RICH_OBJECT_TYPE,
+				[
+					'user_id' => $userId,
+					'title' => $userDisplayName,
+					'subline' => $userEmail ?? $userDisplayName,
+					'email' => $userEmail,
+					'bio' => isset($bio) && $bio !== '' ? substr_replace($bio, '...', 80, strlen($bio)) : null,
+					'headline' => $headline->getScope() !== IAccountManager::SCOPE_PRIVATE ? $headline->getValue() : null,
+					'location' => $location->getScope() !== IAccountManager::SCOPE_PRIVATE ? $location->getValue() : null,
+					'location_url' => $location->getScope() !== IAccountManager::SCOPE_PRIVATE ? $this->getOpenStreetLocationUrl($location->getValue()) : null,
+					'website' => $website->getScope() !== IAccountManager::SCOPE_PRIVATE ? $website->getValue() : null,
+					'organisation' => $organisation->getScope() !== IAccountManager::SCOPE_PRIVATE ? $organisation->getValue() : null,
+					'role' => $role->getScope() !== IAccountManager::SCOPE_PRIVATE ? $role->getValue() : null,
+					'url' => $referenceText,
+				]
+			);
+			return $reference;
+		}
+		return $this->linkReferenceProvider->resolveReference($referenceText);
 	}
 
 	private function getObjectId(string $url): ?string {
@@ -169,7 +168,7 @@ private function getObjectId(string $url): ?string {
 		return null;
 	}
 
-	private function getOpenStreetLocationUrl($location) {
+	private function getOpenStreetLocationUrl($location): string {
 		return 'https://www.openstreetmap.org/search?query=' . urlencode($location);
 	}
 
diff --git a/src/components/ProfilePicker/ProfilePickerReferenceWidget.vue b/src/components/ProfilePicker/ProfilePickerReferenceWidget.vue
index e931c43e1..42352ae73 100644
--- a/src/components/ProfilePicker/ProfilePickerReferenceWidget.vue
+++ b/src/components/ProfilePicker/ProfilePickerReferenceWidget.vue
@@ -1,33 +1,11 @@
-<!--
- - @copyright Copyright (c) 2023 Andrey Borysenko <andrey18106x@gmail.com>
- -
- - @author 2023 Andrey Borysenko <andrey18106x@gmail.com>
- -
- - @license AGPL-3.0-or-later
- -
- - 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>
-	<div class="profile_picker-referece">
-		<div class="profile_picker-wrapper">
-			<div class="profile-card-header">
-				<NcAvatar :user="richObject.user_id" :size="48" class="profile-avatar" />
-				<div class="profile-title">
+	<div class="profile-reference">
+		<div class="profile-reference__wrapper">
+			<div class="profile-card__header">
+				<NcAvatar :user="richObject.user_id" :size="48" class="profile-card__avatar" />
+				<div class="profile-card__title">
 					<a :href="richObject.url" target="_blank">
-						<UserIcon :size="20" />
+						<Account :size="20" />
 						<strong>
 							{{ richObject.email !== null ? richObject.title + ' - ' + richObject.email : richObject.title }}
 						</strong>
@@ -35,7 +13,7 @@
 				</div>
 			</div>
 			<div class="profile-content">
-				<p class="profile-subline">
+				<p class="profile-content__subline">
 					<span v-if="richObject.headline" class="headline">
 						{{ richObject.headline }}
 					</span>
@@ -73,23 +51,23 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import Account from 'vue-material-design-icons/Account.vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
-import TextAccount from 'vue-material-design-icons/TextAccount.vue'
-import UserIcon from './icons/UserIcon.vue'
-import Domain from 'vue-material-design-icons/Domain.vue'
 import Web from 'vue-material-design-icons/Web.vue'
+import Domain from 'vue-material-design-icons/Domain.vue'
 import Handshake from 'vue-material-design-icons/Handshake.vue'
+import TextAccount from 'vue-material-design-icons/TextAccount.vue'
 
 export default {
 	name: 'ProfilePickerReferenceWidget',
 	components: {
 		NcAvatar,
+		Account,
 		MapMarker,
-		TextAccount,
-		UserIcon,
-		Domain,
 		Web,
+		Domain,
 		Handshake,
+		TextAccount,
 	},
 	props: {
 		richObjectType: {
@@ -109,44 +87,44 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.profile_picker-referece {
+.profile-reference {
 	width: 100%;
 	white-space: normal;
 	display: flex;
 
-	.profile_picker-wrapper {
+	.profile-reference__wrapper {
 		width: 100%;
 		display: flex;
 		align-items: center;
 		flex-direction: column;
 
-		.profile-card-header {
+		.profile-card__header {
 			width: 100%;
 			min-height: 70px;
 			background-color: var(--color-primary);
 			background-image: var(--gradient-primary-background);
 			position: relative;
+		}
+
+		.profile-card__avatar {
+			position: relative;
+			bottom: -50%;
+			left: 10px;
+		}
 
-			.profile-avatar {
-				position: relative;
-				bottom: -50%;
-				left: 10px;
+		.profile-card__title {
+			display: flex;
+			position: relative;
+			bottom: 5px;
+			left: 70px;
+
+			& span {
+				margin-right: 5px;
 			}
 
-			.profile-title {
+			& a {
 				display: flex;
-				position: relative;
-				bottom: 5px;
-				left: 70px;
-
-				& span {
-					margin-right: 5px;
-				}
-
-				& a {
-					display: flex;
-					color: #fff;
-				}
+				color: #fff;
 			}
 		}
 
@@ -164,7 +142,7 @@ export default {
 			padding-left: 5px;
 		}
 
-		.profile-subline {
+		.profile-content__subline {
 			padding: 0 0 0 10px;
 
 			& span.material-design-icon {
diff --git a/src/components/ProfilePicker/ProfilesCustomPicker.vue b/src/components/ProfilePicker/ProfilesCustomPicker.vue
index abcbfae35..b209b0fd1 100644
--- a/src/components/ProfilePicker/ProfilesCustomPicker.vue
+++ b/src/components/ProfilePicker/ProfilesCustomPicker.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="profiles-picker-content">
-		<div class="heading">
+	<div class="profile-picker">
+		<div class="profile-picker__heading">
 			<h2>
 				{{ t('contacts', 'Profile picker') }}
 			</h2>
@@ -24,11 +24,11 @@
 			</div>
 			<NcEmptyContent class="empty-content">
 				<template #icon>
-					<UserIcon />
+					<Account :size="20" />
 				</template>
 			</NcEmptyContent>
 		</div>
-		<div class="footer">
+		<div class="profile-picker__footer">
 			<NcButton v-if="selectedProfile !== null"
 				type="primary"
 				:aria-label="t('contacts', 'Insert selected user profile link')"
@@ -44,26 +44,29 @@
 </template>
 
 <script>
-import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
-import UserIcon from './icons/UserIcon.vue'
-
-import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
+
 import debounce from "debounce";
 
+import {
+	NcSelect,
+	NcButton,
+	NcEmptyContent
+} from '@nextcloud/vue'
+
+import Account from 'vue-material-design-icons/Account.vue'
+import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
+
 export default {
 	name: 'ProfilesCustomPicker',
 
 	components: {
 		NcSelect,
 		NcButton,
-		ArrowRightIcon,
-		UserIcon,
 		NcEmptyContent,
+		Account,
+		ArrowRightIcon,
 	},
 
 	props: {
@@ -107,10 +110,11 @@ export default {
 
 	methods: {
 		focusOnInput() {
-			setTimeout(() => {
+			this.$nextTick(() => {
 				this.$refs['profiles-search-input'].$el.getElementsByTagName('input')[0]?.focus()
-			}, 300)
+			})
 		},
+
 		async searchForProfile(query) {
 			if (query.trim() === '' || query.trim().length < 3) {
 				return
@@ -119,12 +123,15 @@ export default {
 			this.loading = true
 			await this.debounceFindProfiles(query)
 		},
+
 		debounceFindProfiles: debounce(function (...args) {
 			this.findProfiles(...args)
 		}, 300),
+
 		async findProfiles(query) {
 			const url = generateOcsUrl('core/autocomplete/get?search={searchQuery}&itemType=%20&itemId=%20&shareTypes[]=0&limit=20', { searchQuery: query })
-			await axios.get(url).then(res => {
+			try {
+				const res = await axios.get(url)
 				this.profiles = res.data.ocs.data.map(userAutocomplete => {
 					return {
 						user: userAutocomplete.id,
@@ -134,33 +141,35 @@ export default {
 						isNoUser: userAutocomplete.source.startsWith('users'),
 					}
 				})
-			}).catch(err => {
-				console.debug(err)
-			})
-			this.loading = false
+			} catch (err) {
+				console.error(err)
+			} finally {
+				this.loading = false
+			}
 		},
+
 		submit() {
 			this.resultUrl = window.location.origin + generateUrl(`/u/${this.selectedProfile.user.trim().toLowerCase()}`, null, { noRewrite: true })
 			this.$emit('submit', this.resultUrl)
 		},
+
 		resolveResult(selectedItem) {
 			this.loading = true
 			this.abortController = new AbortController()
 			this.selectedProfile = selectedItem
 			this.resultUrl = window.location.origin + generateUrl(`/u/${this.selectedProfile.user.trim().toLowerCase()}`, null, { noRewrite: true })
-			axios.get(generateOcsUrl('references/resolve', 2) + '?reference=' + encodeURIComponent(this.resultUrl), {
-				signal: this.abortController.signal,
-			})
-				.then((response) => {
-					this.reference = response.data.ocs.data.references[this.resultUrl]
-				})
-				.catch((error) => {
-					console.error(error)
-				})
-				.then(() => {
-					this.loading = false
+			try {
+				const res = axios.get(generateOcsUrl('references/resolve', 2) + '?reference=' + encodeURIComponent(this.resultUrl), {
+					signal: this.abortController.signal,
 				})
+				this.reference = res.data.ocs.data.references[this.resultUrl]
+			} catch (err) {
+				console.error(err)
+			} finally {
+				this.loading = false
+			}
 		},
+
 		clearSelection() {
 			this.selectedProfile = null
 			this.resultUrl = null
@@ -171,11 +180,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.heading, .select {
-	width: 100%;
-}
-
-.profiles-picker-content {
+.profile-picker {
 	width: 100%;
 	min-height: 450px;
 	display: flex;
@@ -184,16 +189,21 @@ export default {
 	justify-content: space-between;
 	padding: 12px 16px 16px 16px;
 
-	h2 {
-		text-align: center;
+	&__heading, .select {
+		width: 100%;
+
+		h2 {
+			text-align: center;
+		}
 	}
 
-	.footer {
+	&__footer {
 		width: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: end;
 		margin-top: 12px;
+
 		> * {
 			margin-left: 4px;
 		}
diff --git a/src/components/ProfilePicker/icons/UserIcon.vue b/src/components/ProfilePicker/icons/UserIcon.vue
deleted file mode 100644
index fa8161c60..000000000
--- a/src/components/ProfilePicker/icons/UserIcon.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-	<span :aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon user-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg :fill="fillColor"
-			:width="size"
-			:height="size"
-			enable-background="new 0 0 24 24"
-			version="1.1"
-			viewBox="0 0 24 24"
-			xml:space="preserve"
-			xmlns="http://www.w3.org/2000/svg">
-			<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'UserIcon',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-		size: {
-			type: Number,
-			default: 24,
-		},
-	},
-}
-</script>
diff --git a/src/reference.js b/src/reference.js
index 899a2d986..c32f2d4a6 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -1,5 +1,5 @@
 import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import { getRequestToken } from "@nextcloud/auth"
+import { getRequestToken } from '@nextcloud/auth'
 
 __webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
 __webpack_public_path__ = OC.linkTo('contacts', 'js/') // eslint-disable-line