chore: update mapbox types, remove types/mapbox-gl and use native types

Signed-off-by: Raphael Arce <[email protected]>

package.json

@@ -35,7 +35,6 @@
 		"@technologiestiftung/eslint-plugin": "0.1.1",
 		"@technologiestiftung/prettier-config": "1.0.0",
 		"@technologiestiftung/semantic-release-config": "1.2.4",
-		"@types/mapbox-gl": "3.4.0",
 		"@types/react": "18.3.11",
 		"@types/react-dom": "18.3.0",
 		"@typescript-eslint/eslint-plugin": "7.18.0",

src/components/map/hooks/use-hovered-pump.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { Pump, usePumpStore } from "./use-pump-store";
 
 export function useHoveredPump(map: mapboxgl.Map | undefined) {

src/components/map/hooks/use-hovered-tree.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { useTreeStore } from "../../tree-detail/stores/tree-store";
 
 export function useHoveredTree(map: mapboxgl.Map | undefined) {

src/components/map/hooks/use-map-interaction.tsx

@@ -1,4 +1,4 @@
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { useEffect } from "react";
 import { useFilterStore } from "../../filter/filter-store";
 import { useHoveredPump } from "./use-hovered-pump";

src/components/map/hooks/use-map-pumps-interaction.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { useEffect, useRef } from "react";
 import { useFilterStore } from "../../filter/filter-store";
 import { useSelectedPump } from "./use-selected-pump";

src/components/map/hooks/use-map-setup.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import React, { useEffect } from "react";
 import { useMapStore } from "../map-store";
 import { useTreeCircleStyle } from "./use-tree-circle-style";
@@ -80,7 +80,6 @@ export function useMapSetup(
 				type: "circle",
 				source: "trees",
 				"source-layer": import.meta.env.VITE_MAPBOX_TREES_TILESET_LAYER,
-				interactive: true,
 				paint: {
 					"circle-pitch-alignment": "map",
 					"circle-radius": circleRadius,

src/components/map/hooks/use-map-trees-interaction.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { useEffect, useState } from "react";
 import { useProfileStore } from "../../../shared-stores/profile-store.tsx";
 import { useFilterStore } from "../../filter/filter-store";

src/components/map/hooks/use-pump-store.tsx

@@ -1,4 +1,4 @@
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { create } from "zustand";
 
 export interface Pump {

src/components/map/hooks/use-selected-pump.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { Pump, usePumpStore } from "./use-pump-store";
 
 export function useSelectedPump(map: mapboxgl.Map | undefined) {

src/components/map/hooks/use-selected-tree.tsx

@@ -1,4 +1,4 @@
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { useEffect, useRef } from "react";
 import { useTreeStore } from "../../tree-detail/stores/tree-store";
 import { useUrlState } from "../../router/store";

src/components/map/hooks/use-tree-circle-style.tsx

@@ -17,7 +17,10 @@ export function useTreeCircleStyle() {
 		TREE_YELLOW_COLOR,
 	} = useMapConstants();
 
-	const circleRadius = {
+	const circleRadius: {
+		base: number;
+		stops: [[number, number], [number, number]];
+	} = {
 		base: 1.75,
 		stops: [
 			[11, 1],

src/components/map/map-store.tsx

@@ -1,4 +1,4 @@
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 import { create } from "zustand";
 
 interface MapState {

src/components/tree-detail/hooks/use-update-tree-waterings.tsx

@@ -1,11 +1,34 @@
-import mapboxgl from "mapbox-gl";
+import * as mapboxgl from "mapbox-gl";
 
 /* eslint-disable-next-line no-shadow */
 enum UpdateAction {
 	ADD = "ADD",
 	REMOVE = "REMOVE",
 }
 
+function getTodaysWaterings(
+	featureState: { [p: string]: unknown } | null | undefined,
+) {
+	if (!featureState || !featureState.todays_waterings) {
+		return 0;
+	}
+
+	if (typeof featureState.todays_waterings === "string") {
+		return parseInt(featureState.todays_waterings);
+	}
+
+	if (typeof featureState.todays_waterings === "number") {
+		return featureState.todays_waterings;
+	}
+
+	console.error(
+		"could not parse featureState.todays_watering:",
+		featureState.todays_waterings,
+	);
+
+	return 0;
+}
+
 /* eslint-disable-next-line max-params */
 function updateTreeWaterings(
 	map: mapboxgl.Map | undefined,
@@ -19,9 +42,7 @@ function updateTreeWaterings(
 		sourceLayer: "trees",
 	});
 
-	const todaysWateringAmount = featureState
-		? parseInt(featureState.todays_waterings ?? 0)
-		: 0;
+	const todaysWateringAmount = getTodaysWaterings(featureState);
 
 	const todaysWateringSum =
 		updateAction === UpdateAction.ADD