56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
ListGroup,
|
||
|
|
ListGroupItem
|
||
|
|
} from 'reactstrap';
|
||
|
|
import {
|
||
|
|
Link
|
||
|
|
} from 'react-router-dom';
|
||
|
|
import strToSlug from '../StrToSlug'
|
||
|
|
|
||
|
|
import '../css/Vegetables.css'
|
||
|
|
|
||
|
|
export default class Map extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
selectedType: this.props.selectedType,
|
||
|
|
selectedVegetable: this.props.selectVegetable
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(newProps) {
|
||
|
|
this.setState(newProps);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
|
||
|
|
<div className="with-margin">
|
||
|
|
<div className=" with-border with-background">
|
||
|
|
<ListGroup className='vegetables--types--group'>
|
||
|
|
{
|
||
|
|
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>
|
||
|
|
|
||
|
|
</ListGroupItem>
|
||
|
|
)
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</ListGroup>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|