use native on click handler

rainlanguage · Feb 17, 2025 · 3630267 · 3630267
1 parent cf00fcb
commit 3630267
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}