Some changes

package.json

@@ -27,12 +27,5 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
+  ]
-  "devDependencies": {
-    "eslint": "^5.9.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1"
-  }
 }

src/Components/App.js

@@ -17,23 +17,13 @@ class App extends Component {
       background: 1
     }
 
-    this.changeBackground.bind = this.changeBackground();
+    this.changeBackground = this.changeBackground.bind(this);
   }
 
-  changeBackground = () => {
+  changeBackground(background) {
-    setInterval(() => {
+    document.body.style.background = `url('/background/${background}.jpg') no-repeat fixed`;
-      let currentBackground = this.state.background;
-      document.body.style.background = `url('/background/${currentBackground}.jpg') no-repeat fixed`;
     document.body.style.backgroundSize = 'cover';
     document.body.style.backgroundPosition = 'center center';
-
-      if (currentBackground === 4) {
-        currentBackground = 0
-      }
-      this.setState({
-        background: currentBackground + 1
-      })
-    }, 10000);
   }
 
   render() {
@@ -42,10 +32,26 @@ class App extends Component {
         <Header></Header>
         <Router>
           <Switch>
-            <Route exact path="/" component={Home} />
+            <Route
-            <Route exact path="/carte" component={Map} />
+              exact
-            <Route exact path="/vegetaux/:typeId-:typeSlug" component={Vegetables} />
+              path="/"
-            <Route exact path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug" component={Vegetable} />
+              render={(props) => <Home {...props} changeBackground={this.changeBackground} />}
+            />
+            <Route
+              exact
+              path="/carte"
+              render={(props) => <Map {...props} changeBackground={this.changeBackground} />}
+            />
+            <Route
+              exact
+              path="/vegetaux/:typeId-:typeSlug"
+              render={(props) => <Vegetables {...props} changeBackground={this.changeBackground} />}
+            />
+            <Route
+              exact
+              path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug"
+              render={(props) => <Vegetable {...props} changeBackground={this.changeBackground} />}
+            />
           </Switch>
         </Router>
       </div>

src/Components/Header.js

@@ -81,7 +81,7 @@ export default class Header extends React.Component {
                 <DropdownMenu right>
                   {
                     this.state.types.map((type, key) => (
-                      <DropdownItem key={key}>
+                      <DropdownItem as="div" key={key}>
 
                         <NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}>
                           <span className="text">{type.name}</span>

src/Routes/Home.js

@@ -9,6 +9,8 @@ import '../css/Home.css';
 
 export default class RouterHome extends React.Component {
   render() {
+    // this.props.changeBackground()
+
     return (
       <Container>
         <Row>

src/Routes/Vegetable.js

@@ -9,7 +9,8 @@ import {
   CarouselItem,
   CarouselControl,
   CarouselIndicators,
-  CarouselCaption
+  Breadcrumb,
+  BreadcrumbItem
 } from 'reactstrap';
 import {
   NotificationContainer,
@@ -17,6 +18,7 @@ import {
 } from 'react-notifications';
 import Api from '../Components/Api';
 import MapItem from '../Components/Map';
+import strToSlug from '../StrToSlug';
 
 export default class RouterVegetable extends React.Component {
   constructor(props) {
@@ -29,7 +31,13 @@ export default class RouterVegetable extends React.Component {
         name: '',
         Vegetables: []
       },
-      item: {},
+      item: {
+        name: null,
+        Type: {
+          id: null,
+          name: null
+        }
+      },
       activeIndex: 0
     };
 
@@ -96,8 +104,12 @@ export default class RouterVegetable extends React.Component {
         <Row>
           <Col xs="12">
             <Row className="with-margin">
-              <Col className=" with-border with-background">
+              <Col className="no-padding">
-                <h1>&raquo; {this.state.item.name}</h1>
+                <Breadcrumb>
+                  <BreadcrumbItem><a href={`/vegetaux/${this.state.item.Type.id}-${strToSlug(this.state.item.Type.name)}`}>{this.state.item.Type.name}</a></BreadcrumbItem>
+                  <BreadcrumbItem active>{this.state.item.name}</BreadcrumbItem>
+                </Breadcrumb>
+
               </Col>
             </Row>
           </Col>

src/StrToSlug.js

@@ -1,4 +1,7 @@
 export default (string) => {
+  if (!string) {
+    return ''
+  }
   let str = string;
   str = str.replace(/^\s+|\s+$/g, ''); // trim
   str = str.toLowerCase();

src/css/index.css

@@ -49,3 +49,12 @@ body {
   float:left;
   display:inline; */
 }
+
+.no-padding {
+  padding: 0;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}