From b5dfc7ccc17e2d9961b68c9b225db35cba5a3f5f Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 16 Jul 2022 20:19:51 +1000
Subject: [PATCH] refactor: split out remove user component

---
 src/lib/common/apiFunctions.svelte |  1 -
 src/lib/index/EditUser.svelte      |  2 +-
 src/lib/index/RemoveUser.svelte    | 52 +++++++++++++++++++++
 src/lib/index/UserCard.svelte      | 73 ++++++------------------------
 4 files changed, 68 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/index/RemoveUser.svelte

diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index 592428d..1984d16 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
 import { Device, User } from "$lib/common/classes";
-import { alertStore } from "$lib/common/stores.js";
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
diff --git a/src/lib/index/EditUser.svelte b/src/lib/index/EditUser.svelte
index af15466..707215d 100644
--- a/src/lib/index/EditUser.svelte
+++ b/src/lib/index/EditUser.svelte
@@ -56,7 +56,7 @@
   </svg></button
 >
 <!-- edit cancel symbol -->
-<button type="button" in:fade on:click|stopPropagation={() => (cardEditing = false)} class=""
+<button type="button" in:fade on:click|stopPropagation={() => (cardEditing = false)}
   ><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
     <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg></button
diff --git a/src/lib/index/RemoveUser.svelte b/src/lib/index/RemoveUser.svelte
new file mode 100644
index 0000000..02e25bd
--- /dev/null
+++ b/src/lib/index/RemoveUser.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { getUsers, removeUser } from '$lib/common/apiFunctions.svelte';
+	import { headscaleUserStore, alertStore } from '$lib/common/stores.js';
+	import { User } from '$lib/common/classes';
+
+	export let user = new User();
+	let cardDeleting = false;
+
+	function removeUserAction() {
+		removeUser(user.name)
+			.then((response) => {
+				cardDeleting = false;
+				// refresh users after editing
+				getUsers()
+					.then((users) => {
+						$headscaleUserStore = users;
+					})
+					.catch((error) => {
+						$alertStore = error;
+					});
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
+	}
+</script>
+
+{#if !cardDeleting}
+	<!-- Delete trash symbol -->
+	<button on:click|stopPropagation={() => (cardDeleting = true)} class="mr-4"
+		><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+		</svg></button
+	>
+{:else}
+	<!-- Delete Warning -->
+	<span in:fade class="font-bold text-red-400">Deleting {user.name}. Confirm </span>
+	<!-- Delete confirm symbol -->
+	<button in:fade on:click|stopPropagation={() => removeUserAction()}
+		><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+		</svg></button
+	>
+	<span in:fade class="font-bold text-red-400">or Cancel </span>
+	<!-- Delete cancel symbol -->
+	<button in:fade on:click|stopPropagation={() => (cardDeleting = false)} class="mr-4"
+		><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+		</svg></button
+	>
+{/if}
diff --git a/src/lib/index/UserCard.svelte b/src/lib/index/UserCard.svelte
index 5fc332d..74c7004 100644
--- a/src/lib/index/UserCard.svelte
+++ b/src/lib/index/UserCard.svelte
@@ -1,32 +1,12 @@
 <script lang="ts">
 	import { fade, slide } from 'svelte/transition';
-	import { headscaleUserStore, alertStore } from '$lib/common/stores.js';
-	import { getUsers, removeUser } from '$lib/common/apiFunctions.svelte';
 	import EditUser from '$lib/index/EditUser.svelte';
+	import RemoveUser from '$lib/index/RemoveUser.svelte';
 	import { User } from '$lib/common/classes';
 
 	// function for refreshing users from parent
 	export let user = new User();
 	let cardExpanded = false;
-	let cardDeleting = false;
-
-	function removeUserAction() {
-		removeUser(user.name)
-			.then((response) => {
-				cardDeleting = false;
-				// refresh users after editing
-				getUsers()
-					.then((users) => {
-						$headscaleUserStore = users;
-					})
-					.catch((error) => {
-						$alertStore = error;
-					});
-			})
-			.catch((error) => {
-				$alertStore = error;
-			});
-	}
 </script>
 
 <div in:fade class="card-primary">
@@ -35,43 +15,20 @@
 			<EditUser {user} />
 		</div>
 		<div>
-		{#if !cardDeleting}
-			<!-- Delete trash symbol -->
-			<button on:click|stopPropagation={() => (cardDeleting = true)} class="mr-4"
-				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-				</svg></button
-			>
-		{:else}
-			<!-- Delete Warning -->
-			<span in:fade class="font-bold text-red-400">Deleting {user.name}. Confirm </span>
-			<!-- Delete confirm symbol -->
-			<button in:fade on:click|stopPropagation={() => removeUserAction()}
-				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-				</svg></button
-			>
-			<span in:fade class="font-bold text-red-400">or Cancel </span>
-			<!-- Delete cancel symbol -->
-			<button in:fade on:click|stopPropagation={() => (cardDeleting = false)} class="mr-4"
-				><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-				</svg></button
-			>
-		{/if}
-		<!-- chevron for expanding -->
-		<button>
-			{#if !cardExpanded}
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-				</svg>
-			{:else}
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
-				</svg>
-			{/if}
-		</button>
-	</div>
+			<RemoveUser {user} />
+			<!-- chevron for expanding -->
+			<button>
+				{#if !cardExpanded}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+					</svg>
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+					</svg>
+				{/if}
+			</button>
+		</div>
 	</div>
 	{#if cardExpanded}
 		<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->