import React from 'react'
import { Container, ListGroup, ListGroupItem } from 'reactstrap';

import PlantRepsostory from '../repository/PlantRepository'

export default class SamplePage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            plants: []
        }
    }

    updatePlants() {
        PlantRepsostory.getPlants().then(response => {
            if (response.status === 200) {
                this.setState({ plants: response.data });
            }
        }).catch(e => {
            this.setState({ plants: ["No plants found."] });
        })
    }

    componentDidMount() {
        this.updatePlants()
    }

    render() {
        return (
            <Container className="p-2">
                <h1>Right Tree</h1>
                <h4>Right Plant Right Place Right Time</h4>

                <h5 className="pt-4">Plant List</h5>
                <ListGroup>
                    {this.state.plants.map(function (plant, i) {
                        return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
                    })}
                </ListGroup>
            </Container>
        )
    }

}