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

90 lines
2.2 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,
id: res.data.rows.length > 0 ? res.data.rows[0].Type.id : null,
name: res.data.rows.length > 0 ? res.data.rows[0].Type.name : null,
},
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>
);
}
}