@eeacms/volto-n2k 1.0.15 → 1.0.17

package/CHANGELOG.md

@@ -4,13 +4,27 @@ 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).
 
-### [1.0.15](https://github.com/eea/volto-n2k/compare/1.0.14...1.0.15) - 16 February 2023
+### [1.0.17](https://github.com/eea/volto-n2k/compare/1.0.16...1.0.17) - 24 February 2023
+
+#### :hammer_and_wrench: Others
+
+- eslint fix [Miu Razvan - [`417aa35`](https://github.com/eea/volto-n2k/commit/417aa3588b32920a3e378fad8dd72de6d0f02ca3)]
+- species distribution map for birds group [Miu Razvan - [`7712d28`](https://github.com/eea/volto-n2k/commit/7712d28c0c5a79ffd33d4fc8d1d8e73af55937a2)]
+- update [Miu Razvan - [`6ce1f47`](https://github.com/eea/volto-n2k/commit/6ce1f4776686307f867a481b07d5bddd34e10961)]
+- update [Miu Razvan - [`d017393`](https://github.com/eea/volto-n2k/commit/d017393b02d3628a6a72c9f6fccf59b34e517933)]
+### [1.0.16](https://github.com/eea/volto-n2k/compare/1.0.15...1.0.16) - 22 February 2023
+
+#### :hammer_and_wrench: Others
+
+- stylelint fix [Miu Razvan - [`4b97345`](https://github.com/eea/volto-n2k/commit/4b973453416261c5a9e00a8860f3dd4f1072b815)]
+- update styles [Miu Razvan - [`ba5cfaf`](https://github.com/eea/volto-n2k/commit/ba5cfafe4fb6a25937ea96501da6ee7e94001237)]
+- update styles [Miu Razvan - [`4fabfe2`](https://github.com/eea/volto-n2k/commit/4fabfe2d4c94bef263d59e806a4ad242fbc08963)]
+### [1.0.15](https://github.com/eea/volto-n2k/compare/1.0.14...1.0.15) - 17 February 2023
 
 #### :hammer_and_wrench: Others
 
 - fix prettier [Claudia Ifrim - [`aa0d6fe`](https://github.com/eea/volto-n2k/commit/aa0d6fee19dcf0fc83dae5daa09e615fdeaa2b53)]
 - fix prettier [Claudia Ifrim - [`726a157`](https://github.com/eea/volto-n2k/commit/726a157f0467977ccb970e8a2dc583b25a6de37f)]
-- update species and habitats urls [Claudia Ifrim - [`92e4b07`](https://github.com/eea/volto-n2k/commit/92e4b075eaee7c72cfcd7fad83d15a9ee1658953)]
 ### [1.0.14](https://github.com/eea/volto-n2k/compare/1.0.13...1.0.14) - 16 February 2023
 
 ### [1.0.13](https://github.com/eea/volto-n2k/compare/1.0.12...1.0.13) - 16 February 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CddaShape/View.jsx

@@ -9,6 +9,7 @@ import { getCddaShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    if (__SERVER__ || !vectorSource || !site_code[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get site shape
     fetch(getCddaShapeURL(site_code[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [site_code?.[0]]);
+  }, [vectorSource, site_code?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/HabitatDistribution/View.jsx

@@ -9,6 +9,7 @@ import { getHabitatDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get habitat location on sites
     fetch(getHabitatDistributionURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx

@@ -9,6 +9,7 @@ import { getHabitatProtectedSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get habitat protected sites
     fetch(getHabitatProtectedSitesURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/HabitatsBanner/View.jsx

@@ -7,8 +7,7 @@ const View = (props) => {
   const {
     code_2000 = [],
     // habitat_description = [],
-    habitat_prioriy = [],
-    habitat_type = [],
+    // habitat_type = [],
     // number_countries = [],
     // number_sites = [],
     scientific_name = [],
@@ -22,13 +21,17 @@ const View = (props) => {
           <div className="habitat-metadata">
             <h2 className="name">{scientific_name[0]}</h2>
             <p className="info">
-              {habitat_type[0]} {code_2000[0]}
+              ANNEX I habitat code&nbsp;&nbsp;&nbsp;{code_2000[0]}
             </p>
-            {habitat_prioriy[0] ? (
-              <p className="info">Priority habitat {habitat_prioriy[0]}</p>
-            ) : (
-              ''
-            )}
+            <br />
+            {/* {number_sites[0] && (
+              <>
+                <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
+                <h4 className="radjhan-normal">
+                  NATURA 2000 SITES PROTECTING THIS HABITAT
+                </h4>
+              </>
+            )} */}
           </div>
         </div>
       </Container>

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -12,6 +12,7 @@ div#view .habitat-banner-details .ui.container > * {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    gap: 1rem;
 
     @media only screen and (max-width: 765px) {
       flex-flow: column;
@@ -27,12 +28,39 @@ div#view .habitat-banner-details .ui.container > * {
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 54px;
         line-height: 54px;
         text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
       }
 
-      .info {
+      .info,
+      .info > * {
         font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;
         font-weight: 600;

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -15,7 +15,10 @@ const DefaultView = (props) => {
   const currentLang = props.localStorage.get('N2K_LANGUAGE');
 
   useEffect(() => {
-    if (removeTrailingSlash(props.location.pathname) === '/natura2000') {
+    if (
+      props.location?.pathname &&
+      removeTrailingSlash(props.location.pathname) === '/natura2000'
+    ) {
       props.history.push(`/natura2000/${currentLang || 'en'}`);
     }
     /* eslint-disable-next-line */

package/src/components/manage/Blocks/NavigationAnchors/styles.less

@@ -25,6 +25,8 @@ div#view .ui.container > .sticky-navigation-anchors {
 }
 
 .navigation-anchors {
+  display: flex;
+  align-items: center;
   padding: 1rem 0;
 
   .ui.container > .ui.menu {

package/src/components/manage/Blocks/SiteShape/View.jsx

@@ -9,6 +9,7 @@ import { getSiteShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    if (__SERVER__ || !vectorSource || !site_code[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get site shape
     fetch(getSiteShapeURL(site_code[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [site_code?.[0]]);
+  }, [vectorSource, site_code?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/SpeciesBanner/View.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 import React from 'react';
 import { Container } from 'semantic-ui-react';
 import loadable from '@loadable/component';
@@ -15,9 +16,10 @@ const View = (props) => {
   const {
     author = [],
     common_name = [],
-    common_name_list = [],
+    code_2000 = [],
     id_eunis = [],
     license = [],
+    // number_sites = [],
     picture_url = [],
     scientific_name = [],
     source = [],
@@ -47,15 +49,32 @@ const View = (props) => {
       <Container>
         <div className="species-details">
           <div className="species-metadata">
-            <h2 className="name">{scientific_name[0]}</h2>
-            <p className="info">
-              {common_name[0] ? common_name[0] + ' - ' : ''} {author[0]}
-            </p>
-            {common_name_list[0] ? (
-              <p className="info">Common names: {common_name_list[0]}</p>
-            ) : (
-              ''
+            <h2 className="name">
+              {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
+              <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                {scientific_name[0]}
+              </span>
+            </h2>
+            {author[0] && (
+              <p
+                className="info radjhan-bold"
+                style={{ marginBottom: '0.5rem' }}
+              >
+                {author[0]}
+              </p>
+            )}
+            {code_2000[0] && (
+              <p className="info">
+                Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+              </p>
+            )}
+            {/* <br />
+            {number_sites[0] && (
+              <h3 style={{ marginBottom: '0.5rem' }}>{number_sites[0]}</h3>
             )}
+            <h4 className="radjhan-normal">
+              NATURA 2000 SITES PROTECTING THIS SPECIES
+            </h4> */}
           </div>
           <div
             className={cx('species-pictures', {
@@ -99,6 +118,14 @@ const View = (props) => {
                 />
               </div>
             )}
+            <div className="find-image">
+              <a
+                href={`http://images.google.com/images?q=${scientific_name[0]}`}
+                target="_blank"
+              >
+                Find image on the web
+              </a>
+            </div>
           </div>
         </div>
       </Container>

package/src/components/manage/Blocks/SpeciesBanner/style.less

@@ -14,6 +14,7 @@ div#view .species-banner-details .ui.container > * {
     flex-flow: row;
     align-items: center;
     justify-content: space-between;
+    gap: 2rem;
 
     @media only screen and (max-width: 800px) {
       flex-flow: column;
@@ -25,9 +26,34 @@ div#view .species-banner-details .ui.container > * {
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 54px;
         line-height: 54px;
         text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
       }
 
       .info {
@@ -100,6 +126,15 @@ div#view .species-banner-details .ui.container > * {
           height: fit-content;
         }
       }
+
+      .find-image {
+        padding: 0.25rem 1rem;
+        text-align: left;
+
+        a {
+          color: #fff;
+        }
+      }
     }
   }
 

package/src/components/manage/Blocks/SpeciesDistribution/View.jsx

@@ -9,12 +9,13 @@ import { getSpeciesDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
-  const { code_2000 = [] } = provider_data;
+  const { code_2000 = [], species_group_name = [] } = provider_data;
 
   useEffect(() => {
     if (__SERVER__) return;
@@ -34,12 +35,19 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get species location on sites
-    fetch(getSpeciesDistributionURL(code_2000[0])).then(function (response) {
+    fetch(
+      getSpeciesDistributionURL(
+        code_2000[0],
+        species_group_name[0] === 'Birds',
+      ),
+    ).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +63,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/SpeciesDistribution/index.js

@@ -1,7 +1,13 @@
 import SpeciesDistributionView from './View';
 import getSchema from './schema';
 
-export function getSpeciesDistributionURL(code_2000) {
+export function getSpeciesDistributionURL(code_2000, isBird) {
+  if (isBird) {
+    return encodeURI(
+      `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article_12/BirdsDirective_ART_12_version_2020_08_public_VM/MapServer/3/query?f=json&where=speciescode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=speciescode&outSR=102100`,
+    );
+  }
+
   return encodeURI(
     `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/3/query?f=json&where=speciescode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=speciescode&outSR=102100`,
   );

package/src/components/manage/Blocks/SpeciesProtectedSites/View.jsx

@@ -9,6 +9,7 @@ import { getSpeciesProtectedSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,15 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
+
     const esrijsonFormat = new format.EsriJSON();
     // Get species protected sites
     fetch(getSpeciesProtectedSitesURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +59,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (