From 4d0e481f74905dd84c9ac836081a6aa197a40bd9 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 21 Jun 2022 23:24:43 +0100
Subject: [PATCH] Use clipboard util methods in LinkControl

---
 src/components/map/MapContextMenu.vue          |  4 ++--
 src/components/sidebar/FollowTargetSection.vue |  4 ++--
 src/leaflet/control/LinkControl.ts             | 17 ++++++-----------
 src/util.ts                                    |  8 ++++----
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index ddb9fe1..c677298 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/src/components/map/MapContextMenu.vue
@@ -218,8 +218,8 @@ export default defineComponent({
 			messageCopyLink,
 			messageCenterHere,
 
-			copySuccess: clipboardSuccess(),
-			copyError: clipboardError(),
+			copySuccess: clipboardSuccess(store),
+			copyError: clipboardError(store),
 
 			menuVisible,
 			menuElement,
diff --git a/src/components/sidebar/FollowTargetSection.vue b/src/components/sidebar/FollowTargetSection.vue
index 8f14002..7b89cb5 100644
--- a/src/components/sidebar/FollowTargetSection.vue
+++ b/src/components/sidebar/FollowTargetSection.vue
@@ -91,8 +91,8 @@ export default defineComponent({
 			messageHidden,
 			status,
 			location,
-			copySuccess: clipboardSuccess(),
-			copyError: clipboardError(),
+			copySuccess: clipboardSuccess(store),
+			copyError: clipboardError(store),
 		}
 	},
 });
diff --git a/src/leaflet/control/LinkControl.ts b/src/leaflet/control/LinkControl.ts
index d2434ec..7d60dcf 100644
--- a/src/leaflet/control/LinkControl.ts
+++ b/src/leaflet/control/LinkControl.ts
@@ -21,8 +21,7 @@ import {Control, ControlOptions, DomUtil} from 'leaflet';
 import {useStore} from "@/store";
 import '@/assets/icons/link.svg';
 import { toClipboard } from '@soerenmartius/vue3-clipboard';
-import {notify} from "@kyvg/vue3-notification";
-import {computed} from "@vue/runtime-core";
+import {clipboardError, clipboardSuccess} from "@/util";
 
 /**
  * Leaflet map control providing a button for copying a link for the current map view to the clipboard
@@ -38,8 +37,8 @@ export class LinkControl extends Control {
 		const store = useStore(),
 			linkButton = DomUtil.create('button',
 				'leaflet-control-button leaflet-control-link') as HTMLButtonElement,
-			copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess),
-			copyErrorMessage = computed(() => store.state.messages.copyToClipboardError);
+			copySuccess = clipboardSuccess(store),
+			copyError = clipboardError(store);
 
 		linkButton.type = 'button';
 		linkButton.title = store.state.messages.linkTitle;
@@ -50,13 +49,9 @@ export class LinkControl extends Control {
 
 		linkButton.addEventListener('click', e => {
 			e.preventDefault();
-			toClipboard(window.location.href.split("#")[0] + store.getters.url).then(() => {
-				notify(copySuccessMessage.value);
-			}).catch((e) => {
-				notify({ type: 'error', text: copyErrorMessage.value });
-				console.error('Error copying to clipboard', e);
-			});
-
+			toClipboard(window.location.href.split("#")[0] + store.getters.url)
+				.then(copySuccess)
+				.catch(copyError)
 		});
 
 		return linkButton;
diff --git a/src/util.ts b/src/util.ts
index 92767f2..25b0e57 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import {useStore} from "@/store";
 import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
 import {
 	Coordinate,
@@ -26,6 +25,7 @@ import {
 } from "@/index";
 import {notify} from "@kyvg/vue3-notification";
 import {globalMessages, serverMessages} from "../messages";
+import {Store} from "@/store";
 
 const documentRange = document.createRange(),
 	brToSpaceRegex = /<br \/>/g;
@@ -228,14 +228,14 @@ export const stripHTML = (text: string) => {
  * Default success callback function for VueClipboard, will display a notification with the configured copy success
  * message
  */
-export const clipboardSuccess = () => () => notify(useStore().state.messages.copyToClipboardSuccess);
+export const clipboardSuccess = (store: Store) => () => notify(store.state.messages.copyToClipboardSuccess);
 
 /**
  * Default error callback function for VueClipboard, will display a notification with the configured copy error
  * message
  */
-export const clipboardError = () => (e: Error) => {
-	notify({ type: 'error', text: useStore().state.messages.copyToClipboardError });
+export const clipboardError = (store: Store) => (e: Error) => {
+	notify({ type: 'error', text: store.state.messages.copyToClipboardError });
 	console.error('Error copying to clipboard', e);
 };