Fix web type problems

web/src/api/api.ts

@@ -12,8 +12,7 @@ import {
 	ShareApi,
 	SystemConfigApi,
 	ThumbnailFormat,
-	UserApi,
-	MapMarkerResponseDto
+	UserApi
 } from './open-api';
 import { BASE_PATH } from './open-api/base';
 import { DUMMY_BASE_URL, toPathString } from './open-api/common';
@@ -85,13 +84,36 @@ export class ImmichApi {
 		const path = `/asset/thumbnail/${assetId}`;
 		return this.createUrl(path, { format, key });
 	}
+}
 
-	public getMarkerAssetId(dto: MapMarkerResponseDto): string {
-		return dto[0];
+export type MapMarkerResponseDto = [
+	// assetId
+	string,
+	// latitude
+	number,
+	// longitude
+	number
+];
+
+export class MapMarkerResponseDtoDecorator {
+	private dto: MapMarkerResponseDto;
+
+	constructor(dto: MapMarkerResponseDto) {
+		this.dto = dto;
 	}
 
-	public getMarkerLatLon(dto: MapMarkerResponseDto): [number, number] {
-		return [dto[1], dto[2]];
+	static map(response: object[]): MapMarkerResponseDtoDecorator[] {
+		return response.map(
+			(marker) => new MapMarkerResponseDtoDecorator(marker as unknown as MapMarkerResponseDto)
+		);
+	}
+
+	public getAssetId(): string {
+		return this.dto[0];
+	}
+
+	public getLatLon(): [number, number] {
+		return [this.dto[1], this.dto[2]];
 	}
 }
 

web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte

@@ -3,16 +3,16 @@
 	import { MarkerClusterGroup, Marker, Icon, LeafletEvent } from 'leaflet';
 	import { onDestroy, onMount } from 'svelte';
 	import { getMapContext } from './map.svelte';
-	import { MapMarkerResponseDto, api } from '@api';
+	import { MapMarkerResponseDtoDecorator, api } from '@api';
 	import { createEventDispatcher } from 'svelte';
 
 	class AssetMarker extends Marker {
-		marker: MapMarkerResponseDto;
+		marker: MapMarkerResponseDtoDecorator;
 
-		constructor(marker: MapMarkerResponseDto) {
-			const markerAssetId = api.getMarkerAssetId(marker);
+		constructor(marker: MapMarkerResponseDtoDecorator) {
+			const markerAssetId = marker.getAssetId();
 
-			super(api.getMarkerLatLon(marker), {
+			super(marker.getLatLon(), {
 				alt: 'Loading...',
 				icon: new Icon({
 					className: 'marker-cluster-asset-marker',
@@ -30,7 +30,7 @@
 		}
 
 		getAssetId(): string {
-			return api.getMarkerAssetId(this.marker);
+			return this.marker.getAssetId();
 		}
 	}
 
@@ -40,7 +40,7 @@
 
 	const map = getMapContext();
 
-	function setUpCluster(markers: MapMarkerResponseDto[]) {
+	function setUpCluster(markers: MapMarkerResponseDtoDecorator[]) {
 		cluster = new MarkerClusterGroup({
 			showCoverageOnHover: false,
 			zoomToBoundsOnClick: false,
@@ -80,7 +80,7 @@
 
 	onMount(() => setUpCluster(markers));
 
-	export let markers: MapMarkerResponseDto[];
+	export let markers: MapMarkerResponseDtoDecorator[];
 	$: {
 		if (cluster) {
 			cluster.remove();

web/src/routes/(user)/map/+page.svelte

@@ -8,24 +8,24 @@
 		isViewingAssetStoreState,
 		viewingAssetStoreState
 	} from '$lib/stores/asset-interaction.store';
-	import { api, MapMarkerResponseDto } from '@api';
+	import { api, MapMarkerResponseDtoDecorator } from '@api';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 
 	export let data: PageData;
-	let mapMarkers: MapMarkerResponseDto = [];
+	let mapMarkers: MapMarkerResponseDtoDecorator[] = [];
 
 	let initialMapCenter: [number, number] = [48, 11];
 
 	onMount(async () => {
-		mapMarkers = data.mapMarkers;
+		mapMarkers = MapMarkerResponseDtoDecorator.map(data.mapMarkers);
 
 		if (mapMarkers.length) {
-			let firstMarker = mapMarkers[0];
-			initialMapCenter = api.getMarkerLatLon(firstMarker);
+			initialMapCenter = mapMarkers[0].getLatLon();
 		}
 
-		mapMarkers = (await api.assetApi.getMapMarkers()).data;
+		const markersResponse = (await api.assetApi.getMapMarkers()).data;
+		mapMarkers = MapMarkerResponseDtoDecorator.map(markersResponse);
 	});
 
 	let viewingAssets: string[] = [];