Merge pull request #1998 from statisticsnorway/MIMIR-1816_highmap-ssr

Add safeguards highchart react does not fail in ssr
statisticsnorway · Jul 7, 2023 · e0bccfe · e0bccfe
2 parents 05a2acf + bceaf05
commit e0bccfe
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/src/main/resources/assets/styles/_globalStyles.scss b/src/main/resources/assets/styles/_globalStyles.scss
@@ -254,10 +254,19 @@ table {
   }
 
 }
+/* -- End Table -- */
+
+/* -- Placeholder -- */
+.edit-placeholder {
+  border: 3px solid $ssb-dark-4;
+  padding: 16px;
+  margin: 16px 0
+}
+
+/* -- End Placeholder -- */
 
 /* -- Opacity Divider,Fix in komponent library later -- */
 .ssb-divider {
   opacity: 1;
 }
 
-/* -- End Table -- */
diff --git a/src/main/resources/site/parts/highmap/Highmap.jsx b/src/main/resources/site/parts/highmap/Highmap.jsx
@@ -1,15 +1,17 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 import PropTypes from 'prop-types'
 import { Text } from '@statisticsnorway/ssb-component-library'
 import { Col, Row } from 'react-bootstrap'
 import { useMediaQuery } from 'react-responsive'
 
-require('highcharts/modules/accessibility')(Highcharts)
-require('highcharts/modules/exporting')(Highcharts)
-require('highcharts/modules/export-data')(Highcharts)
-require('highcharts/modules/map')(Highcharts)
+if (typeof Highcharts === 'object') {
+  require('highcharts/modules/accessibility')(Highcharts)
+  require('highcharts/modules/exporting')(Highcharts)
+  require('highcharts/modules/export-data')(Highcharts)
+  require('highcharts/modules/map')(Highcharts)
+}
 
 function renderFootnotes(footnotes) {
   if (footnotes.length) {
@@ -27,14 +29,16 @@ function renderFootnotes(footnotes) {
 }
 
 function Highmap(props) {
-  if (props.language !== 'en') {
-    Highcharts.setOptions({
-      lang: {
-        decimalPoint: ',',
-        thousandsSep: ' ',
-      },
-    })
-  }
+  useEffect(() => {
+    if (props.language !== 'en') {
+      Highcharts.setOptions({
+        lang: {
+          decimalPoint: ',',
+          thousandsSep: ' ',
+        },
+      })
+    }
+  }, [])
 
   const desktop = useMediaQuery({
     minWidth: 992,

diff --git a/src/main/resources/site/parts/highmap/highmap.ts b/src/main/resources/site/parts/highmap/highmap.ts
@@ -67,6 +67,10 @@ export function get(req: XP.Request): XP.Response {
   try {
     const config = getComponent()?.config as HighmapPartConfig
     const highmapId: string | undefined = config.highmapId
+
+    if (req.mode === 'edit') {
+      return renderEditPlaceholder()
+    }
     return renderPart(req, highmapId)
   } catch (e) {
     return renderError(req, 'Error in part', e)
@@ -81,6 +85,17 @@ export function preview(req: XP.Request, highmapId: string | undefined): XP.Resp
   }
 }
 
+function renderEditPlaceholder(): XP.Response {
+  return {
+    contentType: 'text/html',
+    body: `
+    <div class="edit-placeholder"><h2>HIGHMAP</h2>
+      <p>Vises ikke i redigeringsmodus. Se den i forhåndsvisning.</p>
+    </div>
+    `,
+  }
+}
+
 function renderPart(req: XP.Request, highmapId: string | undefined): XP.Response {
   const page = getContent()
   if (!page) throw new Error('No page found')
@@ -106,7 +121,7 @@ function renderPart(req: XP.Request, highmapId: string | undefined): XP.Response
     : null
 
   const mapResult: MapResult = mapStream ? JSON.parse(readText(mapStream)) : {}
-  mapResult.features.forEach((element, index) => {
+  mapResult.features?.forEach((element, index) => {
     if (element.properties.name) {
       // New property, to keep capitalization for display in map
       mapResult.features[index].properties.capitalName = element.properties.name.toUpperCase()