front/src/Components/Header.js

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  InputGroup,
  InputGroupAddon,
  Input,
  Button,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Badge,
} from 'reactstrap';
import {
  FaSearch,
} from 'react-icons/fa';
import {
  NotificationContainer,
  NotificationManager,
} from 'react-notifications';
import { createBrowserHistory } from 'history';
import Api from './Api';
import strToSlug from '../StrToSlug';

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();
  }

  getVegetablesTypes() {
    Api.get('types')
      .then((res) => {
        this.setState({
          types: res.data.rows,
        });
      })
      .catch(() => {
        NotificationManager.error('Erreur lors de la récupération des catégories');
      });
  }

  toggle() {
    const {
      isOpen,
    } = this.state;

    this.setState({
      isOpen: !isOpen,
    });
  }

  handleChange(event) {
    this.setState({ search: event.target.value });
  }

  handleSubmit() {
    const {
      search,
    } = this.state;

    history.push(`/recherche/${search}`);
  }

  render() {
    const {
      search,
      isOpen,
      types,
    } = this.state;

    return (
      <div>
        <NotificationContainer />
        <Navbar color="light" light fixed="top" expand="md">
          <NavbarBrand href="/"><img src="/logo.png" alt="RodiVert" /></NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/carte">Carte</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Les végétaux
                </DropdownToggle>
                <DropdownMenu right>
                  {
                    types.map(type => (
                      <DropdownItem as="div" key={type.id}>
                        <NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}>
                          <span className="text">{type.name}</span>
                          {' '}
                          <Badge pill>{type.Vegetables.length}</Badge>
                        </NavLink>

                      </DropdownItem>
                    ))
                  }
                </DropdownMenu>
              </UncontrolledDropdown>
              <NavItem>
                <form onSubmit={this.handleSubmit}>
                  <InputGroup>
                    <Input
                      placeholder="rechercher..."
                      type="text"
                      value={search}
                      onChange={this.handleChange}
                    />
                    <InputGroupAddon addonType="append">
                      <Button color="primary">
                        <FaSearch />
                      </Button>
                    </InputGroupAddon>
                  </InputGroup>
                </form>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}