diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx index f99bb2c..b2b292a 100644 --- a/src/routePlanner/index.tsx +++ b/src/routePlanner/index.tsx @@ -1,5 +1,5 @@ import { nanoid } from 'nanoid'; -import { useMemo, useState } from 'preact/hooks'; +import { useCallback, useState } from 'preact/hooks'; import { reorderElements } from '../shared/collections'; import { Coordinates } from '../shared/types'; import { ExportComponent } from './export'; @@ -12,47 +12,46 @@ import './style.css'; export const RoutePlanner = () => { const [markers, setMarkers] = useState([]); - const onMarkersReorder = useMemo( - () => - ({ oldIndex, newIndex }: ReorderMarkersParams): void => - setMarkers((oldMarkers) => { - console.log( - `Reordering markers: from ${oldIndex} to ${newIndex}`, - ); - const newMarkers = reorderElements( - oldMarkers, - oldIndex, - newIndex, - ); - return newMarkers.map((marker, i) => ({ - ...marker, - label: `${i + 1}`, - remove: () => + const onMarkersReorder = useCallback( + ({ oldIndex, newIndex }: ReorderMarkersParams): void => + setMarkers((oldMarkers) => { + console.log( + `Reordering markers: from ${oldIndex} to ${newIndex}`, + ); + const newMarkers = reorderElements( + oldMarkers, + oldIndex, + newIndex, + ); + return newMarkers.map((marker, i) => ({ + ...marker, + label: `${i + 1}`, + remove: () => + onMarkersReorder({ + oldIndex: i, + newIndex: -1, + }), + ...(i - 1 >= 0 && { + moveDown: () => onMarkersReorder({ oldIndex: i, - newIndex: -1, + newIndex: i - 1, }), - ...(i - 1 >= 0 && { - moveDown: () => - onMarkersReorder({ - oldIndex: i, - newIndex: i - 1, - }), - }), - ...(i + 1 < newMarkers.length && { - moveUp: () => - onMarkersReorder({ - oldIndex: i, - newIndex: i + 1, - }), - }), - })); - }), + }), + ...(i + 1 < newMarkers.length && { + moveUp: () => + onMarkersReorder({ + oldIndex: i, + newIndex: i + 1, + }), + }), + })); + }), [], ); - const onMapClick = useMemo( - () => (coordinates: Coordinates) => { + const onMapClick = useCallback( + (coordinates: Coordinates) => { setMarkers((markers) => [ ...markers.slice(0, markers.length - 1), ...markers