77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import AddPlant from './AddPlant'
|
|
import Plants from './Plants'
|
|
import { Container, Row, Col} from 'react-bootstrap';
|
|
|
|
class Settings extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props);
|
|
this.state = {
|
|
plants: [],
|
|
types: ['Chile', 'Mint'], // hardcoded for now
|
|
}
|
|
}
|
|
|
|
// pass this function to the addplant comp as a prop
|
|
addPlant = (plant) => {
|
|
plant.id = this.state.plants.length + 1 // TODO rework
|
|
console.log(plant.id)
|
|
let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it
|
|
|
|
this.setState({
|
|
plants: plants
|
|
})
|
|
}
|
|
|
|
deletePlant = (id) => {
|
|
let plants = this.state.plants.filter(plant =>{ // callback function
|
|
return plant.id !== id // when it returns false (the id is the same), it filters this object out of the array
|
|
})
|
|
this.setState({
|
|
plants: plants
|
|
})
|
|
}
|
|
|
|
render(){
|
|
return (
|
|
<>
|
|
<Container>
|
|
<Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<h1>Settings</h1>
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<a>Configurate your plant here. Based on your settings the smart garden will automate your plant environment.</a>
|
|
</Row>
|
|
|
|
<br></br>
|
|
|
|
<AddPlant
|
|
addPlant={this.addPlant}
|
|
typeArray={this.state.types}
|
|
></AddPlant>
|
|
|
|
|
|
<Row className="justify-content-md-center">
|
|
<Col md={{ span: 4, offset: 4 }}></Col>
|
|
</Row>
|
|
|
|
<br></br>
|
|
|
|
<Plants
|
|
plants={this.state.plants}
|
|
deletePlant={this.deletePlant}
|
|
></Plants>
|
|
|
|
</Container>
|
|
|
|
</>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default Settings;
|