implemented useSortable

src/routePlanner/hooks/useMarkers/reducer.ts

@@ -2,7 +2,7 @@ import { nanoid } from 'nanoid';
 import type { Dispatch } from 'preact/hooks';
 import { reorderElements } from '../../../shared/collections.js';
 import { Coordinates } from '../../../shared/types';
-import { Marker, ReorderMarkersParams } from '../../types';
+import { Marker, ReorderListParams } from '../../types';
 
 type GenericReducerAction<TType extends string, TData> = {
     type: TType;
@@ -29,7 +29,7 @@ export type ReducerAction =
           'changeLongLabel',
           { newLongLabel: string }
       >
-    | GenericReducerAction<'reorder', { oldIndex: number; newIndex: number }>;
+    | GenericReducerAction<'reorder', ReorderListParams>;
 
 const reindexMarkers = (markers: Marker[]) =>
     markers.map((marker, i) => {
@@ -152,7 +152,7 @@ export const createChangeStateMethods = (
                 dispatcher: dispatchMarkers,
             },
         }),
-    reorderMarkers: ({ oldIndex, newIndex }: ReorderMarkersParams): void =>
+    reorderMarkers: ({ oldIndex, newIndex }: ReorderListParams): void =>
         dispatchMarkers({
             type: 'reorder',
             data: { oldIndex, newIndex },

src/routePlanner/hooks/useSortable/index.ts

@@ -0,0 +1,33 @@
+import { useEffect, Ref } from 'preact/hooks';
+import Sortable from 'sortablejs';
+import { ReorderListParams } from '../../types';
+
+export const useSortable = (
+    listContainerRef: Readonly<Ref<HTMLElement>>,
+    onListReorder: (params: ReorderListParams) => void,
+) => {
+    useEffect(() => {
+        if (!listContainerRef.current) {
+            return;
+        }
+
+        const sortable = Sortable.create(listContainerRef.current, {
+            onEnd: (event) => {
+                if (
+                    event.oldIndex === undefined ||
+                    event.newIndex === undefined
+                ) {
+                    return;
+                }
+
+                onListReorder({
+                    oldIndex: event.oldIndex,
+                    newIndex: event.newIndex,
+                });
+            },
+        });
+        return () => {
+            sortable.destroy();
+        };
+    }, [listContainerRef, onListReorder]);
+};

src/routePlanner/markers.tsx

@@ -1,37 +1,14 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { useRef } from 'preact/hooks';
-import Sortable from 'sortablejs';
 import { MarkerComponent } from './marker';
 import { MarkersProps } from './types';
+import { useSortable } from './hooks/useSortable';
 
 export const MarkersComponent = ({
     markers,
     onMarkersReorder,
 }: MarkersProps) => {
     const listContainerRef = useRef<HTMLOListElement>(null);
-    useEffect(() => {
+    useSortable(listContainerRef, onMarkersReorder);
-        if (!listContainerRef.current) {
-            return;
-        }
-
-        const sortable = Sortable.create(listContainerRef.current, {
-            onEnd: (event) => {
-                if (
-                    event.oldIndex === undefined ||
-                    event.newIndex === undefined
-                ) {
-                    return;
-                }
-
-                onMarkersReorder({
-                    oldIndex: event.oldIndex,
-                    newIndex: event.newIndex,
-                });
-            },
-        });
-        return () => {
-            sortable.destroy();
-        };
-    }, [listContainerRef, markers, onMarkersReorder]);
 
     return (
         <ol ref={listContainerRef}>

src/routePlanner/types.ts

@@ -16,14 +16,14 @@ export type Marker = Waypoint & {
     longLabel: string;
 };
 
-export type ReorderMarkersParams = {
+export type ReorderListParams = {
     oldIndex: number;
     newIndex: number;
 };
 
 export type MarkersProps = {
     markers: Marker[];
-    onMarkersReorder: (params: ReorderMarkersParams) => void;
+    onMarkersReorder: (params: ReorderListParams) => void;
 };
 
 export type MapProps = {