bo/src/Category.js

import React, {
  Component
} from 'react';
import {
  Container,
  Table,
  Form,
  FormGroup,
  Button,
  Input,
} from 'reactstrap';
import {
  FaTrashAlt,
  FaPlus,
  FaEdit
} 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 Category extends Component {
  constructor(props) {
    super(props);

    this.updateCategory = this.updateCategory.bind(this);
    this.getVegetables = this.getVegetables.bind(this);
    this.deleteVegetable = this.deleteVegetable.bind(this);
    this.addVegetable = this.addVegetable.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      Category: {},
      name: '',
      categoryId: props.match.params.categoryId,
      categoryName: '',
    };

    this.getVegetables(props.match.params.categoryId);
  }

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

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


  updateCategory(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    API.patch(`types/${this.state.Category.id}`, {
        name: this.state.categoryName,
      })
      .then((res) => {
        this.setState({
          Category: res.data
        });
      })
      .catch(() => {
        NotificationManager.error('Impossile de mettre à jour cette catégorie');
      });
  }

  getVegetables(categoryId) {
    API.get(`types/${categoryId}`)
      .then((res) => {
        if (res.status === 200) {
          if (res.data.Vegetables === undefined) {
            res.data.Vegetables = [];
          }

          this.setState({
            Category: res.data,
            categoryName: res.data.name
          });
        } else {
          this.setState({
            Category: {}
          });
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération des catégories');
      });
  }

  addVegetable(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    API.post(`types/${this.state.Category.id}/vegetables/`, {
        name: this.state.name,
        lat: 0,
        lng: 0,
        description: '',
      })
      .then((res) => {
        const Category = this.state.Category;
        Category.Vegetables.push(res.data);

        this.setState({
          Category
        });
      })
      .catch(() => {
        NotificationManager.error('Impossile de créer cette catégorie');
      });
  }

  deleteVegetable(vegetable, key) {
    API.delete(`types/${this.state.Category.id}/vegetables/${vegetable.id}`)
      .then((res) => {
        const Category = this.state.Category;

        Category.Vegetables.splice(key, 1);

        this.setState({
          Category
        });
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la suppression de ce végétal');
      });
  }

  render() {
    return (
      <div>
        <NotificationContainer/>
        <Header />
        <Container>
          <Navigation categoryId={this.state.categoryId} categoryName={this.state.Category.name} />
          <Form inline onSubmit={this.updateCategory} style={{ marginBottom: '16px' }}>
            <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
              <Input
                type="text"
                name="categoryName"
                value={this.state.categoryName}
                placeholder="Changez le nom de la catégorie"
                onChange={this.handleChange}
              />
            </FormGroup>
            <Button color="primary">
              <FaEdit />
              {' '}
  Mettre à jour
            </Button>
          </Form>
          <Table>
            <thead>
              <tr>
                <th>#</th>
                <th>Nom</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {this.state.Category.Vegetables && this.state.Category.Vegetables.map((item, key) => (
                <tr key={key}>
                  <th scope="row"><Link to={`/categories/${this.state.Category.id}/vegetables/${item.id}`}>{item.id}</Link></th>
                  <td>{item.name}</td>
                  <td>
                    {' '}
                    <Button color="danger" onClick={() => this.deleteVegetable(item, key)}><FaTrashAlt /></Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
          <Form inline onSubmit={this.addVegetable}>
            <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
              <Input
                type="text"
                name="name"
                placeholder="Nouveau végétal"
                onChange={this.handleChange}
              />
            </FormGroup>
            <Button color="primary">
              <FaPlus />
              {' '}
  Ajouter
            </Button>
          </Form>
        </Container>
      </div>
    );
  }
}

export default Category;