First template for vegetable page

src/Components/App.js

@@ -7,6 +7,7 @@ import {
 import Map from '../Routes/Map';
 import Home from '../Routes/Home';
 import Vegetables from '../Routes/Vegetables';
+import Vegetable from '../Routes/Vegetable';
 
 class App extends Component {
   constructor(props) {
@@ -44,6 +45,7 @@ class App extends Component {
             <Route exact path="/" component={Home} />
             <Route exact path="/carte" component={Map} />
             <Route exact path="/vegetaux/:typeId-:typeSlug" component={Vegetables} />
+            <Route exact path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug" component={Vegetable} />
           </Switch>
         </Router>
       </div>

src/Routes/Vegetable.js

@@ -0,0 +1,170 @@
+import React from 'react';
+import {
+  Container,
+  Row,
+  Col,
+  ListGroup,
+  ListGroupItem,
+  Carousel,
+  CarouselItem,
+  CarouselControl,
+  CarouselIndicators,
+  CarouselCaption
+} from 'reactstrap';
+import {
+  NotificationContainer,
+  NotificationManager,
+} from 'react-notifications';
+import Api from '../Components/Api';
+import MapItem from '../Components/Map';
+
+export default class RouterVegetable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      typeId: props.match.params.typeId,
+      vegetableId: props.match.params.vegetableId,
+      selectedType: {
+        name: '',
+        Vegetables: []
+      },
+      item: {},
+      activeIndex: 0
+    };
+
+    this.getItem = this.getItem.bind(this);
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+    this.goToIndex = this.goToIndex.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+    this.onExited = this.onExited.bind(this);
+
+    this.getItem();
+  }
+
+  onExiting() {
+    this.animating = true;
+  }
+
+  onExited() {
+    this.animating = false;
+  }
+
+  next() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === this.state.item.Pictures.length - 1 ? 0 : this.state.activeIndex + 1;
+    this.setState({ activeIndex: nextIndex });
+  }
+
+  previous() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === 0 ? this.state.item.Pictures.length - 1 : this.state.activeIndex - 1;
+    this.setState({ activeIndex: nextIndex });
+  }
+
+  goToIndex(newIndex) {
+    if (this.animating) return;
+    this.setState({ activeIndex: newIndex });
+  }
+
+  getItem() {
+    Api.get(`/types/${this.state.typeId}/vegetables/${this.state.vegetableId}`)
+      .then((res) => {
+        this.setState({
+          selectedType: {
+            id: res.data.Type.id,
+            name: res.data.Type.name,
+            Vegetables: [
+              res.data
+            ]
+          },
+          item: res.data,
+        });
+      })
+      .catch(() => {
+        NotificationManager.error('Erreur lors de la récupération du végétal');
+      });
+  }
+
+  render() {
+    const { activeIndex } = this.state;
+
+    return (
+      <Container>
+        <NotificationContainer />
+        <Row>
+          <Col xs="12">
+            <Row className="with-margin">
+              <Col className=" with-border with-background">
+                <h1>&raquo; {this.state.item.name}</h1>
+              </Col>
+            </Row>
+          </Col>
+          <Col xs="12">
+            <MapItem
+              selectedType={this.state.selectedType}
+              selectedVegetable={this.state.item}
+              selectVegetable={() => { }}
+            />
+          </Col>
+          <Col xs="12">
+            <Row className="with-margin">
+              <Col className=" with-border with-background">
+                <ListGroup className="double">
+                  {this.state.item &&
+                    this.state.item.Properties &&
+                    this.state.item.Properties.map((item, key) => {
+                      return (
+                        item.Property !== null &&
+                          item.Property !== undefined ?
+                          (
+                            <ListGroupItem key={key}>
+                              <strong>{item.Property.name}</strong> : {item.value}
+                            </ListGroupItem>
+                          )
+                          :
+                          (null)
+                      )
+                    })}
+                </ListGroup>
+              </Col>
+            </Row>
+          </Col>
+          <Col xs="12">
+            <Row className="with-margin">
+              <Col className="with-border with-background">
+                {this.state.item &&
+                  this.state.item.Pictures ?
+                  (
+                    <Carousel
+                      activeIndex={activeIndex}
+                      next={this.next}
+                      previous={this.previous}
+                    >
+                      <CarouselIndicators items={this.state.item.Pictures} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+                      {this.state.item &&
+                        this.state.item.Pictures &&
+                        this.state.item.Pictures.map((picture) => (
+                          <CarouselItem
+                            onExiting={this.onExiting}
+                            onExited={this.onExited}
+                            key={picture.url}
+                          >
+                            <img src={picture.url} alt={picture.url} />
+                          </CarouselItem>
+                        ))}
+                      <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+                      <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+                    </Carousel>
+                  ) : (null)
+                }
+
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Container >
+    );
+  }
+}

src/css/index.css

@@ -36,3 +36,16 @@ body {
 .container {
   margin-top: 116px;
 }
+
+
+.double {
+  display: inherit;
+  columns: 2;
+  -webkit-columns: 2;
+  -moz-columns: 2;
+}
+.double li {
+  /* width:50%;
+  float:left;
+  display:inline; */
+}