Added fullsearch

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
+    "history": "^4.7.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
     "react-icons": "^3.2.2",

src/Components/App.js

@@ -5,6 +5,7 @@ import {
   Switch,
 } from 'react-router-dom';
 import Map from '../Routes/Map';
+import Search from '../Routes/Search';
 import Home from '../Routes/Home';
 import Vegetables from '../Routes/Vegetables';
 import Vegetable from '../Routes/Vegetable';
@@ -42,6 +43,11 @@ class App extends Component {
               path="/carte"
               render={(props) => <Map {...props} changeBackground={this.changeBackground} />}
             />
+            <Route
+              exact
+              path="/recherche/:query"
+              render={(props) => <Search {...props} changeBackground={this.changeBackground} />}
+            />
             <Route
               exact
               path="/vegetaux/:typeId-:typeSlug"

src/Components/Header.js

@@ -26,19 +26,25 @@ import {
 } from 'react-notifications';
 import Api from './Api';
 import strToSlug from '../StrToSlug';
+import { createBrowserHistory } from 'history';
 
 import '../css/Header.css';
 
+const history = createBrowserHistory();
+
 export default class Header extends React.Component {
   constructor(props) {
     super(props);
 
     this.toggle = this.toggle.bind(this);
     this.getVegetablesTypes = this.getVegetablesTypes.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
 
     this.state = {
       isOpen: false,
       types: [],
+      search: '',
     };
 
     this.getVegetablesTypes();
@@ -62,7 +68,22 @@ export default class Header extends React.Component {
       });
   }
 
+  handleChange(event) {
+    this.setState({ search: event.target.value });
+  }
+
+  handleSubmit(event) {
+    const {
+      search
+    } = this.state;
+    history.push(`/recherche/${search}`);
+  }
+
   render() {
+    const {
+      search,
+    } = this.state;
+
     return (
       <div>
         <NotificationContainer />
@@ -95,14 +116,21 @@ export default class Header extends React.Component {
                 </DropdownMenu>
               </UncontrolledDropdown>
               <NavItem>
-                <InputGroup>
+                <form onSubmit={this.handleSubmit}>
-                  <Input placeholder="rechercher..." type="text" />
+                  <InputGroup>
-                  <InputGroupAddon addonType="append">
+                    <Input
-                    <Button color="primary">
+                      placeholder="rechercher..."
-                      <FaSearch />
+                      type="text"
-                    </Button>
+                      value={search}
-                  </InputGroupAddon>
+                      onChange={this.handleChange}
-                </InputGroup>
+                    />
+                    <InputGroupAddon addonType="append">
+                      <Button color="primary">
+                        <FaSearch />
+                      </Button>
+                    </InputGroupAddon>
+                  </InputGroup>
+                </form>
               </NavItem>
             </Nav>
           </Collapse>

src/Components/Map.js

@@ -88,7 +88,7 @@ export default class Map extends React.Component {
 
   render() {
     return (
-      <Row className="with-margin ">
+      <Row className="with-margin">
         <Col className="with-border with-background">
           <div id="MapContainer">
             <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>

src/Components/Vegetables.js

@@ -26,7 +26,6 @@ export default class Map extends React.Component {
 
   render() {
     return (
-
       <div className="with-margin">
         <div className=" with-border with-background">
           <ListGroup className="vegetables--types--group">

src/Routes/Home.js

@@ -13,7 +13,8 @@ export default class RouterHome extends React.Component {
 
     return (
       <Container>
-        <Row>
+        <Row className="with-margin">
+          {/* <Row className="mainContainer"> */}
           <Col xs="12" className=" with-border with-background">
             <img src="/logo.png" className="logo float-left" alt="RodiVert" />
             <p>

src/Routes/Search.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Container,
+  Row,
+  Col,
+} from 'reactstrap';
+import {
+  NotificationContainer,
+  NotificationManager,
+} from 'react-notifications';
+import Api from '../Components/Api';
+import MapItem from '../Components/Map';
+import Vegetables from '../Components/Vegetables';
+
+export default class Search extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: props.match.params.query || null,
+      vegetables: [],
+      selectedType: {},
+      selectedVegetable: {},
+    };
+
+    this.getVegetables = this.getVegetables.bind(this);
+    this.selectVegetable = this.selectVegetable.bind(this);
+
+    this.getVegetables();
+    this.props.changeBackground('map');
+  }
+
+  getVegetables() {
+    const {
+      query,
+    } = this.state;
+
+    Api.get(`search/vegetables/?q=${query}`)
+      .then((res) => {
+        this.setState({
+          selectedType: {
+            Vegetables: res.data.rows,
+          },
+          vegetables: res.data.rows,
+        });
+      })
+      .catch(() => {
+        NotificationManager.error('Erreur lors de la récupération des catégories');
+      });
+  }
+
+  selectVegetable(vegetable) {
+    this.setState({
+      selectedVegetable: vegetable,
+    });
+  }
+
+  render() {
+    console.log('this.state.query:', this.state.query);
+    return (
+      <Container>
+        <NotificationContainer />
+        <Row>
+
+          <Col xs="12" sm="8">
+            <MapItem
+              selectedType={this.state.selectedType}
+              selectedVegetable={this.state.selectedVegetable}
+              selectVegetable={this.selectVegetable}
+            />
+          </Col>
+          <Col xs="12" sm="4">
+            <Row>
+              <Col xs="6" sm="12">
+                <Vegetables
+                  selectedType={this.state.selectedType}
+                  selectedVegetable={this.state.selectedVegetable}
+                  selectVegetable={this.selectVegetable}
+                />
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}

src/css/Home.css

@@ -1,3 +1,7 @@
 .logo {
   margin: 0 16px 16px 0;
 }
+
+.mainContainer {
+  margin: 16px 8px !important;
+}