feat: Update react-leaflet to 4.1.0

In anticipation of the v18 update of the react package.

The addition of a specific configuration is required with
webpack v4 since version 3 of react-leaflet.
See: PaulLeCam/react-leaflet#883

app.config.babel-loader-leaflet.js

@@ -0,0 +1,20 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: [
+          {
+            test: /(node_modules|cozy-(bar|client-js))/,
+            exclude: [
+              /node_modules\/leaflet/,
+              /node_modules\/@react-leaflet/,
+              /node_modules\/react-leaflet/
+            ]
+          }
+        ],
+        loader: require.resolve('cozy-scripts/node_modules/babel-loader')
+      }
+    ]
+  }
+}

app.config.js

@@ -0,0 +1,6 @@
+const config = [
+  require('cozy-scripts/config/webpack.bundle.default.js'),
+  require('./app.config.babel-loader-leaflet')
+]
+
+module.exports = config

package.json

@@ -68,7 +68,7 @@
     "react": "17.0.2",
     "react-chartjs-2": "4.0.1",
     "react-dom": "17.0.2",
-    "react-leaflet": "2.8.0",
+    "react-leaflet": "4.1.0",
     "react-router-dom": "6.3.0"
   }
 }

src/components/Trip/TripMap.jsx

@@ -1,24 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Map } from 'react-leaflet'
+import React from 'react'
+import { MapContainer } from 'react-leaflet'
 import 'leaflet/dist/leaflet.css'
 
 import TripMapContent from './TripMapContent'
 
 const mapCenter = [51.505, -0.09]
 
 const TripMap = () => {
-  const mapRef = useRef()
-  const [mapL, setMapL] = useState(null)
-
-  // needed to force a rerender, to be able to get Map children ref
-  useEffect(() => {
-    setMapL(mapRef.current.leafletElement)
-  }, [])
-
   return (
-    <Map className="u-h-100" ref={mapRef} center={mapCenter} zoom={13}>
-      <TripMapContent mapL={mapL} />
-    </Map>
+    <MapContainer className="u-h-100" center={mapCenter} zoom={13}>
+      <TripMapContent />
+    </MapContainer>
   )
 }
 

src/components/Trip/TripMapContent.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useMemo } from 'react'
-import { TileLayer, GeoJSON } from 'react-leaflet'
+import { TileLayer, GeoJSON, useMap } from 'react-leaflet'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 
@@ -36,11 +36,12 @@ const makeGeoJsonOptions = theme => ({
   }
 })
 
-const TripMapContent = ({ mapL }) => {
+const TripMapContent = () => {
   const geojsonRef = useRef()
   const { isMobile } = useBreakpoints()
   const theme = useTheme()
   const { timeserie } = useTrip()
+  const map = useMap()
 
   const { pointToLayer, style } = useMemo(
     () => makeGeoJsonOptions(theme),
@@ -53,20 +54,17 @@ const TripMapContent = ({ mapL }) => {
   )
 
   useEffect(() => {
-    if (geojsonRef.current) {
-      const geojsonL = geojsonRef.current.leafletElement
-      const bounds = geojsonL.getBounds()
-      const paddingTopLeft = [mapPadding, mapPadding]
-      const paddingBottomRight = [
-        mapPadding,
-        mapPadding + mapL.getSize().y * mapPanRatio
-      ]
-      mapL.fitBounds(bounds, {
-        paddingTopLeft,
-        paddingBottomRight
-      })
-    }
-  }, [mapL, mapPanRatio])
+    const bounds = geojsonRef.current.getBounds()
+    const paddingTopLeft = [mapPadding, mapPadding]
+    const paddingBottomRight = [
+      mapPadding,
+      mapPadding + map.getSize().y * mapPanRatio
+    ]
+    map.fitBounds(bounds, {
+      paddingTopLeft,
+      paddingBottomRight
+    })
+  }, [map, mapPanRatio])
 
   return (
     <>

yarn.lock

@@ -1517,7 +1517,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
   integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
@@ -2277,6 +2277,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
   integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
 
+"@react-leaflet/core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+  integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
 "@react-spring/animated@9.0.0-rc.3":
   version "9.0.0-rc.3"
   resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5"
@@ -10469,9 +10474,9 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-"mui-bottom-sheet@git+https://github.com/cozy/mui-bottom-sheet.git#v1.0.9":
+"mui-bottom-sheet@https://github.com/cozy/mui-bottom-sheet.git#v1.0.9":
   version "1.0.8"
-  resolved "git+https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c"
+  resolved "https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c"
   dependencies:
     "@juggle/resize-observer" "^3.1.3"
     jest-environment-jsdom-sixteen "^1.0.3"
@@ -12239,15 +12244,12 @@ react-layout-effect@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-layout-effect/-/react-layout-effect-1.0.5.tgz#0dc4e24452aee5de66c93c166f0ec512dfb1be80"
   integrity sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA==
 
-react-leaflet@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.8.0.tgz#14bfc77b6ae8263d3a62e0ba7a39539c05973c6f"
-  integrity sha512-Y7oHtNrrlRH8muDttXf+jZ2Ga/X7jneSGi1GN8uEdeCfLProTqgG2Zoa5TfloS3ZnY20v7w+DIenMG59beFsQw==
+react-leaflet@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.1.0.tgz#b53bce23af3bd932c189d7a80bcc7102db85edee"
+  integrity sha512-i+V9pX5lywJ48O2+K3USeeTdYLIhxnLMweH+YLd/UPqVIj3uKzE3Q29bzt83PBtViyZmxDlulzC6uoR3JLiE9A==
   dependencies:
-    "@babel/runtime" "^7.12.1"
-    fast-deep-equal "^3.1.3"
-    hoist-non-react-statics "^3.3.2"
-    warning "^4.0.3"
+    "@react-leaflet/core" "^2.1.0"
 
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"