@eeacms/volto-cca-policy 0.3.131 → 1.0.1

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockEdit.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 
 export default function C3SIndicatorsListingBlockView(props) {
   const { metadata, properties, mode = 'view' } = props;

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockView.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';
 

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/C3SIndicatorsOverviewBlockEdit.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import C3SIndicatorsOverviewBlockView from './C3SIndicatorsOverviewBlockView';

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/schema.js

@@ -1,23 +1,3 @@
-// const fields = ['category'];
-//
-//     category: {
-//       title: 'Category',
-//       type: 'string',
-//       factory: 'Choice',
-//       choices: [
-//         ['health', 'Health'],
-//         ['agriculture', 'Agriculture'],
-//         ['forestry', 'Forestry'],
-//         ['energy', 'Energy'],
-//         ['tourism', 'Tourism'],
-//         ['water-and-coastal', 'Water and Coastal'],
-//       ],
-//       default: 'health',
-//       description: 'Choose indicators category to be used as filter.',
-//       required: true,
-//       noValueOption: false,
-//     },
-
 const schema = {
   title: 'C3S Indicators Overview',
 

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerEdit.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CaseStudyExplorerEdit from './CaseStudyExplorerEdit';
 import { useCases } from './hooks';

package/src/components/manage/Blocks/CaseStudyExplorer/{CaseStudyExplorerView.js → CaseStudyExplorerView.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react'; // Dropdown,
-import { addAppURL } from '@plone/volto/helpers';
+import { addAppURL } from '@plone/volto/helpers/Url/Url';
 
 import CaseStudyMap from './CaseStudyMap';
 import CaseStudyFilters from './CaseStudyFilters';

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CaseStudyExplorerView from './CaseStudyExplorerView';
 import { useCases } from './hooks';
@@ -22,7 +22,7 @@ jest.mock('./utils', () => ({
   getFilters: jest.fn(),
 }));
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
   addAppURL: jest.fn((url) => url),
 }));
 

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CaseStudyFilters from './CaseStudyFilters';
 

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CaseStudyMap from './CaseStudyMap';
 import * as utils from './utils';

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Icon } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 export default function FeatureDisplay({ feature, onClose }) {
   return feature ? (
@@ -30,7 +31,7 @@ export default function FeatureDisplay({ feature, onClose }) {
       {feature.image && (
         <span className="img">
           <center>
-            <img src={feature.image} alt={feature.title} />
+            <Image src={feature.image} alt={feature.title} />
           </center>
         </span>
       )}

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import FeatureDisplay from './FeatureDisplay';
 

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

@@ -100,10 +100,6 @@
         margin-right: 5px;
         background-color: #005c96 !important;
         background-color: #bbb;
-
-        // &.light-blue {
-        //   background-color: #00ffff !important;
-        // }
       }
     }
   }

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -23,7 +23,6 @@ export function getFeatures(cases, ol) {
       },
       false,
     );
-    //return new Feature({ labelPoint: point, index: index });
     return point;
   });
 }
@@ -45,35 +44,16 @@ export function filterCases(cases, activeFilters) {
       impacts: false,
     };
 
-    // activeFilters.sectors.forEach((filter) => {
-    //   if (_case.properties.sectors.includes(',' + filter + ','))
-    //     flag.sectors = true;
-    // });
     flag.sectors = activeFilters.sectors.every((sub) =>
       _case.properties.sectors.includes(sub),
     );
-
-    // ADAPTATION APPROACHES
-    // activeFilters.elements.forEach((filter) => {
-    //   if (_case.properties.elements.includes(',' + filter + ','))
-    //     flag.elements = true;
-    // });
     flag.elements = activeFilters.elements.every((sub) =>
       _case.properties.elements.includes(sub),
     );
 
-    // activeFilters.impacts.forEach((filter) => {
-    //   if (_case.properties.impacts.includes(',' + filter + ','))
-    //     flag.impacts = true;
-    // });
     flag.impacts = activeFilters.impacts.every((sub) =>
       _case.properties.impacts.includes(sub),
     );
-
-    // activeFilters.measures.forEach((filter) => {
-    //   if (_case.properties.ktms.includes(',' + filter + ','))
-    //     flag.measures = true;
-    // });
     flag.measures = activeFilters.measures.every((sub) =>
       _case.properties.ktms.includes(sub),
     );
@@ -121,16 +101,6 @@ export function getFilters(cases) {
         _filters.elements[elementKeys[i + 1]] = elementNames[i];
       }
     }
-
-    // let ktmKeys = _case.properties.ktms.split(',');
-    // let ktmNames = _case.properties.impacts_str.split(',');
-    // for (let i = 0; i < ktmKeys.length; i++) {
-    //   if (!_filters.ktms.hasOwnProperty(ktmKeys[i])) {
-    //     _filters.ktms[ktmKeys[i]] = 1;
-    //   }
-    // }
   }
-  // console.log('getFilters:', _filters);
-
   return _filters;
 }

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsEdit.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import Schema from './schema';
 import View from './CollectionStatsView';

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -3,8 +3,9 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { getQueryStats } from '@eeacms/volto-cca-policy/store';
 import { getBaseUrl as getBase } from '@eeacms/volto-cca-policy/utils';
-import { getBaseUrl } from '@plone/volto/helpers';
-import { Icon, UniversalLink } from '@plone/volto/components';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Icon as UiIcon } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { useIntl } from 'react-intl';

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CollectionStatsView from './CollectionStatsView';
 import config from '@plone/volto/registry';

package/src/components/manage/Blocks/ContentLinks/ContentLinksEdit.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import schema from './schema';

package/src/components/manage/Blocks/ContentLinks/ContentLinksView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { List } from 'semantic-ui-react';
 import { Link, useLocation } from 'react-router-dom';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 import cx from 'classnames';
 

package/src/components/manage/Blocks/ContentLinks/ContentLinksView.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import renderer from 'react-test-renderer';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import ContentLinksView from './ContentLinksView';
 import config from '@plone/volto/registry';

package/src/components/manage/Blocks/ContentLinks/DropdownListView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Dropdown } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 const messages = defineMessages({
   select: {

package/src/components/manage/Blocks/ContentLinks/DropdownListView.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import renderer from 'react-test-renderer';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import DropdownListView from './DropdownListView';
 import config from '@plone/volto/registry';

package/src/components/manage/Blocks/CountryMapHeatIndex/Filter.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import Filter from './Filter';
 

package/src/components/manage/Blocks/CountryMapHeatIndex/{View.js → View.jsx}

@@ -3,7 +3,7 @@ import { compose } from 'redux';
 import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
 
 import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import {
   euCountryNames as euCountryNamesRaw,
   tooltipStyle,
@@ -11,16 +11,17 @@ import {
   adjustEuCountryNames,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
 import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
-
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
+import {
+  withResponsiveContainer,
+  withVisibilitySensor,
+} from '@eeacms/volto-cca-policy/hocs';
 import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
 
 import Filter from './Filter';
 import { Grid } from 'semantic-ui-react';
 import { useCountriesMetadata } from './hooks';
-import { addAppURL } from '@plone/volto/helpers';
+import { addAppURL } from '@plone/volto/helpers/Url/Url';
 
 import './styles.less';
 
@@ -28,13 +29,15 @@ import './styles.less';
 //   'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/4326/20M/cntrg.json';
 
 const View = (props) => {
-  const { geofeatures, projection } = props;
+  const { geofeatures, projection, ol } = props;
 
   const highlight = React.useRef();
   const [stateHighlight, setStateHighlight] = React.useState();
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const styles = React.useMemo(() => makeStyles(highlight), [stateHighlight]);
+  const styles = React.useMemo(
+    () => makeStyles(highlight, ol),
+    [stateHighlight, ol], // eslint-disable-line react-hooks/exhaustive-deps
+  );
   const tooltipRef = React.useRef();
   const [tileWMSSources, setTileWMSSources] = React.useState();
   const [euCountriesSource, setEuCountriessource] = React.useState();
@@ -124,7 +127,7 @@ const View = (props) => {
 
     const euSource = new ol.source.Vector({ features: filtered });
     setEuCountriessource(euSource);
-  }, [geofeatures, countries_metadata, thematicMapMode, euCountryNames]);
+  }, [geofeatures, countries_metadata, thematicMapMode, euCountryNames, ol]);
 
   return (
     <div>
@@ -186,8 +189,9 @@ const View = (props) => {
 };
 
 export default compose(
-  withGeoJsonData(),
   clientOnly,
+  withGeoJsonData(),
   withResponsiveContainer('countryMapHeatIndex'),
   withVisibilitySensor(),
+  withOpenLayers,
 )(View);

package/src/components/manage/Blocks/CountryMapHeatIndex/mapstyle.js

@@ -1,5 +1,3 @@
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
 // const flagRenderer = ({ stroke, fill }) => (pixelCoordinates, state) => {
 //   const context = state.context;
 //   const geometry = state.geometry.clone();
@@ -29,7 +27,7 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 //   context.restore();
 // };
 
-export const makeStyles = (highlight) => {
+export const makeStyles = (highlight, ol) => {
   const stroke = new ol.style.Stroke({
     // color: 'rgba(255,255,255,0.8)',
     color: '#d1d1d1',

package/src/components/manage/Blocks/CountryMapObservatory/CountryMapObservatoryEdit.jsx

@@ -1,4 +1,5 @@
-import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import CountryMapObservatoryView from './CountryMapObservatoryOLView';
 import Schema from './schema';
 

package/src/components/manage/Blocks/CountryMapObservatory/CountryMapObservatoryOLView.jsx

@@ -12,9 +12,10 @@ import {
   getImageUrl,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
 import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
-
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
+import {
+  withResponsiveContainer,
+  withVisibilitySensor,
+} from '@eeacms/volto-cca-policy/hocs';
 import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
 

package/src/components/manage/Blocks/CountryMapProfile/Filter.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import Filter from './Filter';
 

package/src/components/manage/Blocks/CountryMapProfile/OLView.jsx

@@ -15,9 +15,11 @@ import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
 import { useCountriesMetadata } from './hooks';
 import Filter from './Filter';
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
-import { addAppURL } from '@plone/volto/helpers';
+import {
+  withResponsiveContainer,
+  withVisibilitySensor,
+} from '@eeacms/volto-cca-policy/hocs';
+import { addAppURL } from '@plone/volto/helpers/Url/Url';
 
 import './styles.less';
 
@@ -92,15 +94,6 @@ const View = (props) => {
   }, [geofeatures, countries_metadata, thematicMapMode, euCountryNames, ol]);
 
   const baseUrl = props.path || props.location?.pathname || '';
-
-  // const onFeatureClick = React.useCallback(
-  //   (feature) => {
-  //     const country = feature.get('na');
-  //     // history.push(`${baseUrl}/${country.toLowerCase()}`);
-  //   },
-  //   [baseUrl, history],
-  // );
-  // console.log('thematicMapMode', thematicMapMode);
   return (
     <div className="ol-country-map">
       <Grid columns="12">

package/src/components/manage/Blocks/CountryProfileDetail/{CountryTabPane.js → CountryTabPane.jsx}

@@ -24,7 +24,7 @@ export default function CountryTabPane(props) {
         if (element.type === 'accordeon') {
           return element.value.map((accordion, index) => {
             return (
-              <Accordion className="secondary">
+              <Accordion className="secondary" key={`${indexKey}_${index}`}>
                 <Accordion.Title
                   role="button"
                   tabIndex={0}
@@ -49,7 +49,10 @@ export default function CountryTabPane(props) {
         }
         if (element.type === 'table') {
           return (
-            <div dangerouslySetInnerHTML={{ __html: element.value }}></div>
+            <div
+              key={indexKey}
+              dangerouslySetInnerHTML={{ __html: element.value }}
+            ></div>
           );
         }
 
@@ -58,8 +61,12 @@ export default function CountryTabPane(props) {
           for (let i = 0; i < element.value.length; i++) {
             _html_value += element.value[i];
           }
-          // return <table>{_html_value}</table>;
-          return <div dangerouslySetInnerHTML={{ __html: _html_value }}></div>;
+          return (
+            <div
+              key={indexKey}
+              dangerouslySetInnerHTML={{ __html: _html_value }}
+            ></div>
+          );
         }
         return null;
       })}

package/src/components/manage/Blocks/CountryProfileDetail/CountryTabPane.test.jsx

@@ -2,7 +2,7 @@ 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 '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CountryTabPane from './CountryTabPane';
 

package/src/components/manage/Blocks/CountryProfileDetail/{View.js → View.jsx}

@@ -6,14 +6,14 @@ import { FormattedMessage } from 'react-intl';
 import './styles.less';
 
 export default function View(props) {
-  // const dataJson = JSON.parse(
-  //   props?.properties['@components']?.countryprofile?.html,
-  // );
-  const dataJson = props?.properties['@components']?.countryprofile?.html || {};
+  const dataJson =
+    props?.properties?.['@components']?.countryprofile?.html || {};
+
   const [activePanes, setActivePanes] = React.useState({});
   const isNonEN = props?.properties?.language !== 'en';
 
   const panes = [];
+
   if (dataJson?.menu) {
     dataJson.menu.forEach((element, index) => {
       panes.push({
@@ -22,10 +22,10 @@ export default function View(props) {
           <TabPane>
             <CountryTabPane
               _index={index}
-              contents={dataJson.content[index]}
+              contents={dataJson.content?.[index]}
               activePanes={activePanes}
               setActivePanes={setActivePanes}
-            ></CountryTabPane>
+            />
           </TabPane>
         ),
       });
@@ -42,35 +42,39 @@ export default function View(props) {
           />
         </Message>
       )}
+
       {dataJson.message_top ? (
         <div className="eea callout">{dataJson.message_top}</div>
       ) : null}
+
       {dataJson.top_accordeon ? (
         <div className="top-accordion">
           {dataJson.top_accordeon.map((accordion, index) => (
-            <Accordion className="secondary">
+            <Accordion className="secondary" key={accordion.title}>
               <Accordion.Title
                 role="button"
                 tabIndex={0}
-                active={activePanes['_' + index] || false}
-                onClick={(e) => {
-                  const temp = JSON.parse(JSON.stringify(activePanes));
-                  let val = temp['_' + index] || false;
-                  temp['_' + index] = !val;
-                  setActivePanes(temp);
+                active={activePanes[`_${index}`] || false}
+                onClick={() => {
+                  setActivePanes({
+                    ...activePanes,
+                    [`_${index}`]: !(activePanes[`_${index}`] || false),
+                  });
                 }}
               >
                 <span className="item-title">{accordion.title}</span>
                 <Icon className="ri-arrow-down-s-line" />
               </Accordion.Title>
+
               <Accordion.Content
-                active={activePanes['_' + index] || false}
+                active={activePanes[`_${index}`] || false}
                 dangerouslySetInnerHTML={{ __html: accordion.value }}
-              ></Accordion.Content>
+              />
             </Accordion>
           ))}
         </div>
       ) : null}
+
       <Tab
         className="secondary menu"
         panes={panes}
@@ -85,6 +89,7 @@ export default function View(props) {
           tabIndex: 0,
         }}
       />
+
       {dataJson.updated ? (
         <p>Reported updated until: {dataJson.updated}</p>
       ) : null}