Add basic plant repository and demo page with plant list
This commit is contained in:
parent
9b17536102
commit
80d5b181d9
3 changed files with 59 additions and 5 deletions
|
@ -1,12 +1,9 @@
|
|||
import { Container } from 'reactstrap';
|
||||
import SamplePage from './pages/SamplePage';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Container className="p-2">
|
||||
<h1>Right Tree</h1>
|
||||
<h4>Right Plant Right Place Right Time</h4>
|
||||
</Container>
|
||||
<SamplePage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
46
frontend/src/pages/SamplePage.js
Normal file
46
frontend/src/pages/SamplePage.js
Normal file
|
@ -0,0 +1,46 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
11
frontend/src/repository/PlantRepository.js
Normal file
11
frontend/src/repository/PlantRepository.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
import Repository from "./Repository";
|
||||
|
||||
const PlantRepsostory = {
|
||||
|
||||
getPlants() {
|
||||
return Repository.get(`/plants/`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default PlantRepsostory;
|
Loading…
Reference in a new issue