bo/src/Categories.js

import React, {
  Component
} from 'react';
import {
  Container,
  Table,
  Form,
  FormGroup,
  Button,
  Input,
} from 'reactstrap';
import {
  FaTrashAlt,
  FaPlus
} from 'react-icons/fa';
import {
  Link
} from 'react-router-dom';
import {
  NotificationContainer,
  NotificationManager
} from 'react-notifications';
import Navigation from './Navigation';
import Header from './Header';
import API from './Api';

import 'react-notifications/lib/notifications.css';

class Categories extends Component {
  constructor(props) {
    super(props);

    this.getCategories = this.getCategories.bind(this);
    this.addCategory = this.addCategory.bind(this);
    this.deleteCategory = this.deleteCategory.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      Categories: [],
      name: '',
    };

    this.getCategories();
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  }

  getCategories() {
    API.get('types')
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            Categories: res.data.rows
          });
        } else {
          this.setState({
            Categories: []
          });
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération des catégories');
      });
  }

  addCategory(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    API.post('types', {
        name: this.state.name,
      })
      .then((res) => {
        this.setState(prevState => ({
          Categories: [...prevState.Categories, res.data],
          name: ''
        }));
      })
      .catch(() => {
        NotificationManager.error('Impossile de créer cette catégorie');
      });
  }

  deleteCategory(category) {
    API.delete(`types/${category.id}`)
      .then((res) => {
        this.setState({
          Categories: this.state.Categories.filter(item => item.id !== category.id),
        });
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la suppression de cette catégorie');
      });
  }

  render() {
    return (
      <div>
        <NotificationContainer/>
        <Header />
        <Container>
          <Navigation />
          <Table>
            <thead>
              <tr>
                <th>#</th>
                <th>Nom</th>
                <th>Nom d&#39;éléments</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {this.state.Categories.map((item, key) => (
                <tr key={key}>
                  <th scope="row"><Link to={`/categories/${item.id}`}>{item.id}</Link></th>
                  <td>{item.name}</td>
                  <td>{item.Vegetables !== undefined ? item.Vegetables.length : 0 }</td>
                  <td>
                    {' '}
                    <Button color="danger" onClick={() => this.deleteCategory(item)}><FaTrashAlt /></Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
          <Form inline onSubmit={this.addCategory}>
            <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
              <Input
                type="text"
                name="name"
                value={this.state.name}
                placeholder="Nouvelle catégorie"
                onChange={this.handleChange}
              />
            </FormGroup>
            <Button color="primary">
              <FaPlus />
              {' '}
  Ajouter
            </Button>
          </Form>
        </Container>
      </div>
    );
  }
}

export default Categories;