From 2829b5f37d3af2eafb21e3cfd7c449a59ce9b06e Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Sat, 18 Nov 2023 16:58:10 +0000
Subject: [PATCH] implemented custom useMarkers hook

---
 src/routePlanner/index.tsx                           |  9 ++-------
 .../{reducer.test.ts => useMarkers.test.ts}          |  7 ++++++-
 src/routePlanner/{reducer.ts => useMarkers.ts}       | 12 +++++++++++-
 3 files changed, 19 insertions(+), 9 deletions(-)
 rename src/routePlanner/{reducer.test.ts => useMarkers.test.ts} (95%)
 rename src/routePlanner/{reducer.ts => useMarkers.ts} (91%)

diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx
index 0d188a1..f156ec2 100644
--- a/src/routePlanner/index.tsx
+++ b/src/routePlanner/index.tsx
@@ -1,17 +1,12 @@
-import { useMemo, useReducer } from 'preact/hooks';
 import { ExportComponent } from './export';
 import { MapComponent } from './map';
 import { MarkersComponent } from './markers';
-import { createChangeStateMethods, markersReducer } from './reducer';
+import { useMarkers } from './useMarkers';
 
 import './style.css';
 
 export const RoutePlanner = () => {
-    const [markers, dispatchMarkers] = useReducer(markersReducer, []);
-    const { reorderMarkers, addMarker } = useMemo(
-        () => createChangeStateMethods(dispatchMarkers),
-        [],
-    );
+    const [markers, { reorderMarkers, addMarker }] = useMarkers();
 
     return (
         <section class="route-planner">
diff --git a/src/routePlanner/reducer.test.ts b/src/routePlanner/useMarkers.test.ts
similarity index 95%
rename from src/routePlanner/reducer.test.ts
rename to src/routePlanner/useMarkers.test.ts
index b5cbc19..e8e69f6 100644
--- a/src/routePlanner/reducer.test.ts
+++ b/src/routePlanner/useMarkers.test.ts
@@ -1,6 +1,11 @@
 import t from 'tap';
 import { Marker, ReducerAction } from './types';
-import { createChangeStateMethods, markersReducer } from './reducer.js';
+import { createChangeStateMethods, markersReducer } from './useMarkers.js';
+
+// Testing entire `useMarkers` custom hook would require us to create test preact components here
+// and render them into virtual DOM and check the results, which is just too much hassle
+// (but that's how Facebook designed API of hooks, with all that stateful contextful magic hidden under the hood).
+// So we'll only test `markersReducer` and `createChangeStateMethods` here.
 
 const createReducerWithState = () => {
     let markers: Marker[] = [];
diff --git a/src/routePlanner/reducer.ts b/src/routePlanner/useMarkers.ts
similarity index 91%
rename from src/routePlanner/reducer.ts
rename to src/routePlanner/useMarkers.ts
index 4533c04..8278334 100644
--- a/src/routePlanner/reducer.ts
+++ b/src/routePlanner/useMarkers.ts
@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid';
-import { Dispatch } from 'preact/hooks';
+import { Dispatch, useMemo, useReducer } from 'preact/hooks';
 import { reorderElements } from '../shared/collections.js';
 import { Coordinates } from '../shared/types';
 import { Marker, ReducerAction, ReorderMarkersParams } from './types';
@@ -129,3 +129,13 @@ export const createChangeStateMethods = (
         addMarker,
     };
 };
+
+export const useMarkers = () => {
+    const [markers, dispatchMarkers] = useReducer(markersReducer, []);
+    const changeStateMethods = useMemo(
+        () => createChangeStateMethods(dispatchMarkers),
+        [],
+    );
+
+    return [markers, changeStateMethods] as const;
+};