From 3630267bc7c374b1ff8117b7e1c84a5fb0bec0e3 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Mon, 17 Feb 2025 19:31:18 +0100
Subject: [PATCH] use native on click handler

---
 packages/ui-components/src/__tests__/OrderDetail.test.svelte  | 2 +-
 packages/ui-components/src/__tests__/TanstackAppTable.test.ts | 4 ++--
 .../ui-components/src/lib/components/TanstackAppTable.svelte  | 3 ++-
 .../src/lib/components/detail/OrderDetail.svelte              | 2 +-
 .../src/lib/components/detail/TanstackOrderQuote.svelte       | 2 +-
 .../src/lib/components/detail/VaultDetail.svelte              | 2 +-
 packages/ui-components/src/lib/components/icon/Refresh.svelte | 2 --
 7 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.svelte b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
index bf43eac1b..b39cc904e 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.svelte
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
@@ -44,7 +44,7 @@
 		{/if}
 
 		<Refresh
-			onClick={() =>
+			on:click={() =>
 				queryClient.invalidateQueries({
 					queryKey: [id],
 					refetchType: 'all',
diff --git a/packages/ui-components/src/__tests__/TanstackAppTable.test.ts b/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
index 9d918df82..d55017655 100644
--- a/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
+++ b/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
@@ -149,7 +149,7 @@ test('shows refresh icon', async () => {
 
 	resolve();
 
-	await waitFor(() => expect(screen.getByTestId('refresh-button')).toBeInTheDocument());
+	await waitFor(() => expect(screen.getByTestId('refreshButton')).toBeInTheDocument());
 });
 
 test('refetches data when refresh button is clicked', async () => {
@@ -170,7 +170,7 @@ test('refetches data when refresh button is clicked', async () => {
 		head: 'Test head'
 	});
 
-	const refreshButton = screen.getByTestId('refresh-button');
+	const refreshButton = screen.getByTestId('refreshButton');
 	await userEvent.click(refreshButton);
 
 	expect(mockRefetch).toHaveBeenCalled();
diff --git a/packages/ui-components/src/lib/components/TanstackAppTable.svelte b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
index 24206cc6a..8742adff7 100644
--- a/packages/ui-components/src/lib/components/TanstackAppTable.svelte
+++ b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
@@ -19,8 +19,9 @@
 	<slot name="title" />
 	<Refresh
 		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+		data-testid="refreshButton"
 		spin={$query.isLoading || $query.isFetching}
-		onClick={() => {
+		on:click={() => {
 			$query.refetch();
 		}}
 	/>
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 529a91333..ce53d6fec 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -131,7 +131,7 @@
 					</Button>
 				{/if}
 				<Refresh
-					onClick={() =>
+					on:click={() =>
 						queryClient.invalidateQueries({
 							queryKey: [id],
 							refetchType: 'all',
diff --git a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
index e18d13961..0de93e799 100644
--- a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
+++ b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
@@ -70,7 +70,7 @@
 			<span></span>
 			<Refresh
 				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
-				onClick={refreshQuotes}
+				on:click={refreshQuotes}
 				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
 			/>
 			<PauseSolid
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 048576051..c5509af1a 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -118,7 +118,7 @@
 			{/if}
 
 			<Refresh
-				onClick={() =>
+				on:click={() =>
 					queryClient.invalidateQueries({
 						queryKey: [id],
 						refetchType: 'all',
diff --git a/packages/ui-components/src/lib/components/icon/Refresh.svelte b/packages/ui-components/src/lib/components/icon/Refresh.svelte
index 2ce30c2b0..d1bc27dab 100644
--- a/packages/ui-components/src/lib/components/icon/Refresh.svelte
+++ b/packages/ui-components/src/lib/components/icon/Refresh.svelte
@@ -16,12 +16,10 @@
 	export let role = ctx.role || 'img';
 	export let ariaLabel = 'refresh';
 	export let spin = false;
-	export let onClick: () => void;
 </script>
 
 <svg
 	data-testid="refresh-button"
-	on:click={onClick}
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	{...$$restProps}