front/src/Routes/Search.js
2019-03-16 22:10:41 +01:00

88 lines
2.0 KiB
JavaScript

import React from 'react';
import {
Container,
Row,
Col,
} from 'reactstrap';
import {
NotificationContainer,
NotificationManager,
} from 'react-notifications';
import Api from '../Components/Api';
import MapItem from '../Components/Map';
import Vegetables from '../Components/Vegetables';
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
query: props.match.params.query || null,
vegetables: [],
selectedType: {},
selectedVegetable: {},
};
this.getVegetables = this.getVegetables.bind(this);
this.selectVegetable = this.selectVegetable.bind(this);
this.getVegetables();
this.props.changeBackground('map');
}
getVegetables() {
const {
query,
} = this.state;
Api.get(`search/vegetables/?q=${query}`)
.then((res) => {
this.setState({
selectedType: {
Vegetables: res.data.rows,
},
vegetables: res.data.rows,
});
})
.catch(() => {
NotificationManager.error('Erreur lors de la récupération des catégories');
});
}
selectVegetable(vegetable) {
this.setState({
selectedVegetable: vegetable,
});
}
render() {
console.log('this.state.query:', this.state.query);
return (
<Container>
<NotificationContainer />
<Row>
<Col xs="12" sm="8">
<MapItem
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
<Col xs="12" sm="4">
<Row>
<Col xs="6" sm="12">
<Vegetables
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
</Row>
</Col>
</Row>
</Container>
);
}
}