From d1b9f3a44e84430101ac544015b8fa6e21b51ed2 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Tue, 11 Mar 2025 20:22:05 +0100
Subject: [PATCH] refactor: adapt api key list to new sort behavior

---
 .../settings/admin/api-keys/+page.server.ts   |  9 ++++---
 .../settings/admin/api-keys/+page.svelte      | 26 +++++--------------
 .../admin/api-keys/api-key-dialog.svelte      | 10 ++++---
 .../admin/api-keys/api-key-list.svelte        | 22 +++-------------
 4 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/frontend/src/routes/settings/admin/api-keys/+page.server.ts b/frontend/src/routes/settings/admin/api-keys/+page.server.ts
index ba0d0aab..7f0540e0 100644
--- a/frontend/src/routes/settings/admin/api-keys/+page.server.ts
+++ b/frontend/src/routes/settings/admin/api-keys/+page.server.ts
@@ -1,16 +1,19 @@
 import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import ApiKeyService from '$lib/services/api-key-service';
+import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ cookies }) => {
 	const apiKeyService = new ApiKeyService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
 
-	const apiKeys = await apiKeyService.list({
+	const apiKeysRequestOptions: SearchPaginationSortRequest = {
 		sort: {
 			column: 'lastUsedAt',
 			direction: 'desc' as const
 		}
-	});
+	};
 
-	return apiKeys;
+	const apiKeys = await apiKeyService.list(apiKeysRequestOptions);
+
+	return { apiKeys, apiKeysRequestOptions };
 };
diff --git a/frontend/src/routes/settings/admin/api-keys/+page.svelte b/frontend/src/routes/settings/admin/api-keys/+page.svelte
index 783747f1..785ac804 100644
--- a/frontend/src/routes/settings/admin/api-keys/+page.svelte
+++ b/frontend/src/routes/settings/admin/api-keys/+page.svelte
@@ -2,8 +2,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import ApiKeyService from '$lib/services/api-key-service';
-	import type { ApiKey, ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
-	import type { Paginated } from '$lib/types/pagination.type';
+	import type { ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideMinus } from 'lucide-svelte';
 	import { slide } from 'svelte/transition';
@@ -12,7 +11,8 @@
 	import ApiKeyList from './api-key-list.svelte';
 
 	let { data } = $props();
-	let apiKeys = $state<Paginated<ApiKey>>(data);
+	let apiKeys = $state(data.apiKeys);
+	let apiKeysRequestOptions = $state(data.apiKeysRequestOptions);
 
 	const apiKeyService = new ApiKeyService();
 	let expandAddApiKey = $state(false);
@@ -24,8 +24,7 @@
 			apiKeyResponse = response;
 
 			// After creation, reload the list of API keys
-			const updatedKeys = await apiKeyService.list();
-			apiKeys = updatedKeys;
+			apiKeys = await apiKeyService.list(apiKeysRequestOptions);
 
 			return true;
 		} catch (e) {
@@ -33,19 +32,6 @@
 			return false;
 		}
 	}
-
-	function handleDialogClose(open: boolean) {
-		if (!open) {
-			apiKeyResponse = null;
-			// Refresh the list when dialog closes
-			apiKeyService
-				.list()
-				.then((keys) => {
-					apiKeys = keys;
-				})
-				.catch(axiosErrorToast);
-		}
-	}
 </script>
 
 <svelte:head>
@@ -82,8 +68,8 @@
 		<Card.Title>Manage API Keys</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<ApiKeyList {apiKeys} />
+		<ApiKeyList {apiKeys} requestOptions={apiKeysRequestOptions} />
 	</Card.Content>
 </Card.Root>
 
-<ApiKeyDialog bind:apiKeyResponse onOpenChange={handleDialogClose} />
+<ApiKeyDialog bind:apiKeyResponse />
diff --git a/frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte b/frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte
index b099ae92..1a937937 100644
--- a/frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte
+++ b/frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte
@@ -5,12 +5,16 @@
 	import type { ApiKeyResponse } from '$lib/types/api-key.type';
 
 	let {
-		apiKeyResponse = $bindable(),
-		onOpenChange
+		apiKeyResponse = $bindable()
 	}: {
 		apiKeyResponse: ApiKeyResponse | null;
-		onOpenChange: (open: boolean) => void;
 	} = $props();
+
+	function onOpenChange(open: boolean) {
+		if (!open) {
+			apiKeyResponse = null;
+		}
+	}
 </script>
 
 <Dialog.Root open={!!apiKeyResponse} {onOpenChange}>
diff --git a/frontend/src/routes/settings/admin/api-keys/api-key-list.svelte b/frontend/src/routes/settings/admin/api-keys/api-key-list.svelte
index 5cfd76e3..8a5efbdf 100644
--- a/frontend/src/routes/settings/admin/api-keys/api-key-list.svelte
+++ b/frontend/src/routes/settings/admin/api-keys/api-key-list.svelte
@@ -11,25 +11,15 @@
 	import { toast } from 'svelte-sonner';
 
 	let {
-		apiKeys: initialApiKeys
+		apiKeys,
+		requestOptions
 	}: {
 		apiKeys: Paginated<ApiKey>;
+		requestOptions: SearchPaginationSortRequest;
 	} = $props();
 
-	let apiKeys = $state<Paginated<ApiKey>>(initialApiKeys);
-	let requestOptions: SearchPaginationSortRequest | undefined = $state({
-		sort: {
-			column: 'lastUsedAt',
-			direction: 'desc'
-		}
-	});
 	const apiKeyService = new ApiKeyService();
 
-	// Update the local state whenever the prop changes
-	$effect(() => {
-		apiKeys = initialApiKeys;
-	});
-
 	function formatDate(dateStr: string | undefined) {
 		if (!dateStr) return 'Never';
 		return new Date(dateStr).toLocaleString();
@@ -54,11 +44,6 @@
 			}
 		});
 	}
-
-	$effect(() => {
-		// Initial load uses the server-side data
-		apiKeys = initialApiKeys;
-	});
 </script>
 
 <AdvancedTable
@@ -66,7 +51,6 @@
 	{requestOptions}
 	onRefresh={async (o) => (apiKeys = await apiKeyService.list(o))}
 	withoutSearch
-	defaultSort={{ column: 'lastUsedAt', direction: 'desc' }}
 	columns={[
 		{ label: 'Name', sortColumn: 'name' },
 		{ label: 'Description' },