Merge pull request #10439 from tchak/improuve-react-types

chore(ts): improuve some types

app/javascript/components/MapEditor/components/CadastreLayer.tsx

@@ -87,7 +87,7 @@ export function CadastreLayer({
   });
 
   const onHighlight = useCallback(
-    ({ detail }) => {
+    ({ detail }: CustomEvent<{ cid: string; highlight: boolean }>) => {
       highlightFeature(detail.cid, detail.highlight);
     },
     [highlightFeature]

app/javascript/components/MapEditor/components/DrawLayer.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useEffect } from 'react';
-import type { LngLatBoundsLike } from 'maplibre-gl';
+import type { LngLatBoundsLike, LngLatLike } from 'maplibre-gl';
 import DrawControl from '@mapbox/mapbox-gl-draw';
-import type { FeatureCollection } from 'geojson';
+import type { FeatureCollection, Feature, Point } from 'geojson';
 
 import { useMapLibre } from '../../shared/maplibre/MapLibre';
 import {
@@ -78,15 +78,24 @@ export function DrawLayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map, enabled]);
 
-  const onSetId = useCallback(({ detail }) => {
+  const onSetId = useCallback(
+    ({ detail }: CustomEvent<{ lid: string; id: string }>) => {
       drawRef.current?.setFeatureProperty(detail.lid, 'id', detail.id);
-  }, []);
+    },
-  const onAddFeature = useCallback(({ detail }) => {
+    []
+  );
+  const onAddFeature = useCallback(
+    ({ detail }: CustomEvent<{ feature: Feature }>) => {
       drawRef.current?.add(detail.feature);
-  }, []);
+    },
-  const onDeleteFature = useCallback(({ detail }) => {
+    []
+  );
+  const onDeleteFature = useCallback(
+    ({ detail }: CustomEvent<{ id: string }>) => {
       drawRef.current?.delete(detail.id);
-  }, []);
+    },
+    []
+  );
 
   useMapEvent('draw.create', createFeatures);
   useMapEvent('draw.update', updateFeatures);
@@ -122,7 +131,7 @@ function useExternalEvents(
   const flyTo = useFlyTo();
 
   const onFeatureFocus = useCallback(
-    ({ detail }) => {
+    ({ detail }: CustomEvent<{ id: string; bbox: LngLatBoundsLike }>) => {
       const { id, bbox } = detail;
       if (id) {
         const feature = findFeature(featureCollection, id);
@@ -137,16 +146,26 @@ function useExternalEvents(
   );
 
   const onZoomFocus = useCallback(
-    ({ detail }) => {
+    ({
+      detail
+    }: CustomEvent<{
+      feature: Feature<Point>;
+      featureCollection: FeatureCollection;
+    }>) => {
       if (detail.feature && detail.featureCollection == featureCollection) {
-        flyTo(17, detail.feature.geometry.coordinates);
+        flyTo(17, detail.feature.geometry.coordinates as LngLatLike);
       }
     },
     [flyTo, featureCollection]
   );
 
   const onFeatureCreate = useCallback(
-    ({ detail }) => {
+    ({
+      detail
+    }: CustomEvent<{
+      feature: Feature;
+      featureCollection: FeatureCollection;
+    }>) => {
       const { feature } = detail;
       const { geometry, properties } = feature;
       if (
@@ -164,7 +183,9 @@ function useExternalEvents(
   );
 
   const onFeatureUpdate = useCallback(
-    ({ detail }) => {
+    ({
+      detail
+    }: CustomEvent<{ id: string; properties: Feature['properties'] }>) => {
       const { id, properties } = detail;
       const feature = findFeature(featureCollection, id);
 
@@ -177,7 +198,7 @@ function useExternalEvents(
   );
 
   const onFeatureDelete = useCallback(
-    ({ detail }) => {
+    ({ detail }: CustomEvent<{ id: string }>) => {
       const { id } = detail;
       const feature = findFeature(featureCollection, id);
 

app/javascript/components/MapReader/components/GeoJSONLayer.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { Popup, LngLatBoundsLike } from 'maplibre-gl';
+import { Popup, LngLatBoundsLike, LngLatLike } from 'maplibre-gl';
-import type { Feature, FeatureCollection } from 'geojson';
+import type { Feature, FeatureCollection, Point } from 'geojson';
 
 import { useMapLibre } from '../../shared/maplibre/MapLibre';
 import {
@@ -102,7 +102,7 @@ function useExternalEvents(featureCollection: FeatureCollection) {
   const fitBounds = useFitBounds();
   const flyTo = useFlyTo();
   const onFeatureFocus = useCallback(
-    ({ detail }) => {
+    ({ detail }: CustomEvent<{ id: string }>) => {
       const { id } = detail;
       const feature = findFeature(featureCollection, id);
       if (feature) {
@@ -112,10 +112,10 @@ function useExternalEvents(featureCollection: FeatureCollection) {
     [featureCollection, fitBounds]
   );
   const onZoomFocus = useCallback(
-    ({ detail }) => {
+    ({ detail }: CustomEvent<{ feature: Feature<Point> }>) => {
       const { feature } = detail;
       if (feature) {
-        flyTo(17, feature.geometry.coordinates);
+        flyTo(17, feature.geometry.coordinates as LngLatLike);
       }
     },
     [flyTo]

app/javascript/components/shared/maplibre/hooks.ts

@@ -9,7 +9,8 @@ import type {
   LngLatBoundsLike,
   LngLat,
   MapLayerEventType,
-  Style
+  Style,
+  LngLatLike
 } from 'maplibre-gl';
 import type { Feature, Geometry } from 'geojson';
 
@@ -39,17 +40,20 @@ export function useFitBoundsNoFly() {
 export function useFlyTo() {
   const map = useMapLibre();
   return useCallback(
-    (zoom: number, center: [number, number]) => {
+    (zoom: number, center: LngLatLike) => {
       map.flyTo({ zoom, center });
     },
     [map]
   );
 }
 
-export function useEvent(eventName: string, callback: EventListener) {
+export function useEvent<T>(
+  eventName: string,
+  callback: (event: CustomEvent<T>) => void
+) {
   return useEffect(() => {
-    addEventListener(eventName, callback);
+    addEventListener(eventName, callback as EventListener);
-    return () => removeEventListener(eventName, callback);
+    return () => removeEventListener(eventName, callback as EventListener);
   }, [eventName, callback]);
 }
 

package.json

@@ -121,7 +121,8 @@
     "graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml",
     "postinstall": "patch-package",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "up": "bunx npm-check-updates --root --format group -i"
   },
   "resolutions": {
     "string-width": "4.2.2",