diff --git a/frontend/src/components/steps/location/Location.js b/frontend/src/components/steps/location/Location.js index 20abaff..6f5dc30 100644 --- a/frontend/src/components/steps/location/Location.js +++ b/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 = (

Right Plant Right Place Plant Selector Tool for New Zealand.

@@ -13,7 +13,7 @@ export default function LocationStep() { ) const locationSelectionPanel = ( - + ) return ( diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js index 9de4b32..d9f9025 100644 --- a/frontend/src/components/steps/location/Map.js +++ b/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 (
@@ -39,7 +41,7 @@ export default function Map() { attribution='© OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> - +
diff --git a/frontend/src/pages/MainPage.js b/frontend/src/pages/MainPage.js index 93f2282..8d578ef 100644 --- a/frontend/src/pages/MainPage.js +++ b/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 (
- + ) }