migration to new backend

frontend/src/routes/worldtravel/[id]/+page.server.ts

@@ -0,0 +1,45 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Region, VisitedRegion } from '$lib/types';
+import type { PageServerLoad } from './$types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	const id = event.params.id;
+
+	let regions: Region[] = [];
+	let visitedRegions: VisitedRegion[] = [];
+
+	let res = await fetch(`${endpoint}/api/${id}/regions/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch regions');
+		return { status: 500 };
+	} else {
+		regions = (await res.json()) as Region[];
+	}
+
+	res = await fetch(`${endpoint}/api/${id}/visits/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch visited regions');
+		return { status: 500 };
+	} else {
+		visitedRegions = (await res.json()) as VisitedRegion[];
+	}
+
+	return {
+		props: {
+			regions,
+			visitedRegions
+		}
+	};
+}) satisfies PageServerLoad;

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import RegionCard from '$lib/components/RegionCard.svelte';
+	import type { Region, VisitedRegion } from '$lib/types';
+	import type { PageData } from './$types';
+	export let data: PageData;
+	let regions: Region[] = data.props?.regions || [];
+	let visitedRegions: VisitedRegion[] = data.props?.visitedRegions || [];
+
+	console.log(data);
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Regions</h1>
+
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each regions as region}
+		<RegionCard
+			{region}
+			visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}
+			on:visit={(e) => {
+				visitedRegions = [...visitedRegions, e.detail];
+			}}
+			visit_id={visitedRegions.find((visitedRegion) => visitedRegion.region === region.id)?.id}
+		/>
+	{/each}
+</div>