2 files changed, 17 insertions, 17 deletions

diff --git a/src/pages/Estimates.tsx b/src/pages/Estimates.tsx
index 3f002be..a445300 100644
--- a/src/pages/Estimates.tsx
+++ b/src/pages/Estimates.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { Link, useParams } from "react-router";
+import { JSX, useEffect, useState } from "react";
+import { useParams } from "react-router";
 import { StopDataProvider } from "../data/StopDataProvider";
 import LineIcon from "../components/LineIcon";
 import { Star } from 'lucide-react';
@@ -20,31 +20,33 @@ interface StopDetails {
 	}[]
 }
 
+const sdp = new StopDataProvider();
+
+const loadData = async (stopId: string) => {
+	const resp = await fetch(`/api/GetStopEstimates?id=${stopId}`);
+	return await resp.json();
+};
+
 export function Estimates(): JSX.Element {
-	const sdp = new StopDataProvider();
 	const [data, setData] = useState<StopDetails | null>(null);
 	const [dataDate, setDataDate] = useState<Date | null>(null);
 	const [favourited, setFavourited] = useState(false);
 	const params = useParams();
 
-	const loadData = () => {
-		fetch(`/api/GetStopEstimates?id=${params.stopId}`)
-			.then(r => r.json())
+	useEffect(() => {
+		loadData(params.stopId!)
 			.then((body: StopDetails) => {
 				setData(body);
 				setDataDate(new Date());
-			});
-	};
+			})
 
-	useEffect(() => {
-		loadData();
 
 		sdp.pushRecent(parseInt(params.stopId ?? ""));
 
 		setFavourited(
 			sdp.isFavourite(parseInt(params.stopId ?? ""))
 		);
-	}, []);
+	}, [params.stopId]);
 
 	const absoluteArrivalTime = (minutes: number) => {
 		const now = new Date()
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 4d89ae0..9b960be 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -6,17 +6,15 @@ import 'react-leaflet-markercluster/styles'
 import { useEffect, useState } from 'react';
 import LineIcon from '../components/LineIcon';
 import { Link } from 'react-router';
-import { MapContainer } from "react-leaflet/MapContainer";
-import { TileLayer } from "react-leaflet/TileLayer";
-import { Marker } from "react-leaflet/Marker";
-import { Popup } from "react-leaflet/Popup";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
+import { LatLngTuple } from "leaflet";
 
 const sdp = new StopDataProvider();
 
 export function StopMap() {
 	const [stops, setStops] = useState<Stop[]>([]);
-	const position = [42.229188855975046, -8.72246955783102]
+	const position: LatLngTuple = [42.229188855975046, -8.72246955783102]
 
 	useEffect(() => {
 		sdp.getStops().then((stops) => { setStops(stops); });
@@ -30,7 +28,7 @@ export function StopMap() {
 			/>
 			<MarkerClusterGroup>
 				{stops.map((stop) => (
-					<Marker key={stop.stopId} position={[stop.latitude, stop.longitude]}>
+					<Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple}>
 						<Popup>
 							<Link to={`/estimates/${stop.stopId}`}>{stop.name}</Link>
 							<br />