bo/src/Properties.js

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

    this.getProperties = this.getProperties.bind(this);
    this.addProperty = this.addProperty.bind(this);
    this.patchItem = this.patchItem.bind(this);
    this.deleteProperty = this.deleteProperty.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleArrayChange = this.handleArrayChange.bind(this);

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

    this.getProperties();
  }

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

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

  handleArrayChange(e) {
    const {
      id,
      value
    } = e.target;
    let {
      Properties
    } = this.state;

    const targetIndex = Properties.findIndex(datum => {
      return Number(datum.id) === Number(id);
    });

    if (targetIndex !== -1) {
      Properties[targetIndex].name = value;
      this.setState({
        Properties
      });
    }
  }

  getProperties() {
    API.get('properties')
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            Properties: res.data.rows
          });
        } else {
          this.setState({
            Properties: []
          });
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération des types de propriétés');
      });
  }

  addProperty(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    API.post('properties', {
        name: this.state.name,
      })
      .then((res) => {
        this.setState(prevState => ({
          Properties: [...prevState.Properties, res.data],
          name: ''
        }));
      })
      .catch(() => {
        NotificationManager.error('Impossile de créer ce type de propriété');
      });
  }

  patchItem(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.

    const {
      id,
      value
    } = event.target;

    API.patch(`properties/${id}`, {
        name: value,
      })
      .then((res) => {
        NotificationManager.success(`Propriété ${value} sauvegardée`);
      })
      .catch(() => {
        NotificationManager.error('Impossile de mettre à jour cette propriété');
      });
  }

  deleteProperty(property) {
    API.delete(`properties/${property.id}`)
      .then((res) => {
        this.setState({
          Properties: this.state.Properties.filter(item => item.id !== property.id),
        });
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la suppression de ce type de propriété');
      });
  }

  render() {
    return (
      <div>
        <NotificationContainer/>
        <Header />
        <Container>
          <Navigation root="Property" />
          <Table>
            <thead>
              <tr>
                <th>#</th>
                <th>Nom</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {this.state.Properties.map((item, key) => (
                <tr key={key}>
                  <th scope="row">{item.id}</th>
                  <td>
                    <Input
                      type="text"
                      value={item.name}
                      id={item.id}
                      placeholder="Nom de propriété"
                      onChange={this.handleArrayChange}
                      onBlur={this.patchItem}
                    />
                  </td>
                  <td>
                    {' '}
                    <Button color="danger" onClick={() => this.deleteProperty(item)}><FaTrashAlt /></Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
          <Form inline onSubmit={this.addProperty}>
            <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
              <Input
                type="text"
                name="name"
                value={this.state.name}
                placeholder="Nouveau type de propriété"
                onChange={this.handleChange}
              />
            </FormGroup>
            <Button color="primary">
              <FaPlus />
              {' '}
  Ajouter
            </Button>
          </Form>
        </Container>
      </div>
    );
  }
}

export default Properties;