From ed1f4bc47c06efcf12ec3ca8836f9b1efb35dec1 Mon Sep 17 00:00:00 2001 From: Inga Date: Sun, 19 Nov 2023 04:04:32 +0000 Subject: [PATCH] reorganized custom hooks --- src/hooks/leaflet/useLayers.ts | 24 +++++++++++++++++ .../index.ts => hooks/leaflet/useMap.ts} | 0 .../index.ts => hooks/leaflet/useMapClick.ts} | 2 +- .../usePrompt/index.ts => hooks/usePrompt.ts} | 5 ++-- .../index.ts => hooks/useSortable.ts} | 3 +-- .../hooks/useMarkersOnMap/index.ts | 27 +++++-------------- src/routePlanner/map.tsx | 4 +-- src/routePlanner/marker.tsx | 2 +- src/routePlanner/markers.tsx | 2 +- 9 files changed, 38 insertions(+), 31 deletions(-) create mode 100644 src/hooks/leaflet/useLayers.ts rename src/{routePlanner/hooks/useMap/index.ts => hooks/leaflet/useMap.ts} (100%) rename src/{routePlanner/hooks/useMapClick/index.ts => hooks/leaflet/useMapClick.ts} (91%) rename src/{routePlanner/hooks/usePrompt/index.ts => hooks/usePrompt.ts} (89%) rename src/{routePlanner/hooks/useSortable/index.ts => hooks/useSortable.ts} (88%) diff --git a/src/hooks/leaflet/useLayers.ts b/src/hooks/leaflet/useLayers.ts new file mode 100644 index 0000000..e69a7ca --- /dev/null +++ b/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>, + 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]); diff --git a/src/routePlanner/hooks/useMap/index.ts b/src/hooks/leaflet/useMap.ts similarity index 100% rename from src/routePlanner/hooks/useMap/index.ts rename to src/hooks/leaflet/useMap.ts diff --git a/src/routePlanner/hooks/useMapClick/index.ts b/src/hooks/leaflet/useMapClick.ts similarity index 91% rename from src/routePlanner/hooks/useMapClick/index.ts rename to src/hooks/leaflet/useMapClick.ts index f7f8a71..38e43db 100644 --- a/src/routePlanner/hooks/useMapClick/index.ts +++ b/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>, diff --git a/src/routePlanner/hooks/usePrompt/index.ts b/src/hooks/usePrompt.ts similarity index 89% rename from src/routePlanner/hooks/usePrompt/index.ts rename to src/hooks/usePrompt.ts index 95dbe0e..02a1b1a 100644 --- a/src/routePlanner/hooks/usePrompt/index.ts +++ b/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]); -}; diff --git a/src/routePlanner/hooks/useSortable/index.ts b/src/hooks/useSortable.ts similarity index 88% rename from src/routePlanner/hooks/useSortable/index.ts rename to src/hooks/useSortable.ts index ff062b8..60fc354 100644 --- a/src/routePlanner/hooks/useSortable/index.ts +++ b/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>, - onListReorder: (params: ReorderListParams) => void, + onListReorder: (params: { oldIndex: number; newIndex: number }) => void, ) => useEffect(() => { if (!listContainerRef.current) { diff --git a/src/routePlanner/hooks/useMarkersOnMap/index.ts b/src/routePlanner/hooks/useMarkersOnMap/index.ts index 38a558f..6c607eb 100644 --- a/src/routePlanner/hooks/useMarkersOnMap/index.ts +++ b/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>, markers: Marker[], -) => - useEffect(() => { - const map = mapRef.current; - 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]); +) => { + const layers = useMemo(() => getLayersForMarkers(markers), [markers]); + useLayers(mapRef, layers); +}; diff --git a/src/routePlanner/map.tsx b/src/routePlanner/map.tsx index a9a2cda..7b87bcd 100644 --- a/src/routePlanner/map.tsx +++ b/src/routePlanner/map.tsx @@ -1,6 +1,6 @@ import { useRef } from 'preact/hooks'; -import { useMap } from './hooks/useMap'; -import { useMapClick } from './hooks/useMapClick'; +import { useMap } from '../hooks/leaflet/useMap'; +import { useMapClick } from '../hooks/leaflet/useMapClick'; import { useMarkersOnMap } from './hooks/useMarkersOnMap'; import type { MapProps } from './types'; diff --git a/src/routePlanner/marker.tsx b/src/routePlanner/marker.tsx index 5bb4649..b94ac83 100644 --- a/src/routePlanner/marker.tsx +++ b/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) => { diff --git a/src/routePlanner/markers.tsx b/src/routePlanner/markers.tsx index 1140667..a045b35 100644 --- a/src/routePlanner/markers.tsx +++ b/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';