From 6f2008f1087cdbd225d95949975fe886194999ce Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Fri, 17 Nov 2023 03:13:35 +0000
Subject: [PATCH] extracted handlers to createChangeStateMethods

---
 src/routePlanner/index.tsx  | 56 +++----------------------------------
 src/routePlanner/reducer.ts | 54 ++++++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx
index b57f1e3..7d7e3af 100644
--- a/src/routePlanner/index.tsx
+++ b/src/routePlanner/index.tsx
@@ -1,66 +1,18 @@
-import { useCallback, useReducer } from 'preact/hooks';
-import { Coordinates } from '../shared/types';
+import { useMemo, useReducer } from 'preact/hooks';
 import { ExportComponent } from './export';
 import { MapComponent } from './map';
 import { MarkersComponent } from './markers';
-import { ReorderMarkersParams } from './types';
+import { createChangeStateMethods, markersReducer } from './reducer';
 
 import './style.css';
-import { markersReducer } from './reducer';
 
 export const RoutePlanner = () => {
     const [markers, dispatchMarkers] = useReducer(markersReducer, []);
-
-    const reorderMarkers = useCallback(
-        ({ oldIndex, newIndex }: ReorderMarkersParams): void =>
-            dispatchMarkers({
-                type: 'reorder',
-                data: { oldIndex, newIndex },
-            }),
-        [],
-    );
-
-    const moveMarkerUp = useCallback(
-        (key: string) =>
-            dispatchMarkers({
-                type: 'moveUp',
-                data: { key },
-            }),
-        [],
-    );
-
-    const moveMarkerDown = useCallback(
-        (key: string) =>
-            dispatchMarkers({
-                type: 'moveDown',
-                data: { key },
-            }),
-        [],
-    );
-
-    const removeMarker = useCallback(
-        (key: string) =>
-            dispatchMarkers({
-                type: 'remove',
-                data: { key },
-            }),
+    const { reorderMarkers, addMarker } = useMemo(
+        () => createChangeStateMethods(dispatchMarkers),
         [],
     );
 
-    const addMarker = useCallback(
-        (coordinates: Coordinates) =>
-            dispatchMarkers({
-                type: 'add',
-                data: {
-                    coordinates,
-                    moveUp: moveMarkerUp,
-                    moveDown: moveMarkerDown,
-                    remove: removeMarker,
-                },
-            }),
-        [moveMarkerUp, moveMarkerDown, removeMarker],
-    );
-
     return (
         <section class="route-planner">
             <section class="markers">
diff --git a/src/routePlanner/reducer.ts b/src/routePlanner/reducer.ts
index be63bcb..29e5638 100644
--- a/src/routePlanner/reducer.ts
+++ b/src/routePlanner/reducer.ts
@@ -1,6 +1,8 @@
 import { nanoid } from 'nanoid';
-import { Marker, ReducerAction } from './types';
+import { Marker, ReducerAction, ReorderMarkersParams } from './types';
 import { reorderElements } from '../shared/collections';
+import { Dispatch } from 'preact/hooks';
+import { Coordinates } from '../shared/types';
 
 const reindexMarkers = (markers: Marker[]) =>
     markers.map((marker, i) => {
@@ -77,3 +79,53 @@ export const markersReducer = (
             throw new Error(`Unsupported type ${type}`);
     }
 };
+
+export const createChangeStateMethods = (
+    dispatchMarkers: Dispatch<ReducerAction>,
+) => {
+    const reorderMarkers = ({
+        oldIndex,
+        newIndex,
+    }: ReorderMarkersParams): void =>
+        dispatchMarkers({
+            type: 'reorder',
+            data: { oldIndex, newIndex },
+        });
+
+    const moveMarkerUp = (key: string) =>
+        dispatchMarkers({
+            type: 'moveUp',
+            data: { key },
+        });
+
+    const moveMarkerDown = (key: string) =>
+        dispatchMarkers({
+            type: 'moveDown',
+            data: { key },
+        });
+
+    const removeMarker = (key: string) =>
+        dispatchMarkers({
+            type: 'remove',
+            data: { key },
+        });
+
+    const addMarker = (coordinates: Coordinates) =>
+        dispatchMarkers({
+            type: 'add',
+            data: {
+                coordinates,
+                moveUp: moveMarkerUp,
+                moveDown: moveMarkerDown,
+                remove: removeMarker,
+            },
+        });
+
+    return {
+        reorderMarkers,
+        moveMarkerUp,
+        moveMarkerDown,
+        removeMarker,
+        addMarker,
+    };
+};