Switch to TanStack Query

SkyfallWasTaken · Aug 30, 2024 · d37b656 · d37b656
1 parent d6435d9
commit d37b656
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"@faker-js/faker": "^8.4.1",
+		"@tanstack/svelte-query": "^5.52.3",
 		"lucide-svelte": "^0.394.0",
 		"ofetch": "^1.3.4",
 		"postal-mime": "^2.2.7"

diff --git a/frontend/src/lib/components/mailbox/Mailbox.svelte b/frontend/src/lib/components/mailbox/Mailbox.svelte
@@ -18,7 +18,7 @@
 				{/each}
 			</Accordion>
 		{:else}
-			<p class="text-lg font-semibold">No emails... yet</p>
+			<h2 class="text-lg font-semibold">No emails... yet</h2>
 			<p>You're all caught up! Go out and do what you do best.</p>
 		{/if}
 	</div>

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,9 +1,21 @@
 <script>
+	import { browser } from '$app/environment';
 	import Header from '$lib/components/Header.svelte';
+	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
 	import '../app.css';
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				enabled: browser
+			}
+		}
+	});
 </script>
 
-<Header />
-<main class="mt-20 px-5 md:px-3 lg:px-0">
-	<slot />
-</main>
+<QueryClientProvider client={queryClient}>
+	<Header />
+	<main class="mt-20 px-5 md:px-3 lg:px-0">
+		<slot />
+	</main>
+</QueryClientProvider>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -3,13 +3,14 @@
 	import { CopyIcon, CopyCheckIcon } from 'lucide-svelte';
 	import { username } from '$lib/stores/mailbox';
 	import { ofetch } from 'ofetch';
-	import { goto } from '$app/navigation';
+	import { createQuery } from '@tanstack/svelte-query';
 	import { debounce } from '$lib/util';
+	import type { Email } from '$lib/email';
 
 	const emailDomain = import.meta.env.VITE_EMAIL_DOMAIN as string;
 
 	function refreshPage() {
-		goto(window.location.href);
+		window.location.reload();
 	}
 
 	function setUsername(event: KeyboardEvent) {
@@ -25,6 +26,16 @@
 			copyButtonState = 'idle';
 		}, 1000);
 	}
+
+	const query = createQuery({
+		queryKey: ['emails', username, emailDomain],
+		queryFn: async () => {
+			const response = await ofetch<Email[]>(
+				`${import.meta.env.VITE_API_ENDPOINT}/emails/${$username}@${emailDomain}`
+			);
+			return response;
+		}
+	});
 </script>
 
 <svelte:head>
@@ -59,15 +70,22 @@
 		<hr />
 
 		<div>
-			{#await ofetch(`${import.meta.env.VITE_API_ENDPOINT}/emails/${$username}@${emailDomain}`)}
+			{#if $query.isLoading}
 				<div
 					class="light-bg dark:bg-surface-500 flex items-center justify-center rounded-md p-6 shadow-sm"
 				>
 					<p class="text-lg font-semibold">One sec...</p>
 				</div>
-			{:then emails}
-				<Mailbox {emails} />
-			{/await}
+			{:else if $query.isError}
+				<div
+					class="light-bg dark:bg-surface-500 flex items-center justify-center rounded-md p-6 shadow-sm"
+				>
+					<h2 class="text-lg font-semibold">Uh oh, something went wrong</h2>
+					<p>Sorry about that! Please refresh the page and try again.</p>
+				</div>
+			{:else if $query.isSuccess}
+				<Mailbox emails={$query.data} />
+			{/if}
 			<p class="my-4 text-gray-400">
 				Hint: <a href="/" class="text-sky-400 hover:underline" on:click={refreshPage}
 					>refresh the page</a