trips

frontend/src/routes/trips/+page.server.ts

@@ -9,11 +9,12 @@ export const load = (async (event) => {
 	} else {
 		let res = await event.fetch(`${endpoint}/api/trips/`, {
 			headers: {
-				Cookies: event.cookies.get('auth') || ''
+				Cookie: `${event.cookies.get('auth')}`
 			}
 		});
 		if (res.ok) {
 			let data = await res.json();
+			console.log(data);
 			return {
 				props: {
 					trips: data
@@ -22,7 +23,7 @@ export const load = (async (event) => {
 		} else {
 			return {
 				status: res.status,
-				error: new Error('Failed to fetch data')
+				error: 'Failed to load trips'
 			};
 		}
 	}

frontend/src/routes/trips/+page.svelte

@@ -10,10 +10,13 @@
 
 	let trips: Trip[];
 	let notFound: boolean = false;
+	let noTrips: boolean = false;
 
 	onMount(() => {
-		if (data.props && data.props.trips) {
+		if (data.props && data.props.trips?.length > 0) {
 			trips = data.props.trips;
+		} else if (data.props && data.props.trips?.length === 0) {
+			noTrips = true;
 		} else {
 			notFound = true;
 		}
@@ -44,6 +47,24 @@
 	</div>
 {/if}
 
+{#if noTrips}
+	<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 Trips Found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				There are no trips to display. Please try again later.
+			</p>
+		</div>
+	</div>
+{/if}
+
 {#if trips && !notFound}
 	<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 		{#each trips as trip (trip.id)}