migration to new backend

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

@@ -0,0 +1,101 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Country } from '$lib/types';
+import { redirect, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		const res = await fetch(`${endpoint}/api/countries/`, {
+			method: 'GET',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!res.ok) {
+			console.error('Failed to fetch countries');
+			return { status: 500 };
+		} else {
+			const countries = (await res.json()) as Country[];
+			return {
+				props: {
+					countries
+				}
+			};
+		}
+	}
+
+	return {};
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	markVisited: async (event) => {
+		const body = await event.request.json();
+
+		if (!body || !body.regionId) {
+			return {
+				status: 400
+			};
+		}
+
+		if (!event.locals.user || !event.cookies.get('auth')) {
+			return redirect(302, '/login');
+		}
+
+		const res = await fetch(`${endpoint}/api/visitedregion/`, {
+			method: 'POST',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ region: body.regionId })
+		});
+
+		if (!res.ok) {
+			console.error('Failed to mark country as visited');
+			return { status: 500 };
+		} else {
+			return {
+				status: 200,
+				data: await res.json()
+			};
+		}
+	},
+	removeVisited: async (event) => {
+		const body = await event.request.json();
+
+		console.log(body);
+
+		if (!body || !body.visitId) {
+			return {
+				status: 400
+			};
+		}
+
+		const visitId = body.visitId as number;
+
+		if (!event.locals.user || !event.cookies.get('auth')) {
+			return redirect(302, '/login');
+		}
+
+		const res = await fetch(`${endpoint}/api/visitedregion/${visitId}/`, {
+			method: 'DELETE',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			}
+		});
+
+		if (res.status !== 204) {
+			console.error('Failed to remove country from visited');
+			return { status: 500 };
+		} else {
+			return {
+				status: 200
+			};
+		}
+	}
+};

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import CountryCard from '$lib/components/CountryCard.svelte';
+	import type { Country } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	console.log(data);
+
+	const countries: Country[] = data.props?.countries || [];
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
+
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each countries as country}
+		<CountryCard countryCode={country.country_code} countryName={country.name} />
+		<!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
+	{/each}
+</div>
+
+<svelte:head>
+	<title>WorldTravel | AdventureLog</title>
+	<meta name="description" content="Explore the world and add countries to your visited list!" />
+</svelte:head>

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>