diff --git a/src/routePlanner/hooks/usePrompt/index.ts b/src/routePlanner/hooks/usePrompt/index.ts new file mode 100644 index 0000000..95dbe0e --- /dev/null +++ b/src/routePlanner/hooks/usePrompt/index.ts @@ -0,0 +1,14 @@ +import { useCallback } from 'preact/hooks'; + +export const usePrompt = ( + message: string, + defaultValue: string, + onChange: (newValue: string) => void, +) => { + return useCallback(() => { + const newValue = prompt(message, defaultValue); + if (newValue?.length) { + onChange(newValue); + } + }, [message, defaultValue, onChange]); +}; diff --git a/src/routePlanner/marker.tsx b/src/routePlanner/marker.tsx index 3b5dfc1..5bb4649 100644 --- a/src/routePlanner/marker.tsx +++ b/src/routePlanner/marker.tsx @@ -1,13 +1,12 @@ -import { useCallback } from 'preact/hooks'; +import { usePrompt } from './hooks/usePrompt'; import type { MarkerProps } from './types'; export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => { - const changeLongLabel = useCallback(() => { - const newLongLabel = prompt('Enter new label', marker.longLabel); - if (newLongLabel?.length) { - marker.changeLongLabel(newLongLabel); - } - }, [marker]); + const changeLongLabel = usePrompt( + 'Enter new label', + marker.longLabel, + marker.changeLongLabel, + ); return (