refactoring: TypeScript migration, security fixes,

2026-06-21 06:11:45 +00:00 · 2026-03-27 18:40:18 +01:00
parent 510475a46f
commit 8396a75223
150 changed files with 8116 additions and 8467 deletions
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react'
-import ReactDOM from 'react-dom'
+import { useEffect, useRef, useState, useMemo } from 'react'
+import DOM from 'react-dom'
 import { MapContainer, TileLayer, Marker, Tooltip, Polyline, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
@@ -7,6 +7,7 @@ import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon } from '../shared/categoryIcons'
+import type { Place } from '../../types'

 // Fix default marker icons for vite
 delete L.Icon.Default.prototype._getIconUrl
@@ -93,7 +94,14 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
  })
 }

-function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }) {
+interface SelectionControllerProps {
+  places: Place[]
+  selectedPlaceId: number | null
+  dayPlaces: Place[]
+  paddingOpts: Record<string, number>
+}
+
+function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }: SelectionControllerProps) {
  const map = useMap()
  const prev = useRef(null)

@@ -117,7 +125,12 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
  return null
 }

-function MapController({ center, zoom }) {
+interface MapControllerProps {
+  center: [number, number]
+  zoom: number
+}
+
+function MapController({ center, zoom }: MapControllerProps) {
  const map = useMap()
  const prevCenter = useRef(center)

@@ -132,7 +145,13 @@ function MapController({ center, zoom }) {
 }

 // Fit bounds when places change (fitKey triggers re-fit)
-function BoundsController({ places, fitKey, paddingOpts }) {
+interface BoundsControllerProps {
+  places: Place[]
+  fitKey: number
+  paddingOpts: Record<string, number>
+}
+
+function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps) {
  const map = useMap()
  const prevFitKey = useRef(-1)

@@ -149,7 +168,11 @@ function BoundsController({ places, fitKey, paddingOpts }) {
  return null
 }

-function MapClickHandler({ onClick }) {
+interface MapClickHandlerProps {
+  onClick: ((e: L.LeafletMouseEvent) => void) | null
+}
+
+function MapClickHandler({ onClick }: MapClickHandlerProps) {
  const map = useMap()
  useEffect(() => {
    if (!onClick) return
@@ -160,7 +183,13 @@ function MapClickHandler({ onClick }) {
 }

 // ── Route travel time label ──
-function RouteLabel({ midpoint, walkingText, drivingText }) {
+interface RouteLabelProps {
+  midpoint: [number, number]
+  walkingText: string
+  drivingText: string
+}
+
+function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
  const map = useMap()
  const [visible, setVisible] = useState(map ? map.getZoom() >= 12 : false)

@@ -1,19 +1,18 @@
-// OSRM routing utility - free, no API key required
+import type { RouteResult, RouteSegment, Waypoint } from '../../types'
+
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'

-/**
- * Calculate a route between multiple waypoints using OSRM
- * @param {Array<{lat: number, lng: number}>} waypoints
- * @param {string} profile - 'driving' | 'walking' | 'cycling'
- * @returns {Promise<{coordinates: Array<[number,number]>, distance: number, duration: number, distanceText: string, durationText: string}>}
- */
-export async function calculateRoute(waypoints, profile = 'driving', { signal } = {}) {
+/** Fetches a full route via OSRM and returns coordinates, distance, and duration estimates for driving/walking. */
+export async function calculateRoute(
+  waypoints: Waypoint[],
+  profile: 'driving' | 'walking' | 'cycling' = 'driving',
+  { signal }: { signal?: AbortSignal } = {}
+): Promise<RouteResult> {
  if (!waypoints || waypoints.length < 2) {
    throw new Error('At least 2 waypoints required')
  }

-  const coords = waypoints.map(p => `${p.lng},${p.lat}`).join(';')
-  // OSRM public API only supports driving; we override duration for other modes
+  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
  const url = `${OSRM_BASE}/driving/${coords}?overview=full&geometries=geojson&steps=false`

  const response = await fetch(url, { signal })
@@ -28,21 +27,20 @@ export async function calculateRoute(waypoints, profile = 'driving', { signal }
  }

  const route = data.routes[0]
-  const coordinates = route.geometry.coordinates.map(([lng, lat]) => [lat, lng])
+  const coordinates: [number, number][] = route.geometry.coordinates.map(([lng, lat]: [number, number]) => [lat, lng])

-  const distance = route.distance // meters
-  // Compute duration based on mode (walking: 5 km/h, cycling: 15 km/h)
-  let duration
+  const distance: number = route.distance
+  let duration: number
  if (profile === 'walking') {
    duration = distance / (5000 / 3600)
  } else if (profile === 'cycling') {
    duration = distance / (15000 / 3600)
  } else {
-    duration = route.duration // driving: use OSRM value
+    duration = route.duration
  }

-  const walkingDuration = distance / (5000 / 3600) // 5 km/h
-  const drivingDuration = route.duration // OSRM driving value
+  const walkingDuration = distance / (5000 / 3600)
+  const drivingDuration: number = route.duration

  return {
    coordinates,
@@ -55,29 +53,23 @@ export async function calculateRoute(waypoints, profile = 'driving', { signal }
  }
 }

-/**
- * Generate a Google Maps directions URL for the given places
- */
-export function generateGoogleMapsUrl(places) {
-  const valid = places.filter(p => p.lat && p.lng)
+export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
+  const valid = places.filter((p) => p.lat && p.lng)
  if (valid.length === 0) return null
  if (valid.length === 1) {
    return `https://www.google.com/maps/search/?api=1&query=${valid[0].lat},${valid[0].lng}`
  }
-  // Use /dir/stop1/stop2/.../stopN format — all stops as path segments
-  const stops = valid.map(p => `${p.lat},${p.lng}`).join('/')
+  const stops = valid.map((p) => `${p.lat},${p.lng}`).join('/')
  return `https://www.google.com/maps/dir/${stops}`
 }

-/**
- * Simple nearest-neighbor route optimization
- */
-export function optimizeRoute(places) {
-  const valid = places.filter(p => p.lat && p.lng)
+/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
+export function optimizeRoute(places: Waypoint[]): Waypoint[] {
+  const valid = places.filter((p) => p.lat && p.lng)
  if (valid.length <= 2) return places

-  const visited = new Set()
-  const result = []
+  const visited = new Set<number>()
+  const result: Waypoint[] = []
  let current = valid[0]
  visited.add(0)
  result.push(current)
@@ -100,14 +92,14 @@ export function optimizeRoute(places) {
  return result
 }

-/**
- * Calculate per-leg travel times in a single OSRM request
- * Returns array of { mid, walkingText, drivingText } for each leg
- */
-export async function calculateSegments(waypoints, { signal } = {}) {
+/** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
+export async function calculateSegments(
+  waypoints: Waypoint[],
+  { signal }: { signal?: AbortSignal } = {}
+): Promise<RouteSegment[]> {
  if (!waypoints || waypoints.length < 2) return []

-  const coords = waypoints.map(p => `${p.lng},${p.lat}`).join(';')
+  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
  const url = `${OSRM_BASE}/driving/${coords}?overview=false&geometries=geojson&steps=false&annotations=distance,duration`

  const response = await fetch(url, { signal })
@@ -117,11 +109,11 @@ export async function calculateSegments(waypoints, { signal } = {}) {
  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')

  const legs = data.routes[0].legs
-  return legs.map((leg, i) => {
-    const from = [waypoints[i].lat, waypoints[i].lng]
-    const to = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-    const mid = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
-    const walkingDuration = leg.distance / (5000 / 3600) // 5 km/h
+  return legs.map((leg: { distance: number; duration: number }, i: number): RouteSegment => {
+    const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
+    const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
+    const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
+    const walkingDuration = leg.distance / (5000 / 3600)
    return {
      mid, from, to,
      walkingText: formatDuration(walkingDuration),
@@ -130,14 +122,14 @@ export async function calculateSegments(waypoints, { signal } = {}) {
  })
 }

-function formatDistance(meters) {
+function formatDistance(meters: number): string {
  if (meters < 1000) {
    return `${Math.round(meters)} m`
  }
  return `${(meters / 1000).toFixed(1)} km`
 }

-function formatDuration(seconds) {
+function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  if (h > 0) {