fix: refactor example to function component and fix button

terrestris · Jan 18, 2024 · a6aa952 · a6aa952
1 parent dc1c73e
commit a6aa952
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 51 deletions.
diff --git a/src/Button/GeoLocationButton/GeoLocationButton.example.md b/src/Button/GeoLocationButton/GeoLocationButton.example.md
@@ -2,26 +2,22 @@ This demonstrates the use of the geolocation button.
 
 
 ```jsx
-import ZoomButton from '@terrestris/react-geo/dist/Button/ZoomButton/ZoomButton';
-import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
 import GeoLocationButton from '@terrestris/react-geo/dist/Button/GeoLocationButton/GeoLocationButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';
 import OlSourceOSM from 'ol/source/OSM';
 import OlView from 'ol/View';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 
-class GeoLocationButtonExample extends React.Component {
+const GeoLocationButtonExample = () => {
 
-  constructor(props) {
+  const [map, setMap] = useState();
 
-    super(props);
-
-    this.mapDivId = `map-${Math.random()}`;
-
-    this.map = new OlMap({
+  useEffect(() => {
+    setMap(new OlMap({
       layers: [
         new OlLayerTile({
           name: 'OSM',
@@ -32,34 +28,34 @@ class GeoLocationButtonExample extends React.Component {
         center: fromLonLat([8, 50]),
         zoom: 9
       })
-    });
-  }
+    }));
+  }, []);
 
-  componentDidMount() {
-    this.map.setTarget(this.mapDivId);
+  if (!map) {
+    return null;
   }
 
-  render() {
-    return (
-      <MapContext.Provider value={this.map}>
-        <div>
-          <div
-            id={this.mapDivId}
-            style={{
-              height: '400px'
-            }}
-          />
-          <GeoLocationButton
-            showMarker={true}
-            follow={true}
-          >
-            Enable GeoLocation
-          </GeoLocationButton>
-        </div>
-      </MapContext.Provider>
-    );
-  }
-}
+  return (
+    <MapContext.Provider
+      value={map}
+    >
+      <>
+        <MapComponent
+          map={map}
+          style={{
+            height: '400px'
+          }}
+        />
+        <GeoLocationButton
+          showMarker={true}
+          follow={true}
+        >
+          Enable GeoLocation
+        </GeoLocationButton>
+      </>
+    </MapContext.Provider>
+  );
+};
 
 <GeoLocationButtonExample />
 ```
diff --git a/src/Button/GeoLocationButton/GeoLocationButton.spec.tsx b/src/Button/GeoLocationButton/GeoLocationButton.spec.tsx
@@ -5,7 +5,6 @@ import {
 } from '@terrestris/react-util/dist/Util/geolocationMock';
 import { render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { transform } from 'ol/proj';
 import * as React from 'react';
 
 import TestUtil from '../../Util/TestUtil';
@@ -33,17 +32,17 @@ describe('<GeoLocationButton />', () => {
       expect(GeoLocationButton).not.toBeUndefined();
     });
 
-    // it('can be rendered', () => {
-    //   const { container } = render(<GeoLocationButton />);
-    //   expect(container).toBeVisible();
-    // });
+    it('can be rendered', () => {
+      const { container } = render(<GeoLocationButton />);
+      expect(container).toBeVisible();
+    });
 
     it('can be pressed', async () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       const button = within(container).getByRole('button');
@@ -57,9 +56,8 @@ describe('<GeoLocationButton />', () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
-        map={map}
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       fireGeolocationListeners();
@@ -84,9 +82,8 @@ describe('<GeoLocationButton />', () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
-        map={map}
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       const button = within(container).getByRole('button');
@@ -104,12 +101,10 @@ describe('<GeoLocationButton />', () => {
         }
       });
 
-      const converted = transform(coordinates, 'EPSG:4326', map.getView().getProjection());
-
       expect(callback).toBeCalledWith({
         accuracy: 7,
         heading: 0,
-        position: converted,
+        position: coordinates,
         speed: 9
       });
     });

diff --git a/src/Button/GeoLocationButton/GeoLocationButton.tsx b/src/Button/GeoLocationButton/GeoLocationButton.tsx
@@ -1,7 +1,7 @@
 import {
-  GeoLocation,
+  type GeoLocation,
   useGeoLocation
-} from '@terrestris/react-util';
+} from '@terrestris/react-util/dist/Hooks/useGeoLocation/useGeoLocation';
 import React, {
   FC,
   useState
@@ -56,7 +56,7 @@ export const GeoLocationButton: FC<GeoLocationButtonProps> = ({
 
   useGeoLocation({
     active: isActive,
-    enableTracking,
+    enableTracking: isActive,
     follow,
     onError,
     onGeoLocationChange,