Update map filtering

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

@@ -8,7 +8,7 @@ export const load = (async (event) => {
 	if (!event.locals.user) {
 		return redirect(302, '/login');
 	} else {
-		let visitedFetch = await fetch(`${endpoint}/api/adventures/all/`, {
+		let visitedFetch = await fetch(`${endpoint}/api/adventures/`, {
 			headers: {
 				Cookie: `${event.cookies.get('auth')}`
 			}
@@ -25,16 +25,26 @@ export const load = (async (event) => {
 			console.error('Failed to fetch visited adventures');
 			return redirect(302, '/login');
 		} else {
-			let visited = (await visitedFetch.json()) as Adventure[];
+			let visited: Adventure[] = [];
+			try {
+				let api_result = await visitedFetch.json();
+				visited = api_result.results as Adventure[];
+				if (!Array.isArray(visited) || visited.length === 0 || !visited) {
+					throw new Error('Visited adventures response is not an array');
+				}
+			} catch (error) {
+				console.error('Error parsing visited adventures:', error);
+				return redirect(302, '/login');
+			}
+
 			// make a long lat array like this { lngLat: [-20, 0], name: 'Adventure 1' },
 			let markers = visited
 				.filter((adventure) => adventure.latitude !== null && adventure.longitude !== null)
 				.map((adventure) => {
 					return {
-						lngLat: [adventure.longitude, adventure.latitude] as [number, number],
+						lngLat: [adventure.longitude, adventure.latitude],
 						name: adventure.name,
-						type: adventure.type,
-						collection: adventure.collection
+						visits: adventure.visits
 					};
 				});
 

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

@@ -1,5 +1,7 @@
 <script>
 	// @ts-nocheck
+
+	import { isAdventureVisited } from '$lib';
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import {
 		DefaultMarker,
@@ -16,12 +18,14 @@
 
 	let clickedName = '';
 
+	console.log(data);
+
 	let showVisited = true;
 	let showPlanned = true;
 
 	$: filteredMarkers = markers.filter(
 		(marker) =>
-			(showVisited && marker.type === 'visited') || (showPlanned && marker.type === 'planned')
+			(showVisited && isAdventureVisited(marker)) || (showPlanned && !isAdventureVisited(marker))
 	);
 
 	let newMarker = [];
@@ -46,7 +50,8 @@
 		let newMarker = {
 			lngLat: [event.detail.longitude, event.detail.latitude],
 			name: event.detail.name,
-			type: event.detail.type
+			type: event.detail.type,
+			visits: event.detail.visits
 		};
 		markers = [...markers, newMarker];
 		clearMarkers();
@@ -138,11 +143,11 @@
 	class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
 	standardControls
 >
-	{#each filteredMarkers as { lngLat, name, type }}
-		{#if type == 'visited'}
+	{#each filteredMarkers as marker}
+		{#if isAdventureVisited(marker)}
 			<Marker
-				{lngLat}
-				on:click={() => (clickedName = name)}
+				lngLat={marker.lngLat}
+				on:click={() => (clickedName = marker.name)}
 				class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-md"
 			>
 				<svg
@@ -155,16 +160,14 @@
 					<circle cx="12" cy="12" r="10" stroke="red" stroke-width="2" fill="red" />
 				</svg>
 				<Popup openOn="click" offset={[0, -10]}>
-					<div class="text-lg text-black font-bold">{name}</div>
+					<div class="text-lg text-black font-bold">{marker.name}</div>
 					<p class="font-semibold text-black text-md">Visited</p>
 				</Popup>
 			</Marker>
-		{/if}
-
-		{#if type == 'planned'}
+		{:else}
 			<Marker
-				{lngLat}
-				on:click={() => (clickedName = name)}
+				lngLat={marker.lngLat}
+				on:click={() => (clickedName = marker.name)}
 				class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-blue-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
 			>
 				<svg
@@ -177,7 +180,7 @@
 					<circle cx="12" cy="12" r="10" stroke="blue" stroke-width="2" fill="blue" />
 				</svg>
 				<Popup openOn="click" offset={[0, -10]}>
-					<div class="text-lg text-black font-bold">{name}</div>
+					<div class="text-lg text-black font-bold">{marker.name}</div>
 					<p class="font-semibold text-black text-md">Planned</p>
 				</Popup>
 			</Marker>