2018-11-18 19:53:29 +01:00
|
|
|
import React from 'react';
|
|
|
|
import {
|
|
|
|
ListGroup,
|
2018-11-18 20:23:48 +01:00
|
|
|
ListGroupItem,
|
2018-11-18 19:53:29 +01:00
|
|
|
} from 'reactstrap';
|
|
|
|
import {
|
2018-11-18 20:23:48 +01:00
|
|
|
Link,
|
2018-11-18 19:53:29 +01:00
|
|
|
} from 'react-router-dom';
|
2018-11-18 20:23:48 +01:00
|
|
|
import strToSlug from '../StrToSlug';
|
2018-11-18 19:53:29 +01:00
|
|
|
|
2018-11-18 20:23:48 +01:00
|
|
|
import '../css/Vegetables.css';
|
2018-11-18 19:53:29 +01:00
|
|
|
|
|
|
|
export default class Map extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
selectedType: this.props.selectedType,
|
2018-11-18 20:23:48 +01:00
|
|
|
selectedVegetable: this.props.selectVegetable,
|
|
|
|
};
|
2018-11-18 19:53:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
this.setState(newProps);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="with-margin">
|
|
|
|
<div className=" with-border with-background">
|
2018-11-18 20:23:48 +01:00
|
|
|
<ListGroup className="vegetables--types--group">
|
2018-11-18 19:53:29 +01:00
|
|
|
{
|
2018-11-18 20:23:48 +01:00
|
|
|
this.state.selectedType
|
|
|
|
&& this.state.selectedType.Vegetables
|
|
|
|
&& this.state.selectedType.Vegetables.map((vegetable, key) => (
|
|
|
|
<ListGroupItem
|
|
|
|
key={key}
|
|
|
|
className={this.state.selectedVegetable.id === vegetable.id ? 'selected' : 'null'}
|
|
|
|
onMouseOver={e => this.props.selectVegetable(vegetable)}
|
|
|
|
>
|
|
|
|
<Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}>
|
|
|
|
{vegetable.name}
|
|
|
|
</Link>
|
2018-11-18 19:53:29 +01:00
|
|
|
|
2018-11-18 20:23:48 +01:00
|
|
|
</ListGroupItem>
|
|
|
|
))
|
2018-11-18 19:53:29 +01:00
|
|
|
}
|
|
|
|
</ListGroup>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2018-11-18 20:23:48 +01:00
|
|
|
}
|