Update filter state with clicked coordinates.

This commit is contained in:
Dana Lambert 2021-10-19 08:48:45 +13:00
parent 05665b545b
commit 5bef4efe36
3 changed files with 18 additions and 9 deletions

View file

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

View file

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

View file

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