@eeacms/volto-n2k 1.0.16 → 1.0.17

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.16",
+  "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,9 +7,9 @@ const View = (props) => {
   const {
     code_2000 = [],
     // habitat_description = [],
-    habitat_type = [],
+    // habitat_type = [],
     // number_countries = [],
-    number_sites = [],
+    // number_sites = [],
     scientific_name = [],
   } = provider_data;
 
@@ -21,17 +21,17 @@ const View = (props) => {
           <div className="habitat-metadata">
             <h2 className="name">{scientific_name[0]}</h2>
             <p className="info">
-              {habitat_type[0]} habitat code {code_2000[0]}
+              ANNEX I habitat code&nbsp;&nbsp;&nbsp;{code_2000[0]}
             </p>
             <br />
-            {number_sites[0] && (
+            {/* {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,9 +28,15 @@ 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 {
@@ -52,7 +59,8 @@ div#view .habitat-banner-details .ui.container > * {
         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/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

@@ -19,7 +19,7 @@ const View = (props) => {
     code_2000 = [],
     id_eunis = [],
     license = [],
-    number_sites = [],
+    // number_sites = [],
     picture_url = [],
     scientific_name = [],
     source = [],
@@ -51,26 +51,30 @@ const View = (props) => {
           <div className="species-metadata">
             <h2 className="name">
               {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
-              <span style={{ fontStyle: 'italic' }}>{scientific_name[0]}</span>
+              <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                {scientific_name[0]}
+              </span>
             </h2>
             {author[0] && (
               <p
                 className="info radjhan-bold"
-                style={{ marginBottom: '0.15rem' }}
+                style={{ marginBottom: '0.5rem' }}
               >
                 {author[0]}
               </p>
             )}
             {code_2000[0] && (
-              <p className="info">Natura 2000 species code {code_2000[0]}</p>
+              <p className="info">
+                Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+              </p>
             )}
-            <br />
+            {/* <br />
             {number_sites[0] && (
-              <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
+              <h3 style={{ marginBottom: '0.5rem' }}>{number_sites[0]}</h3>
             )}
             <h4 className="radjhan-normal">
               NATURA 2000 SITES PROTECTING THIS SPECIES
-            </h4>
+            </h4> */}
           </div>
           <div
             className={cx('species-pictures', {

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,14 @@ 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 {

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 (

package/src/less/styles.less

@@ -331,6 +331,16 @@ body.grey-bg {
   .readmore-button {
     color: #00a390;
   }
+
+  .ui.basic.segment .header {
+    .logo-nav-wrapper {
+      .navigation {
+        > .ui.menu a {
+          font-size: 14px;
+        }
+      }
+    }
+  }
 }
 
 .sdf-nav {