Update filter state with clicked coordinates.

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

@@ -1,7 +1,7 @@
 import Step from '../Step';
-import LocationSelectorMap from './Map';
+import LocationSelectorMap from './Map' 
 
-export default function LocationStep() {
+export default function LocationStep(props) {
     const locationInfoPanel = (
         <div className='py-5'>
             <h4>Right Plant Right Place Plant Selector Tool for New Zealand.</h4>
@@ -13,7 +13,7 @@ export default function LocationStep() {
     )
 
     const locationSelectionPanel = (
-        <LocationSelectorMap />
+        <LocationSelectorMap updateFilterState={props.updateFilterState} />
     )
 
     return (

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

@@ -7,11 +7,13 @@ const NZ_BOUNDS = [
   [-34.307144, 179.824219]
 ]
 
-function LocationMarker() {
+function LocationMarker(props) {
   const [position, setPosition] = useState(null)
   useMapEvents({
     click(e) {
-      setPosition(e.latlng)
+      const newPosition = e.latlng;
+      setPosition(newPosition);
+      props.updateCoordinateFilter({"latitude": newPosition.lat, "longitude": newPosition.lng});
     },
   })
 
@@ -31,7 +33,7 @@ function FitNewZealandBounds() {
   return null
 }
 
-export default function Map() {
+export default function Map(props) {
   return (
     <div className="map-container">
       <MapContainer scrollWheelZoom={true}>
@@ -39,7 +41,7 @@ export default function Map() {
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        <LocationMarker />
+        <LocationMarker updateCoordinateFilter={props.updateFilterState} />
         <FitNewZealandBounds />
       </MapContainer>
     </div>

frontend/src/pages/MainPage.js

@@ -11,8 +11,11 @@ export default class MainPage extends React.Component {
         super(props);
 
         this.state = {
-            plants: []
+            plants: [],
+            filters: {}
         }
+
+        this.updateFilterState = this.updateFilterState.bind(this);
     }
 
     updatePlants() {
@@ -25,6 +28,10 @@ export default class MainPage extends React.Component {
         })
     }
 
+    updateFilterState(newFilter) {
+        this.setState({ filters: { ...this.state.filters, ...newFilter } })
+    }
+
     componentDidMount() {
         this.updatePlants()
     }
@@ -33,7 +40,7 @@ export default class MainPage extends React.Component {
         return (
             <Container fluid className='main-container p-0'>
                 <Header/>
-                <Stepper plants={this.state.plants} />
+                <Stepper plants={this.state.plants} updateFilterState={this.updateFilterState} />
             </Container>
         )
     }