fix: make component better work with nextjs image sand routing

package.json

@@ -36,7 +36,7 @@
     "@testing-library/jest-dom": "5.16.3",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.2.4",
     "babel-loader": "8.2.2",

src/components/LayerTree/LayerTree.js

@@ -67,6 +67,16 @@ const propTypes = {
    */
   renderAfterItem: PropTypes.func,
 
+  /**
+   * Custom function to render the label.
+   *
+   * @param {string} item The label to render.
+   * @param {LayerTree} comp The LayerTree component.
+   *
+   * @return {node} A jsx node.
+   */
+  renderLabel: PropTypes.func,
+
   /**
    * Object holding title for the layer tree's buttons.
    */
@@ -117,6 +127,10 @@ const defaultProps = {
   renderItemContent: null,
   renderBeforeItem: null,
   renderAfterItem: null,
+  renderLabel: (layer, layerComp) => {
+    const { t } = layerComp.props;
+    return t(layer.name);
+  },
   titles: {
     layerShow: 'Show layer',
     layerHide: 'Hide layer',
@@ -328,7 +342,7 @@ class LayerTree extends Component {
   // Render a button which expands/collapse the layer if there is children
   // or simulate a click on the input otherwise.
   renderToggleButton(layer) {
-    const { t, titles, isItemHidden } = this.props;
+    const { t, titles, isItemHidden, renderLabel } = this.props;
     const { expandedLayers } = this.state;
     const onInputClick = () => {
       this.onInputClick(
@@ -354,7 +368,7 @@ class LayerTree extends Component {
         onClick={onInputClick}
         onKeyPress={onInputClick}
       >
-        <div>{t(layer.name)}</div>
+        <div>{renderLabel(layer, this)}</div>
         {this.renderArrow(layer)}
       </div>
     );

src/components/Overlay/Overlay.js

@@ -19,9 +19,9 @@ const propTypes = {
    */
   observe: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.instanceOf(Element),
+    PropTypes.node,
     PropTypes.instanceOf(Component),
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    PropTypes.shape({ current: PropTypes.node }),
     PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
   ]),
 

src/components/Permalink/Permalink.js

@@ -129,6 +129,7 @@ class Permalink extends Component {
     }
 
     if (map !== prevProps.map) {
+      unByKey(this.moveEndRef);
       this.moveEndRef = map.on('moveend', () => {
         return this.onMapMoved();
       });
@@ -138,11 +139,9 @@ class Permalink extends Component {
   }
 
   componentWillUnmount() {
-    const { layerService, map } = this.props;
+    const { layerService } = this.props;
 
-    if (map) {
-      unByKey(this.moveEndRef);
-    }
+    unByKey(this.moveEndRef);
 
     if (layerService) {
       layerService.un('change:layers', this.updateLayers);
@@ -153,11 +152,20 @@ class Permalink extends Component {
   onMapMoved() {
     const { map } = this.props;
     const mapView = map.getView();
-    const { center } = mapView.getProperties();
+    const center = mapView.getCenter();
+    const params = {};
+
+    if (
+      center !== undefined &&
+      center[0] !== undefined &&
+      center[1] !== undefined
+    ) {
+      params.x = this.roundCoord(center[0]);
+      params.y = this.roundCoord(center[1]);
+    }
 
     this.setState({
-      x: this.roundCoord(center[0]),
-      y: this.roundCoord(center[1]),
+      ...params,
       // rounds zoom to two digits max.
       z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`,
     });

src/components/ResizeHandler/ResizeHandler.js

@@ -6,9 +6,9 @@ import ResizeObserver from 'resize-observer-polyfill';
 const propTypes = {
   observe: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.instanceOf(Element),
+    PropTypes.node,
     PropTypes.instanceOf(Component),
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    PropTypes.shape({ current: PropTypes.node }),
     PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
   ]),
   maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),

src/components/RouteSchedule/RouteSchedule.js

@@ -77,13 +77,13 @@ const defaultRenderStationImg = (
   isNotStation,
 ) => {
   const { length } = stations;
-  let src = station;
+  let src = station.src || station;
   if (index === 0) {
-    src = firstStation;
+    src = firstStation.src || firstStation;
   } else if (index === length - 1) {
-    src = lastStation;
+    src = lastStation.src || lastStation;
   } else if (isNotStation) {
-    src = line;
+    src = line.src || line;
   }
   return <img src={src} alt="routeScheduleLine" className="rt-route-icon" />;
 };
@@ -102,9 +102,10 @@ const defaultRenderStation = ({
     departureDelay,
     arrivalTime,
     departureTime,
-    cancelled,
+    state,
     stationName,
   } = stop;
+  const cancelled = state === 'JOURNEY_CANCELLED' || state === 'STOP_CANCELLED';
   const { stations } = lineInfos;
   const isFirstStation = idx === 0;
   const isLastStation = idx === stations.length - 1;

yarn.lock

@@ -2312,7 +2312,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16.8.0 || 17.x.x":
+"@types/react@*":
   version "18.0.15"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
   integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
@@ -2321,6 +2321,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@>=16.8.0 || 17.x.x":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -2552,7 +2561,7 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@wojtekmaj/enzyme-adapter-react-17@^0.6.3":
+"@wojtekmaj/enzyme-adapter-react-17@0.6.7":
   version "0.6.7"
   resolved "https://registry.yarnpkg.com/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.6.7.tgz#7784bd32f518b186218cebb26c98c852676f30b0"
   integrity sha512-B+byiwi/T1bx5hcj9wc0fUL5Hlb5giSXJzcnEfJVl2j6dGV2NJfcxDBYX0WWwIxlzNiFz8kAvlkFWI2y/nscZQ==