bo/src/Vegetable.js

import React, { Component } from 'react';
import {
  Container,
  Row,
  Col,
  Form,
  FormGroup,
  Button,
  Label,
  Input,
} from 'reactstrap';
import { FaEdit, FaMapMarkerAlt } from 'react-icons/fa';
import Header from './Header';
import API from './Api';

import './Vegetable.css';

const Map = {
  width: 734,
  height: 530,
};

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

    this.getVegetable = this.getVegetable.bind(this);
    this.updateVegetable = this.updateVegetable.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.setMap = this.setMap.bind(this);
    this.onImageChange = this.onImageChange.bind(this);

    this.state = {
      Vegetable: {
        name: '',
        lat: 0,
        lng: 0,
        description: '',
      },
      imagePreviewUrl: '',
      Map: {
        width: '20px',
        height: '20px',
      },
    };

    this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
  }

  componentDidMount() {
    window.addEventListener('resize', this.setMap);
    this.setMap();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setMap);
  }

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

    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        [name]: value,
      },
    }));
  }

  onImageChange(e) {
    e.preventDefault();

    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      this.setState(prevState => ({
        Vegetable: {
          ...prevState.Vegetable,
          mainPictureImported: file,
        },
        imagePreviewUrl: reader.result,
      }));
    };

    reader.readAsDataURL(file);
  }

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

    const fd = new FormData();
    //
    //
    if (this.state.imagePreviewUrl) {
      fd.append('mainPicture', this.state.Vegetable.mainPictureImported);
    }

    Object.keys(this.state.Vegetable).map((objectKey) => {
      if (objectKey !== 'mainPicture' && objectKey !== 'mainPictureImported') {
        fd.append(objectKey, this.state.Vegetable[objectKey]);
      }
      return true;
    });
    console.log(this.state.Vegetable);
    API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
      .then((res) => {
        // this.setState({ Category: res.data });
      })
      .catch(() => {
        alert('Impossile de mettre à jour cette catégorie');
      });
  }

  getVegetable(categoryId, vegetableId) {
    API.get(`types/${categoryId}/vegetables/${vegetableId}`)
      .then((res) => {
        if (res.status === 200) {
          const item = res.data;
          if (item.description === null) {
            item.description = ' ';
          }
          this.setState({ Vegetable: item });
        }
      })
      .catch((e) => {
        alert('Erreur lors de la récupération de ce végétal');
      });
  }

  setMap() {
    const width = document.getElementById('MapContainer').clientWidth;
    let MapWidth = Map.width;
    let MapHeight = Map.height;

    if (width < Map.width) {
      MapWidth = width;
      MapHeight = Math.round(Map.height * MapWidth / Map.width);
    }

    this.setState({
      Map: {
        width: MapWidth,
        height: MapHeight,
      },
    });
  }

  render() {
    const { imagePreviewUrl } = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} alt="Preview" />);
    } else if (this.state.Vegetable.mainPicture) {
      $imagePreview = (<img src={this.state.Vegetable.mainPicture} alt="Preview" />);
    } else {
      $imagePreview = (<div className="previewText" />);
    }

    return (
      <Container className="Vegetable">
        <Header categoryId={this.state.Vegetable.Type ? this.state.Vegetable.Type.id : 1} categoryName={this.state.Vegetable.Type ? this.state.Vegetable.Type.name : null} vegetableId={this.state.Vegetable.id || 1} vegetableName={this.state.Vegetable.name} />
        <Form onSubmit={this.updateVegetable}>
          <Row>
            <Col xs={12} sm={4}>
              <FormGroup row>
                <Label for="name" sm={4}>Nom</Label>
                <Col sm={8}>
                  <Input
                    type="text"
                    name="name"
                    id="name"
                    value={this.state.Vegetable.name}
                    placeholder="Nom"
                    onChange={this.handleChange}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label for="description" sm={4}>Description</Label>
                <Col sm={8}>
                  <Input
                    type="textarea"
                    name="description"
                    id="description"
                    value={this.state.Vegetable.description}
                    placeholder="Description"
                    onChange={this.handleChange}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label for="lat" sm={4}>Latitude (%)</Label>
                <Col sm={8}>
                  <Input
                    type="number"
                    min="0"
                    max="100"
                    step="1"
                    name="lat"
                    id="lat"
                    value={this.state.Vegetable.lat}
                    placeholder="Latitude"
                    onChange={this.handleChange}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label for="lng" sm={4}>Longitude (%)</Label>
                <Col sm={8}>
                  <Input
                    type="number"
                    min="0"
                    max="100"
                    step="1"
                    name="lng"
                    id="lng"
                    value={this.state.Vegetable.lng}
                    placeholder="Longitude"
                    onChange={this.handleChange}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label for="mainPicture" sm={4}>Photo principale</Label>
                <Col sm={8}>
                  <Input
                    type="file"
                    id="mainPicture"
                    onChange={e => this.onImageChange(e)}
                  />
                </Col>
              </FormGroup>
              <div className="imgPreview">
                {$imagePreview}
              </div>

            </Col>
            <Col xs={12} sm={8}>
              <div id="MapContainer">
                <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
                  <div className="mapMarker" style={{ left: `calc(${this.state.Vegetable.lat}% - 16px)`, top: `calc(${this.state.Vegetable.lng}% - 16px)` }}><FaMapMarkerAlt /></div>
                </div>
              </div>
            </Col>
          </Row>

          <Button color="primary" style={{ marginTop: '16px' }}>
            <FaEdit />
            {' '}
Mettre à jour
          </Button>
        </Form>
      </Container>
    );
  }
}

export default Vegetable;