implemented useMapClick custom hook

src/routePlanner/hooks/useMapClick/index.ts

@@ -0,0 +1,26 @@
+import leaflet from 'leaflet';
+import { Ref, useEffect } from 'preact/hooks';
+
+import 'leaflet/dist/leaflet.css';
+import { Coordinates } from '../../../shared/types';
+
+export const useMapClick = (
+    mapRef: Readonly<Ref<leaflet.Map | undefined>>,
+    onMapClick: (leaflet: Coordinates) => void,
+) => {
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map) {
+            return;
+        }
+
+        const handler: leaflet.LeafletMouseEventHandlerFn = ({ latlng }) => {
+            onMapClick(latlng);
+        };
+        map.on('click', handler);
+
+        return () => {
+            map.removeEventListener('click', handler);
+        };
+    }, [mapRef, onMapClick]);
+};

src/routePlanner/map.tsx

@@ -4,6 +4,7 @@ import { MapProps } from './types';
 
 import 'leaflet/dist/leaflet.css';
 import { useMap } from './hooks/useMap';
+import { useMapClick } from './hooks/useMapClick';
 
 const defaultMapViewParameters = [
     [47.42111, 10.98528],
@@ -13,21 +14,7 @@ const defaultMapViewParameters = [
 export const MapComponent = ({ markers, onMapClick }: MapProps) => {
     const mapContainerRef = useRef<HTMLDivElement>(null);
     const mapRef = useMap(mapContainerRef, defaultMapViewParameters);
-
+    useMapClick(mapRef, onMapClick);
-    useEffect(() => {
-        const map = mapRef.current;
-        if (!map) {
-            return;
-        }
-
-        const handler: leaflet.LeafletMouseEventHandlerFn = ({ latlng }) =>
-            onMapClick(latlng);
-        map.on('click', handler);
-
-        return () => {
-            map.removeEventListener('click', handler);
-        };
-    }, [mapRef, onMapClick]);
 
     useEffect(() => {
         const map = mapRef.current;