Place previously chosen location on map when going back

frontend/src/components/steps/location/Map.js

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
 
 const NZ_BOUNDS = [
   [-47.204642, 165.344238],
@@ -9,13 +9,22 @@ const NZ_BOUNDS = [
 
 function LocationMarker(props) {
   const [position, setPosition] = useState(null)
-  useMapEvents({
+  const map = useMapEvents({
     click(e) {
       const newPosition = e.latlng;
       setPosition(newPosition);
-      props.updateFilterState({"latitude": newPosition.lat, "longitude": newPosition.lng});
+      props.updateFilterState({"coordinates": newPosition});
       props.setNextDisabled(false);
-    },
+    }
+  })
+
+  map.whenReady(() => {
+    const savedCoordinates = props.filters["coordinates"];
+    if (!position && savedCoordinates) {
+      setPosition(savedCoordinates);
+      props.setNextDisabled(false);
+      map.flyTo(savedCoordinates, 9)
+    }
   })
 
   return position === null ? null : (
@@ -28,22 +37,19 @@ function LocationMarker(props) {
   )
 }
 
-function FitNewZealandBounds() {
-  const map = useMap()
-  map.fitBounds(NZ_BOUNDS)
-  return null
+const fitNZBounds = (map) => {
+  map.fitBounds(NZ_BOUNDS);
 }
 
 export default function Map(props) {
   return (
     <div className="map-container">
-      <MapContainer scrollWheelZoom={true}>
+      <MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <LocationMarker {...props} />
-        <FitNewZealandBounds />
       </MapContainer>
     </div>
   )

frontend/src/pages/MainPage.js

@@ -40,7 +40,7 @@ export default class MainPage extends React.Component {
         return (
             <Container fluid className='main-container p-0'>
                 <Header/>
-                <Stepper plants={this.state.plants} updateFilterState={this.updateFilterState} />
+                <Stepper plants={this.state.plants} filters={this.state.filters} updateFilterState={this.updateFilterState} />
             </Container>
         )
     }