@eeacms/volto-cca-policy 0.2.46 → 0.2.48

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.2.48](https://github.com/eea/volto-cca-policy/compare/0.2.47...0.2.48) - 2 July 2024
+
+#### :hammer_and_wrench: Others
+
+- Update version for hero block [Tiberiu Ichim - [`24131f1`](https://github.com/eea/volto-cca-policy/commit/24131f1626e2e27169e737ac0ac0b369b4804064)]
+### [0.2.47](https://github.com/eea/volto-cca-policy/compare/0.2.46...0.2.47) - 2 July 2024
+
+#### :hammer_and_wrench: Others
+
+- Tests [Tiberiu Ichim - [`d2cb56d`](https://github.com/eea/volto-cca-policy/commit/d2cb56d7b939c79fc025890110adb281cc68f570)]
+- Tests [Tiberiu Ichim - [`73a4c47`](https://github.com/eea/volto-cca-policy/commit/73a4c47d243e866305c951b37c70ea75873b93db)]
+- Tests [Tiberiu Ichim - [`afc6684`](https://github.com/eea/volto-cca-policy/commit/afc66846fc40bedeefb18e4a2f7fc8c0ec5c59f1)]
+- Tests [Tiberiu Ichim - [`72e29dd`](https://github.com/eea/volto-cca-policy/commit/72e29dd6bfed94b67c92c5f6e02fcfc3bad299bb)]
+- Show subtitle in the cca event title block [Tiberiu Ichim - [`e3fee69`](https://github.com/eea/volto-cca-policy/commit/e3fee690b3562138d67d01c8fa00453285631614)]
 ### [0.2.46](https://github.com/eea/volto-cca-policy/compare/0.2.45...0.2.46) - 1 July 2024
 
 ### [0.2.45](https://github.com/eea/volto-cca-policy/compare/0.2.44...0.2.45) - 24 June 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -38,6 +38,7 @@
     "@elastic/search-ui": "1.21.2",
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",
+    "@eeacms/volto-hero-block": "^7.1.0",
     "d3-array": "^2.12.1",
     "jotai": "^1.6.0",
     "query-string": "7.1.0",

package/src/components/theme/Widgets/GeolocationWidget.jsx

@@ -1,93 +1,59 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
 import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
+import MapContainer from '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer';
 
-import {
-  Controls,
-  Interactions,
-  Layer,
-  Map,
-  Layers,
-} from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
-const MapContainer = (props) => {
-  const { longitude, latitude, source } = props;
-  return (
-    <Map
-      view={{
-        center: ol.proj.fromLonLat([longitude, latitude]),
-        showFullExtent: true,
-        zoom: 15,
-      }}
-      pixelRatio={1}
-      controls={ol.control.defaults({ attribution: false })}
-    >
-      <Layers>
-        <Controls attribution={false} zoom={false} />
-        <Interactions
-          doubleClickZoom={true}
-          dragAndDrop={false}
-          dragPan={true}
-          keyboardPan={true}
-          keyboardZoom={true}
-          mouseWheelZoom={true}
-          pointer={true}
-          select={false}
-        />
-        <Layer.Tile source={source} zIndex={0} />
-      </Layers>
-    </Map>
-  );
+const defaultValue = {
+  latitude: 55.6761,
+  longitude: 12.5683,
 };
 
 const GeolocationWidget = (props) => {
   const { id, value, onChange } = props;
 
-  const [tileWMSSources, setTileWMSSources] = useState([]);
   const [address, setAddress] = useState('');
 
   const handleAddressChange = (event) => {
     setAddress(event.target.value);
   };
 
-  const defaultValue = {
-    latitude: 55.6761,
-    longitude: 12.5683,
-  };
-
-  const handleSearch = (e) => {
+  const handleSearch = async (e) => {
     e.preventDefault();
 
-    fetch(`https://nominatim.openstreetmap.org/search?q=${address}&format=json`)
-      .then((response) => {
-        const { lat, lon } = response.data[0];
-        onChange(id, { latitude: lat, longitude: lon });
-      })
-      .catch((error) => {
-        // console.error(error);
-      });
-  };
+    const url = `https://nominatim.openstreetmap.org/search?q=${address}&format=json`;
 
-  React.useEffect(() => {
-    setTileWMSSources([
-      new ol.source.TileWMS({
-        url: 'https://gisco-services.ec.europa.eu/maps/service',
-        params: {
-          LAYERS: 'OSMBlossomComposite',
-          TILED: true,
-        },
-        serverType: 'geoserver',
-        transition: 0,
-      }),
-    ]);
-  }, []); // ol.source.TileWMS, ol.source.Vector
+    const { corsProxyPath = '/cors-proxy', host, port } = config.settings;
+    const base = __SERVER__
+      ? `http://${host}:${port}`
+      : `${window.location.protocol}//${window.location.host}`;
+
+    const path = `${base}${corsProxyPath}/${url}`;
+
+    let locations;
+    try {
+      const response = await fetch(path);
+      locations = await response.json();
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('error in fetching location', e);
+    }
+
+    if (locations?.length) {
+      const { lat, lon } = locations[0];
+      onChange(id, { latitude: lat, longitude: lon });
+    }
+  };
 
   if (__SERVER__) return '';
 
+  const lat = value?.latitude ?? defaultValue.latitude;
+  const long = value?.longitude ?? defaultValue.longitude;
+  const mapKey = `${lat}_${long}`;
+
   return (
     <FormFieldWrapper {...props} className="geolocation-field">
       <div className="ui form">
@@ -101,12 +67,9 @@ const GeolocationWidget = (props) => {
         </div>
       </div>
       <MapContainer
-        key={`${value?.latitude || defaultValue.latitude}_${
-          value?.longitude || defaultValue.longitude
-        }`}
+        key={mapKey}
         longitude={value?.longitude || defaultValue.longitude}
         latitude={value?.latitude || defaultValue.latitude}
-        source={tileWMSSources[0]}
       />
       <div className="ui form">
         <div className="inline fields">
@@ -115,6 +78,9 @@ const GeolocationWidget = (props) => {
               type="number"
               placeholder="latitude"
               value={value?.latitude || defaultValue.latitude}
+              onChange={(e) =>
+                onChange(id, { ...value, latitude: e.target.value })
+              }
             />
           </div>
           <div className="field">
@@ -122,6 +88,9 @@ const GeolocationWidget = (props) => {
               type="number"
               placeholder="longitude"
               value={value?.longitude || defaultValue.longitude}
+              onChange={(e) =>
+                onChange(id, { ...value, longitude: e.target.value })
+              }
             />
           </div>
         </div>

package/src/components/theme/Widgets/GeolocationWidget.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+
+import GeolocationWidget from './GeolocationWidget';
+
+global.__SERVER__ = false;
+
+jest.mock(
+  '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer',
+);
+const mockStore = configureStore();
+
+describe('GeolocationWidget', () => {
+  it('should render the component', () => {
+    const data = {
+      id: 'location',
+      title: 'Location',
+      value: {
+        latitude: 10,
+        longitude: 50,
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <GeolocationWidget {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Widgets/GeolocationWidgetMapContainer.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import {
+  Controls,
+  Interactions,
+  Layer,
+  Map,
+  Layers,
+} from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+
+const TileSetLoader = (props) => {
+  const [tileWMSSources, setTileWMSSources] = useState([]);
+
+  React.useEffect(() => {
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMBlossomComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+  }, []);
+
+  return tileWMSSources ? (
+    <MapContainer {...props} source={tileWMSSources[0]} />
+  ) : null;
+};
+
+const MapContainer = (props) => {
+  const { longitude, latitude, source } = props;
+  return (
+    <Map
+      view={{
+        center: ol.proj.fromLonLat([longitude, latitude]),
+        showFullExtent: true,
+        zoom: 15,
+      }}
+      pixelRatio={1}
+      controls={ol.control.defaults({ attribution: false })}
+    >
+      <Layers>
+        <Controls attribution={false} zoom={false} />
+        <Interactions
+          doubleClickZoom={true}
+          dragAndDrop={false}
+          dragPan={true}
+          keyboardPan={true}
+          keyboardZoom={true}
+          mouseWheelZoom={true}
+          pointer={true}
+          select={false}
+        />
+        <Layer.Tile source={source} zIndex={0} />
+      </Layers>
+    </Map>
+  );
+};
+
+export default TileSetLoader;

package/src/components/theme/Widgets/__mocks__/GeolocationWidgetMapContainer.jsx

@@ -0,0 +1,3 @@
+export default function MapContainer() {
+  return <div className="map-container"></div>;
+}

package/src/index.js

@@ -70,6 +70,11 @@ const applyConfig = (config) => {
     ];
   }
 
+  config.settings.allowed_cors_destinations = [
+    ...(config.settings.allowed_cors_destinations || []),
+    'nominatim.openstreetmap.org',
+  ];
+
   // if (!config.settings.loadables.d3)
   //   config.settings.loadables.d3 = loadable.lib(() => import('d3'));
   // if (!config.settings.loadables.d3Geo)