search api

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

@@ -0,0 +1,39 @@
+import type { Adventure } from '$lib/types';
+import type { PageServerLoad } from './$types';
+
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	// get url param query
+	const query = event.url.searchParams.get('query');
+
+	if (!query) {
+		return { data: [] };
+	}
+
+	let res = await fetch(`${serverEndpoint}/api/adventures/search/?query=${query}`, {
+		headers: {
+			'Content-Type': 'application/json',
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+
+	if (res.ok) {
+		let data = await res.json();
+		console.log('Search data:', data);
+
+		return {
+			props: {
+				adventures: data.results as Adventure[],
+				nextPage: data.next,
+				prevPage: data.previous,
+				total: data.count,
+				query
+			}
+		};
+	} else {
+		console.error('Failed to fetch search data');
+		return { data: [] };
+	}
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
+	import type { Adventure } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	console.log(data);
+	let adventures: Adventure[] = [];
+	if (data.props) {
+		adventures = data.props.adventures;
+	}
+</script>
+
+{#if adventures.length === 0}
+	<NotFound />
+{:else}
+	{#each adventures as adventure}
+		<AdventureCard type={adventure.type} {adventure} />
+	{/each}
+{/if}