From f7ea6d236ef6150b5644d900fdd72db8fe10645a Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 30 Jul 2022 12:45:20 +1000
Subject: [PATCH] refactor getDevices to reduce code repetition

---
 src/lib/common/apiFunctions.svelte            | 22 +++++++++----------
 src/lib/common/commonFunctions.svelte         |  3 ---
 src/lib/devices/CreateDevice.svelte           | 12 +++-------
 src/lib/devices/DeviceCard/DeviceTags.svelte  |  8 +------
 .../DeviceCard/DeviceTags/NewDeviceTag.svelte | 10 ++-------
 src/lib/devices/DeviceCard/MoveDevice.svelte  | 10 ++-------
 .../devices/DeviceCard/RemoveDevice.svelte    | 10 ++-------
 src/lib/devices/SortDevices.svelte            | 12 ++--------
 src/routes/devices.html.svelte                | 11 ++--------
 9 files changed, 24 insertions(+), 74 deletions(-)
 delete mode 100644 src/lib/common/commonFunctions.svelte

diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index c0e83fe..7fb4201 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
 	import { Device, PreAuthKey, Route, User } from '$lib/common/classes';
+	import { headscaleDeviceStore, alertStore, apiTestStore } from '$lib/common/stores.js'
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -101,7 +102,6 @@
 			});
 	}
 
-
 	export async function removeUser(currentUsername: string): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
@@ -163,10 +163,12 @@
 			});
 	}
 
-	export async function getDevices(sortKey: string, sortDirection: string): Promise<any> {
+	export async function getDevices() {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+		let sortKey = localStorage.getItem('headscaleDeviceSort');
+		let sortDirection = localStorage.getItem('headscaleDeviceSortDirection');
 
 		// endpoint url for getting users
 		let endpointURL = '/api/v1/machine';
@@ -193,17 +195,17 @@
 				}
 			})
 			.catch((error) => {
-				throw error;
+				apiTestStore.set(error);
 			});
 
 		await headscaleDeviceResponse.json().then((data) => {
-			if(sortDirection == 'ascending') {
-				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] < b[sortKey as keyof Device]) ? -1 : 1);
+			if (sortDirection == 'ascending') {
+				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] < b[sortKey as keyof Device] ? -1 : 1));
 			} else {
-				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] > b[sortKey as keyof Device]) ? -1 : 1);
+				headscaleDevices = data.machines.sort((a: Device, b: Device) => (a[sortKey as keyof Device] > b[sortKey as keyof Device] ? -1 : 1));
 			}
 		});
-		return headscaleDevices;
+		headscaleDeviceStore.set(headscaleDevices)
 	}
 
 	export async function getDeviceRoutes(deviceID: string): Promise<Route> {
@@ -251,7 +253,7 @@
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
 
 		// endpoint url for getting users
-		let endpointURL = '/api/v1/machine/' + deviceID + '/routes?routes=' + route.replace('/','%2F');
+		let endpointURL = '/api/v1/machine/' + deviceID + '/routes?routes=' + route.replace('/', '%2F');
 
 		//returning variables
 		let headscaleDeviceResponse: Response = new Response();
@@ -412,9 +414,7 @@
 			});
 	}
 
-
 	export async function moveDevice(deviceID: string, user: string): Promise<any> {
-		
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@@ -444,7 +444,6 @@
 	}
 
 	export async function renameDevice(deviceID: string, name: string): Promise<any> {
-		
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@@ -473,7 +472,6 @@
 			});
 	}
 
-
 	export async function removeDevice(deviceID: string): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
diff --git a/src/lib/common/commonFunctions.svelte b/src/lib/common/commonFunctions.svelte
deleted file mode 100644
index 7b4684d..0000000
--- a/src/lib/common/commonFunctions.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<script context="module" lang="ts">
-  
-</script>
\ No newline at end of file
diff --git a/src/lib/devices/CreateDevice.svelte b/src/lib/devices/CreateDevice.svelte
index a48786d..86718e8 100644
--- a/src/lib/devices/CreateDevice.svelte
+++ b/src/lib/devices/CreateDevice.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores';
+	import { headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores';
 	import { getDevices, newDevice } from '$lib/common/apiFunctions.svelte';
 	import { alertStore } from '$lib/common/stores.js';
 	import { base } from '$app/paths';
@@ -21,13 +21,7 @@
 					newDeviceCardVisible = false;
 					newDeviceKey = '';
 					// refresh devices after editing
-					getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-						.then((devices) => {
-							$headscaleDeviceStore = devices;
-						})
-						.catch((error) => {
-							$alertStore = error;
-						});
+					getDevices();
 				})
 				.catch((error) => {
 					$alertStore = error;
@@ -52,7 +46,7 @@
 			<div in:fade class="m-2">
 				<p>Install Tailscale with the client pointing to your domain (see <a target="_blank" class="link link-primary" href="https://github.com/juanfont/headscale/tree/main/docs">headscale client documentation</a>). Log in using the tray icon, and your browser should give you instructions with a key.</p>
 				<div class="m-2"><code>headscale -n NAMESPACE nodes register --key &lt;your device key&gt;</code></div>
-				<div class = "my-2"><p>Copy the key below:</p></div>
+				<div class="my-2"><p>Copy the key below:</p></div>
 				<form class="flex flex-wrap" bind:this={newDeviceForm} on:submit|preventDefault={newDeviceAction}>
 					<div class="flex-none mr-4">
 						<label class="block text-secondary text-sm font-bold mb-2" for="text">Device Key</label>
diff --git a/src/lib/devices/DeviceCard/DeviceTags.svelte b/src/lib/devices/DeviceCard/DeviceTags.svelte
index f6d1891..b1a4c5c 100644
--- a/src/lib/devices/DeviceCard/DeviceTags.svelte
+++ b/src/lib/devices/DeviceCard/DeviceTags.svelte
@@ -12,13 +12,7 @@
 
 		updateTags(device.id, tagList).then((response) => {
 			// refresh devices after editing
-			getDevices()
-				.then((devices) => {
-					$headscaleDeviceStore = devices;
-				})
-				.catch((error) => {
-					$alertStore = error;
-				});
+			getDevices();
 		})
     .catch((error) => {
       $alertStore = error;
diff --git a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
index 3c1e96f..0390bec 100644
--- a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
+++ b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
@@ -2,7 +2,7 @@
 	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
 	import { Device } from '$lib/common/classes';
 	import { fade } from 'svelte/transition';
-	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
+	import { headscaleDeviceStore, alertStore} from '$lib/common/stores.js';
 
 	let editingTag = false;
 	let newTag = '';
@@ -19,13 +19,7 @@
 				editingTag = false;
 				newTag = '';
 				// refresh devices after editing
-				getDevices()
-					.then((devices) => {
-						$headscaleDeviceStore = devices;
-					})
-					.catch((error) => {
-						$alertStore = error;
-					});
+				getDevices();
 			})
 			.catch((error) => {
 				$alertStore = error;
diff --git a/src/lib/devices/DeviceCard/MoveDevice.svelte b/src/lib/devices/DeviceCard/MoveDevice.svelte
index 73b3874..fe0080b 100644
--- a/src/lib/devices/DeviceCard/MoveDevice.svelte
+++ b/src/lib/devices/DeviceCard/MoveDevice.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
 	import { Device } from '$lib/common/classes';
-	import { headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
+	import { headscaleUserStore, headscaleDeviceStore, alertStore } from '$lib/common/stores';
 	import { moveDevice, getDevices } from '$lib/common/apiFunctions.svelte';
 
 	export let device = new Device();
@@ -13,13 +13,7 @@
 			.then((response) => {
 				deviceMoving = false;
 				// refresh devices after editing
-				getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-					.then((devices) => {
-						$headscaleDeviceStore = devices;
-					})
-					.catch((error) => {
-						$alertStore = error;
-					});
+				getDevices();
 			})
 			.catch((error) => {
 				$alertStore = error;
diff --git a/src/lib/devices/DeviceCard/RemoveDevice.svelte b/src/lib/devices/DeviceCard/RemoveDevice.svelte
index 470ad7d..1c9702c 100644
--- a/src/lib/devices/DeviceCard/RemoveDevice.svelte
+++ b/src/lib/devices/DeviceCard/RemoveDevice.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { getDevices, removeDevice } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores.js';
+	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
 	import { Device } from '$lib/common/classes';
 
 	export let device = new Device();
@@ -12,13 +12,7 @@
 			.then((response) => {
 				cardDeleting = false;
 				// refresh Devices after editing
-				getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-					.then((Devices) => {
-						$headscaleDeviceStore = Devices;
-					})
-					.catch((error) => {
-						$alertStore = error;
-					});
+				getDevices();
 			})
 			.catch((error) => {
 				$alertStore = error;
diff --git a/src/lib/devices/SortDevices.svelte b/src/lib/devices/SortDevices.svelte
index bfe2a12..279973c 100644
--- a/src/lib/devices/SortDevices.svelte
+++ b/src/lib/devices/SortDevices.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
 	import { getDevices } from '$lib/common/apiFunctions.svelte';
-
-	import { headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
+	import { headscaleDeviceStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
 
 	function sortAction() {
-		console.log('hi');
 		if ($headscaleDeviceSortDirectionStore == 'ascending') {
 			$headscaleDeviceSortDirectionStore = 'descending';
 		} else {
 			$headscaleDeviceSortDirectionStore = 'ascending';
 		}
-		getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-			.then((devices) => {
-				$headscaleDeviceStore = devices;
-			})
-			.catch((error) => {
-				$alertStore = error;
-			});
+		getDevices();
 	}
 </script>
 
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index 80aace7..0507180 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -5,7 +5,7 @@
 	import SortDevices from '$lib/devices/SortDevices.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { apiTestStore, headscaleUserStore, headscaleDeviceStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores.js';
+	import { apiTestStore, headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores.js';
 	import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
 	import { base } from '$app/paths';
 
@@ -31,14 +31,7 @@
 				$apiTestStore = 'failed';
 			});
 		// attempt to pull list of devices
-		getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-			.then((devices) => {
-				$headscaleDeviceStore = devices;
-				$apiTestStore = 'succeeded';
-			})
-			.catch(() => {
-				$apiTestStore = 'failed';
-			});
+		getDevices();
 		// load the page
 		componentLoaded = true;
 	});