From bf434aed3a3875710fd8fcc6290fdca524fea79c Mon Sep 17 00:00:00 2001 From: Raphael Arce Date: Mon, 14 Oct 2024 20:30:09 +0200 Subject: [PATCH] chore: update mapbox types, remove types/mapbox-gl and use native types Signed-off-by: Raphael Arce --- package-lock.json | 11 ------- package.json | 1 - src/components/map/hooks/use-hovered-pump.tsx | 2 +- src/components/map/hooks/use-hovered-tree.tsx | 2 +- .../map/hooks/use-map-interaction.tsx | 2 +- .../map/hooks/use-map-pumps-interaction.tsx | 2 +- src/components/map/hooks/use-map-setup.tsx | 3 +- .../map/hooks/use-map-trees-interaction.tsx | 2 +- src/components/map/hooks/use-pump-store.tsx | 2 +- .../map/hooks/use-selected-pump.tsx | 2 +- .../map/hooks/use-selected-tree.tsx | 2 +- .../map/hooks/use-tree-circle-style.tsx | 5 +++- src/components/map/map-store.tsx | 2 +- .../hooks/use-update-tree-waterings.tsx | 29 ++++++++++++++++--- 14 files changed, 39 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f2063abf..f6cf7f24a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,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", @@ -3046,16 +3045,6 @@ "@types/pbf": "*" } }, - "node_modules/@types/mapbox-gl": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.0.tgz", - "integrity": "sha512-tbn++Mm94H1kE7W6FF0oVC9rMXHVzDDNUbS7KfBMRF8NV/8csFi+67ytKcZJ4LsrpsJ+8MC6Os6ZinEDCsrunw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/geojson": "*" - } - }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", diff --git a/package.json b/package.json index 3b3a28e34..41ae69e2d 100644 --- a/package.json +++ b/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", diff --git a/src/components/map/hooks/use-hovered-pump.tsx b/src/components/map/hooks/use-hovered-pump.tsx index 87bebded4..4e178758d 100644 --- a/src/components/map/hooks/use-hovered-pump.tsx +++ b/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) { diff --git a/src/components/map/hooks/use-hovered-tree.tsx b/src/components/map/hooks/use-hovered-tree.tsx index 748647385..f0449c21a 100644 --- a/src/components/map/hooks/use-hovered-tree.tsx +++ b/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) { diff --git a/src/components/map/hooks/use-map-interaction.tsx b/src/components/map/hooks/use-map-interaction.tsx index 25c4e3a54..74be7117d 100644 --- a/src/components/map/hooks/use-map-interaction.tsx +++ b/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"; diff --git a/src/components/map/hooks/use-map-pumps-interaction.tsx b/src/components/map/hooks/use-map-pumps-interaction.tsx index b6b61c77d..880bfe837 100644 --- a/src/components/map/hooks/use-map-pumps-interaction.tsx +++ b/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"; diff --git a/src/components/map/hooks/use-map-setup.tsx b/src/components/map/hooks/use-map-setup.tsx index 63af2c39d..eb9b3b549 100644 --- a/src/components/map/hooks/use-map-setup.tsx +++ b/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, diff --git a/src/components/map/hooks/use-map-trees-interaction.tsx b/src/components/map/hooks/use-map-trees-interaction.tsx index 5f39cf562..18a9ec749 100644 --- a/src/components/map/hooks/use-map-trees-interaction.tsx +++ b/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"; diff --git a/src/components/map/hooks/use-pump-store.tsx b/src/components/map/hooks/use-pump-store.tsx index fa13af00e..13f8943f5 100644 --- a/src/components/map/hooks/use-pump-store.tsx +++ b/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 { diff --git a/src/components/map/hooks/use-selected-pump.tsx b/src/components/map/hooks/use-selected-pump.tsx index 17001d792..6be872b6f 100644 --- a/src/components/map/hooks/use-selected-pump.tsx +++ b/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) { diff --git a/src/components/map/hooks/use-selected-tree.tsx b/src/components/map/hooks/use-selected-tree.tsx index 3b5ef5df2..2f437da46 100644 --- a/src/components/map/hooks/use-selected-tree.tsx +++ b/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"; diff --git a/src/components/map/hooks/use-tree-circle-style.tsx b/src/components/map/hooks/use-tree-circle-style.tsx index 9592387e8..7239cd4b6 100644 --- a/src/components/map/hooks/use-tree-circle-style.tsx +++ b/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], diff --git a/src/components/map/map-store.tsx b/src/components/map/map-store.tsx index 17523332d..e96be1086 100644 --- a/src/components/map/map-store.tsx +++ b/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 { diff --git a/src/components/tree-detail/hooks/use-update-tree-waterings.tsx b/src/components/tree-detail/hooks/use-update-tree-waterings.tsx index c880bff76..d085c303a 100644 --- a/src/components/tree-detail/hooks/use-update-tree-waterings.tsx +++ b/src/components/tree-detail/hooks/use-update-tree-waterings.tsx @@ -1,4 +1,4 @@ -import mapboxgl from "mapbox-gl"; +import * as mapboxgl from "mapbox-gl"; /* eslint-disable-next-line no-shadow */ enum UpdateAction { @@ -6,6 +6,29 @@ enum UpdateAction { 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