reorganized custom hooks

src/hooks/leaflet/useLayers.ts

@@ -0,0 +1,24 @@
+import leaflet from 'leaflet';
+import { type Ref, useEffect } from 'preact/hooks';
+
+export const useLayers = (
+    mapRef: Readonly<Ref<leaflet.Map | undefined>>,
+    layers: leaflet.Layer[],
+) =>
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map) {
+            return;
+        }
+
+        for (const layer of layers) {
+            layer.addTo(map);
+        }
+
+        return () => {
+            for (const layer of layers) {
+                layer.removeFrom(map);
+                layer.remove();
+            }
+        };
+    }, [mapRef, layers]);

src/hooks/leaflet/useMapClick.ts

@@ -1,6 +1,6 @@
 import leaflet from 'leaflet';
 import { type Ref, useEffect } from 'preact/hooks';
-import type { Coordinates } from '../../../shared/types';
+import type { Coordinates } from '../../shared/types';
 
 export const useMapClick = (
     mapRef: Readonly<Ref<leaflet.Map | undefined>>,

src/hooks/usePrompt.ts

@@ -4,11 +4,10 @@ export const usePrompt = (
     message: string,
     defaultValue: string,
     onChange: (newValue: string) => void,
-) => {
+) =>
-    return useCallback(() => {
+    useCallback(() => {
         const newValue = prompt(message, defaultValue);
         if (newValue?.length) {
             onChange(newValue);
         }
     }, [message, defaultValue, onChange]);
-};

src/hooks/useSortable.ts

@@ -1,10 +1,9 @@
 import { type Ref, useEffect } from 'preact/hooks';
 import Sortable from 'sortablejs';
-import type { ReorderListParams } from '../../types';
 
 export const useSortable = (
     listContainerRef: Readonly<Ref<HTMLElement>>,
-    onListReorder: (params: ReorderListParams) => void,
+    onListReorder: (params: { oldIndex: number; newIndex: number }) => void,
 ) =>
     useEffect(() => {
         if (!listContainerRef.current) {

src/routePlanner/hooks/useMarkersOnMap/index.ts

@@ -1,28 +1,13 @@
 import leaflet from 'leaflet';
-import { type Ref, useEffect } from 'preact/hooks';
+import { type Ref, useMemo } from 'preact/hooks';
+import { useLayers } from '../../../hooks/leaflet/useLayers';
 import type { Marker } from '../../types';
 import { getLayersForMarkers } from './getLayersForMarkers';
 
 export const useMarkersOnMap = (
     mapRef: Readonly<Ref<leaflet.Map | undefined>>,
     markers: Marker[],
-) =>
+) => {
-    useEffect(() => {
+    const layers = useMemo(() => getLayersForMarkers(markers), [markers]);
-        const map = mapRef.current;
+    useLayers(mapRef, layers);
-        if (!map) {
+};
-            return;
-        }
-
-        const layers = getLayersForMarkers(markers);
-
-        for (const layer of layers) {
-            layer.addTo(map);
-        }
-
-        return () => {
-            for (const layer of layers) {
-                layer.removeFrom(map);
-                layer.remove();
-            }
-        };
-    }, [mapRef, markers]);

src/routePlanner/map.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks';
-import { useMap } from './hooks/useMap';
+import { useMap } from '../hooks/leaflet/useMap';
-import { useMapClick } from './hooks/useMapClick';
+import { useMapClick } from '../hooks/leaflet/useMapClick';
 import { useMarkersOnMap } from './hooks/useMarkersOnMap';
 import type { MapProps } from './types';
 

src/routePlanner/marker.tsx

@@ -1,4 +1,4 @@
-import { usePrompt } from './hooks/usePrompt';
+import { usePrompt } from '../hooks/usePrompt';
 import type { MarkerProps } from './types';
 
 export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => {

src/routePlanner/markers.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'preact/hooks';
-import { useSortable } from './hooks/useSortable';
+import { useSortable } from '../hooks/useSortable';
 import { MarkerComponent } from './marker';
 import type { MarkersProps } from './types';