errors and not found screens

seanmorley15 · Jul 10, 2024 · a6b1d42 · a6b1d42
1 parent b3878bf
commit a6b1d42
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/frontend/src/routes/planner/+page.svelte b/frontend/src/routes/planner/+page.svelte
@@ -6,6 +6,8 @@
 	import type { PageData } from './$types';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 
+	import Lost from '$lib/assets/undraw_lost.svg';
+
 	export let data: PageData;
 	console.log(data);
 
@@ -80,15 +82,30 @@
 	</div>
 </div>
 
-<h1 class="text-center font-bold text-4xl mb-4">Planned Adventures</h1>
+{#if adventures.length > 0}
+	<h1 class="text-center font-bold text-4xl mb-4">Planned Adventures</h1>
+{/if}
+
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each adventures as adventure}
 		<AdventureCard type="planned" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
 	{/each}
 </div>
 
 {#if adventures.length === 0}
-	<div class="flex justify-center items-center h-96">
-		<p class="text-2xl text-primary-content">No planned adventures yet!</p>
+	<div
+		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
+	>
+		<div class="mx-auto max-w-md text-center">
+			<div class="flex items-center justify-center">
+				<img src={Lost} alt="Lost" class="w-1/2" />
+			</div>
+			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+				No planned adventures found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				There are no adventures to display. Add some using the plus button at the bottom right!
+			</p>
+		</div>
 	</div>
 {/if}
diff --git a/frontend/src/routes/visited/+page.svelte b/frontend/src/routes/visited/+page.svelte
@@ -6,6 +6,8 @@
 	import type { PageData } from './$types';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 
+	import Lost from '$lib/assets/undraw_lost.svg';
+
 	export let data: PageData;
 	console.log(data);
 
@@ -80,15 +82,30 @@
 	</div>
 </div>
 
-<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+{#if adventures.length > 0}
+	<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+{/if}
+
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each adventures as adventure}
 		<AdventureCard type="visited" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
 	{/each}
 </div>
 
 {#if adventures.length === 0}
-	<div class="flex justify-center items-center h-96">
-		<p class="text-2xl text-primary-content">No visited adventures yet!</p>
+	<div
+		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
+	>
+		<div class="mx-auto max-w-md text-center">
+			<div class="flex items-center justify-center">
+				<img src={Lost} alt="Lost" class="w-1/2" />
+			</div>
+			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+				No visited adventures found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				There are no adventures to display. Add some using the plus button at the bottom right!
+			</p>
+		</div>
 	</div>
 {/if}
diff --git a/frontend/src/routes/worldtravel/[id]/+page.server.ts b/frontend/src/routes/worldtravel/[id]/+page.server.ts
@@ -1,5 +1,6 @@
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 import type { Country, Region, VisitedRegion } from '$lib/types';
+import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
@@ -19,16 +20,11 @@ export const load = (async (event) => {
 	});
 	if (!res.ok) {
 		console.error('Failed to fetch regions');
-		return { status: 500 };
+		return redirect(302, '/404');
 	} else {
 		regions = (await res.json()) as Region[];
 	}
 
-	if (regions.length === 0) {
-		console.error('No regions found');
-		return { status: 404 };
-	}
-
 	res = await fetch(`${endpoint}/api/${id}/visits/`, {
 		method: 'GET',
 		headers: {