Client - fix map bounds display since MapContainer props are immutable

(linked to react-leaflet update to v3.0+)

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx

@@ -1,10 +1,9 @@
-import hash from 'object-hash'
 import React from 'react'
-import { GeoJSON, MapContainer, Marker, TileLayer } from 'react-leaflet'
+import { MapContainer } from 'react-leaflet'
 import { connect } from 'react-redux'
 
+import Map from './Map'
 import { getActivityGpx, getSegmentGpx } from '../../../actions/activities'
-import { apiUrl } from '../../../utils'
 import { getGeoJson } from '../../../utils/activities'
 
 class ActivityMap extends React.Component {
@@ -59,21 +58,12 @@ class ActivityMap extends React.Component {
             bounds={bounds}
             boundsOptions={{ padding: [10, 10] }}
           >
-            <TileLayer
-              // eslint-disable-next-line max-len
-              attribution={mapAttribution}
-              url={`${apiUrl}activities/map_tile/{s}/{z}/{x}/{y}.png`}
+            <Map
+              bounds={bounds}
+              coordinates={coordinates}
+              jsonData={jsonData}
+              mapAttribution={mapAttribution}
             />
-            <GeoJSON
-              // hash as a key to force re-rendering
-              key={hash(jsonData)}
-              data={jsonData}
-            />
-            {coordinates.latitude && (
-              <Marker
-                position={[coordinates.latitude, coordinates.longitude]}
-              />
-            )}
           </MapContainer>
         )}
       </div>

fittrackee_client/src/components/Activity/ActivityDisplay/Map.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { GeoJSON, Marker, TileLayer, useMap } from 'react-leaflet'
+import hash from 'object-hash'
+
+import { apiUrl } from '../../../utils'
+
+export default function Map({ bounds, coordinates, jsonData, mapAttribution }) {
+  const map = useMap()
+  map.fitBounds(bounds)
+  return (
+    <>
+      <TileLayer
+        // eslint-disable-next-line max-len
+        attribution={mapAttribution}
+        url={`${apiUrl}activities/map_tile/{s}/{z}/{x}/{y}.png`}
+      />
+      <GeoJSON
+        // hash as a key to force re-rendering
+        key={hash(jsonData)}
+        data={jsonData}
+      />
+      {coordinates.latitude && (
+        <Marker position={[coordinates.latitude, coordinates.longitude]} />
+      )}
+    </>
+  )
+}