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);
|
|
|
|
}
|
|
|
|
|
2019-03-16 22:20:25 +01:00
|
|
|
createLink(vegetable) {
|
|
|
|
let url = '/vegetaux/';
|
|
|
|
if (vegetable.Type) {
|
|
|
|
url += `${vegetable.Type.id}-${strToSlug(vegetable.Type.name)}`;
|
|
|
|
} else {
|
|
|
|
url += `${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}`;
|
|
|
|
}
|
|
|
|
url += `/${vegetable.id}-${strToSlug(vegetable.name)}`;
|
|
|
|
|
|
|
|
return url;
|
|
|
|
}
|
|
|
|
|
2018-11-18 19:53:29 +01:00
|
|
|
render() {
|
2019-04-09 20:00:47 +02:00
|
|
|
const {
|
|
|
|
double,
|
|
|
|
simple,
|
|
|
|
} = this.props;
|
|
|
|
|
2018-11-18 19:53:29 +01:00
|
|
|
return (
|
|
|
|
<div className="with-margin">
|
|
|
|
<div className=" with-border with-background">
|
2019-04-09 20:00:47 +02:00
|
|
|
<ListGroup className={`vegetables--types--group ${simple ? '' : double ? 'double' : 'triple'}`}>
|
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)}
|
|
|
|
>
|
2019-03-16 22:20:25 +01:00
|
|
|
<Link to={this.createLink(vegetable)}>
|
2018-11-18 20:23:48 +01:00
|
|
|
{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
|
|
|
}
|