From 7b0732e4cc67d5e6285727d9bc5681072b34fbe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9mie=20Treff?= <ntreff@terrestris.de>
Date: Fri, 22 Mar 2024 14:13:02 +0100
Subject: [PATCH] fix: made use of olInteraction hook

---
 .../RotationButton/RotationButton.example.md  | 58 ++++++++++---------
 .../RotationButton/RotationButton.spec.tsx    |  9 ++-
 src/Button/RotationButton/RotationButton.tsx  | 22 +++----
 3 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/Button/RotationButton/RotationButton.example.md b/src/Button/RotationButton/RotationButton.example.md
index 55806eefd..90519d22a 100644
--- a/src/Button/RotationButton/RotationButton.example.md
+++ b/src/Button/RotationButton/RotationButton.example.md
@@ -1,37 +1,38 @@
 This demonstrates the use of the RotationButton
 
 ```jsx
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import OlMap from 'ol/Map';
-import OlView from 'ol/View';
-import OlLayerTile from 'ol/layer/Tile';
-import OlSourceOsm from 'ol/source/OSM';
-import { fromLonLat } from 'ol/proj';
+import OlMap from "ol/Map";
+import OlView from "ol/View";
+import OlLayerTile from "ol/layer/Tile";
+import OlSourceOsm from "ol/source/OSM";
+import { fromLonLat } from "ol/proj";
 
-import MapContext from '@terrestris/react-geo/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
-import RotationButton from '@terrestris/react-geo/dist/Button/RotationButton/RotationButton';
+import MapComponent from "@terrestris/react-util/dist/Components/MapComponent/MapComponent";
+import MapContext from "@terrestris/react-util/dist/Context/MapContext/MapContext";
+import RotationButton from "@terrestris/react-geo/dist/Button/RotationButton/RotationButton";
 
 const RotationButtonExample = () => {
-
   const [map, setMap] = useState();
+  const [pressed, setPressed] = useState(false);
 
   useEffect(() => {
-
-    setMap(new OlMap({
-      layers: [
-        new OlLayerTile({
-          name: 'OSM',
-          source: new OlSourceOsm()
-        })
-      ],
-      view: new OlView({
-        center: fromLonLat([8, 50]),
-        zoom: 4
+    setMap(
+      new OlMap({
+        layers: [
+          new OlLayerTile({
+            name: "OSM",
+            source: new OlSourceOsm(),
+          }),
+        ],
+        view: new OlView({
+          center: fromLonLat([8, 50]),
+          zoom: 4,
+        }),
       })
-    }));
-  },[] );
+    );
+  }, []);
 
   if (!map) {
     return null;
@@ -43,14 +44,17 @@ const RotationButtonExample = () => {
         <MapComponent
           map={map}
           style={{
-            height: '400px'
+            height: "400px",
           }}
         />
-        <RotationButton/>
+        <RotationButton
+          onChange={() => setPressed(!pressed)}
+          pressed={pressed}
+        />
       </MapContext.Provider>
     </div>
   );
-}
+};
 
-<RotationButtonExample />
+<RotationButtonExample />;
 ```
diff --git a/src/Button/RotationButton/RotationButton.spec.tsx b/src/Button/RotationButton/RotationButton.spec.tsx
index f68c5c731..dc64c52bc 100644
--- a/src/Button/RotationButton/RotationButton.spec.tsx
+++ b/src/Button/RotationButton/RotationButton.spec.tsx
@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils';
 import { within } from '@testing-library/react';
-
+import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
-import OlView from 'ol/View';
 import OlSourceOsm from 'ol/source/OSM';
-import OlLayerTile from 'ol/layer/Tile';
+import OlView from 'ol/View';
+import * as React from 'react';
 
-import { renderInMapContext } from '../../Util/rtlTestUtils';
 import RotationButton from './RotationButton';
 
 describe('<RotationButton />', () => {
diff --git a/src/Button/RotationButton/RotationButton.tsx b/src/Button/RotationButton/RotationButton.tsx
index cb5ffdf95..7ce7d8682 100644
--- a/src/Button/RotationButton/RotationButton.tsx
+++ b/src/Button/RotationButton/RotationButton.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { DragRotateAndZoom } from 'ol/interaction.js';
 
-import { useMap } from '../../Hook/useMap';
+import { useOlInteraction } from '@terrestris/react-util/';
 import ToggleButton, {
   ToggleButtonProps
 } from '../ToggleButton/ToggleButton';
@@ -13,31 +13,25 @@ import ToggleButton, {
 export type RotationButtonProps =  Partial<ToggleButtonProps>;
 
 export const RotationButton: React.FC<RotationButtonProps> = ({
+  pressed = false,
   tooltip = 'Shift + Drag to rotate and zoom the map around its center',
   pressedIcon = <FontAwesomeIcon icon={faArrowsRotate} />,
   tooltipProps,
   ...passThroughProps}
 ) => {
-  const map = useMap();
 
-  if (!map) {
-    return <></>;
-  }
-  let action = new DragRotateAndZoom();
-  const onToggle = (pressed: boolean) => {
-    if (pressed) {
-      map.addInteraction(action);
-    } else {
-      map.removeInteraction(action);
-    }
-  };
+  useOlInteraction(() => {
+    return (
+      new DragRotateAndZoom()
+    );
+  }, [], pressed);
 
   return (
     <ToggleButton
       tooltip={tooltip}
       icon={<FontAwesomeIcon icon={faArrowsRotate} />}
       pressedIcon={<FontAwesomeIcon icon={faArrowsRotate} />}
-      onToggle={onToggle}
+      pressed={pressed}
       tooltipProps={tooltipProps}
       {...passThroughProps}
     />