bo/src/Category.js

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

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(() => {
        alert('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) => {
        alert('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,
    })
      .then((res) => {
        const Category = this.state.Category;
        Category.Vegetables.push(res.data);

        this.setState({ Category });
      })
      .catch(() => {
        alert('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) => {
        alert('Erreur lors de la suppression de ce végétal');
      });
  }

  render() {
    return (
      <Container>
        <Header 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">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>
            ))}
            <tr>
              <td colSpan="3">
                <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">Ajouter</Button>
                </Form>
              </td>
            </tr>
          </tbody>
        </Table>
      </Container>
    );
  }
}

export default Category;