Avoid passing unrelated data upwards

Author: Wituareard

src/lib/components/NearbyEvent.svelte

@@ -1,29 +1,34 @@
 <script lang="ts">
+	import type { GeoApiResponse } from '$api/geo/+server'
+	import Link from '$lib/components/Link.svelte'
 	import distance from '@turf/distance'
 	import { onMount } from 'svelte'
-	import Banner from './Banner.svelte'
-	import Link from '$lib/components/Link.svelte'
 	import type { CalendarResponse, Event } from '../../routes/api/calendar/+server'
-	import type { GeoApiResponse } from '$api/geo/+server'
+	import Banner from './Banner.svelte'
 
 	export let contrast: boolean
 	export let eventFound = false
-	/** Geo data from Netlify for external use */
 	export let geo: GeoApiResponse | null = null
 
 	const FORMAT = new Intl.DateTimeFormat('en', { day: 'numeric', month: 'long' })
 	const MAX_DISTANCE_KM = 100
 
+	let events: CalendarResponse | null = null
 	let nearbyEvent: Event | null = null
 
 	$: eventFound = !!nearbyEvent
 
 	onMount(async () => {
-		const [geoResult, events] = await Promise.all([fetchGeo(), fetchLuma()])
-		geo = geoResult
+		events = await fetchLuma()
+	})
+
+	$: if (geo && events) {
+		nearbyEvent = findNearbyEvent(geo, events)
+	}
 
-		const { latitude: userLatitude, longitude: userLongitude } = geoResult
-		if (!userLatitude || !userLongitude) return
+	function findNearbyEvent(geo: GeoApiResponse, events: CalendarResponse) {
+		const { latitude: userLatitude, longitude: userLongitude } = geo
+		if (!userLatitude || !userLongitude) return null
 
 		const userCoords = [userLatitude, userLongitude]
 
@@ -34,11 +39,7 @@
 			return distance(userCoords, eventCoords, { units: 'kilometers' }) <= MAX_DISTANCE_KM
 		}
 
-		nearbyEvent = events.entries.map((entry) => entry.event).find(isNearby) ?? null
-	})
-
-	async function fetchGeo(): Promise<GeoApiResponse> {
-		return fetch('/api/geo').then((res) => res.json())
+		return events.entries.map((entry) => entry.event).find(isNearby) ?? null
 	}
 
 	async function fetchLuma(): Promise<CalendarResponse> {

src/routes/+layout.svelte

@@ -15,6 +15,7 @@
 	import '@fontsource/saira-condensed/700.css'
 	import sairaCondensedLatin700 from '@fontsource/saira-condensed/files/saira-condensed-latin-700-normal.woff2'
 	import { ProgressBar } from '@prgm/sveltekit-progress-bar'
+	import { onMount } from 'svelte'
 	import { Toaster } from 'svelte-french-toast'
 	import '../styles/print.css'
 	import '../styles/styles.css'
@@ -28,9 +29,14 @@
 	// This prevents "undefined" issues during navigation
 
 	let eventFound: boolean
-	let geo: GeoApiResponse | null
+	let geo: GeoApiResponse | null = null
 	// Show the hero on the homepage, but nowhere else
 	$: hero = deLocalizeHref($page.url.pathname) === '/'
+
+	onMount(async () => {
+		const response = await fetch('/api/geo')
+		geo = await response.json()
+	})
 </script>
 
 <PreloadFonts urls={[robotoSlabLatin300, sairaCondensedLatin700]} />
@@ -49,7 +55,7 @@
 		{@html data.localeAlert.message}
 	</Banner>
 {:else}
-	<NearbyEvent contrast={hero} bind:eventFound bind:geo />
+	<NearbyEvent contrast={hero} bind:eventFound {geo} />
 	{#if !eventFound}
 		{#if geo?.country?.code === 'US' && false}
 			<Banner contrast={hero}>