bo/src/Vegetable.js

import React, {
  Component,
} from 'react';
import {
  Container,
  Form,
  Button,
  TabContent,
  TabPane,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';
import classnames from 'classnames';
import {
  FaEdit,
} from 'react-icons/fa';
import {
  NotificationContainer,
  NotificationManager
} from 'react-notifications';
import Navigation from './Navigation';
import Header from './Header';
import API from './Api';
import VegetableMain from './Vegetable/Main'
import VegetableCarousel from './Vegetable/Carousel'
import VegetableMap from './Vegetable/Map'

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

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

    this.state = {
      Vegetable: {
        name: '',
        lat: 0,
        lng: 0,
        description: '',
        Pictures: [],
      },
      imagePreviewUrl: '',
      imagesPreviewUrls: [],
      activeTab: '1',
      availableProperties: []
    };

    this.getVegetable = this.getVegetable.bind(this);
    this.updateVegetable = this.updateVegetable.bind(this);
    this.changeMainPicture = this.changeMainPicture.bind(this);
    this.addPicture = this.addPicture.bind(this);
    this.toggle = this.toggle.bind(this);
    this.postPicture = this.postPicture.bind(this);
    this.updateValueFromChild = this.updateValueFromChild.bind(this);

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

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab,
      });
    }
  }

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

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

  addPicture(file, reader) {
    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        Pictures: [
          ...prevState.Vegetable.Pictures,
          file
        ]
      },
      imagesPreviewUrls: [
        ...prevState.imagesPreviewUrls,
        reader.result
      ],
      activeIndex: prevState.imagesPreviewUrls.length
    }));

    this.postPicture(file);
  }

  updateVegetable(event) {
    NotificationManager.info('Sauvegarde en cours');
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    const requests = 1 + this.state.Vegetable.Properties.length;
    let requestsDone = 0;

    let isDone = () => {
      if (requests === requestsDone) {
        NotificationManager.success('Sauvegarde terminée');
        this.getVegetable(this.props.match.params.categoryId, this.props.match.params.vegetableId);
      }
    }

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

    Object.keys(this.state.Vegetable).map((objectKey) => {
      // if (objectKey === 'Properties') {
      //   fd.append(objectKey, JSON.stringify(this.state.Vegetable[objectKey]));
      // } else
      if (objectKey !== 'mainPicture' && objectKey !== 'mainPictureImported' && objectKey !== 'Properties') {
        fd.append(objectKey, this.state.Vegetable[objectKey]);
      }
      return true;
    });
    API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
      .then((res) => {
        requestsDone++;
        isDone();
      })
      .catch(() => {
        NotificationManager.error('Impossile de mettre à jour ce végétal');
      });

    // Patch or create Properties
    this.state.Vegetable.Properties.forEach(propertyItem => {
      if (propertyItem.id) {
        API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties/${propertyItem.id}`, propertyItem)
          .then((res) => {
            requestsDone++;
            isDone();
          })
          .catch(() => {
            NotificationManager.error(`Impossile de mettre à jour la propriété ${propertyItem.Property.name}`);
          });
      } else {
        API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties`, propertyItem)
          .then((res) => {
            requestsDone++;
            isDone();
          })
          .catch(() => {
            NotificationManager.error(`Impossile de sauvegarder la propriété ayant pour valeur ${propertyItem.value}`);
          });
      }
    })

  }

  postPicture(picture) {
    const fd = new FormData();

    fd.append('picture', picture);

    API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures`, fd)
      .then((res) => {
        // this.setState({ Category: res.data });
      })
      .catch(() => {
        NotificationManager.error(`Impossible d'ajouter cette image`);
      });
  }

  getVegetable(categoryId, vegetableId) {
    API.get('properties')
      .then(res => {
        //availableProperties
        if (res.status === 200) {
          this.setState({
            availableProperties: res.data.rows
          });
        }
      })
      .catch(e => {
        NotificationManager.error('Erreur lors de la récupération des types de propriétés');
      });

    API.get(`types/${categoryId}/vegetables/${vegetableId}`)
      .then((res) => {
        if (res.status === 200) {
          const item = res.data;
          let images = [];

          if (item.description === null) {
            item.description = ' ';
          }

          if (item.Pictures.length > 0) {
            for (let i = 0; i < item.Pictures.length; i += 1) {
              images.push(item.Pictures[i].url);
            }
          }

          this.setState(prevState => ({
            ...prevState,
            Vegetable: item,
            imagesPreviewUrls: images
          }));
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération de ce végétal');
      });
  }

  render() {
    return (
      <div>
        <NotificationContainer/>
        <Header />
        <Container className="Vegetable">
          <Navigation 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}>
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  Informations générales
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  Carte
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  Galerie
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab}>
              <TabPane tabId="1">
                <VegetableMain
                  Vegetable={this.state.Vegetable}
                  imagePreviewUrl={this.state.imagePreviewUrl}
                  updateValue={this.updateValueFromChild}
                  changeMainPicture={this.changeMainPicture}
                  availableProperties={this.state.availableProperties}
                />
              </TabPane>
              <TabPane tabId="2">
                <VegetableMap
                  Vegetable={this.state.Vegetable}
                  updateValue={this.updateValueFromChild}
                />
              </TabPane>
              <TabPane tabId="3">
                <VegetableCarousel
                  addPicture={this.addPicture}
                  imagesPreviewUrls={this.state.imagesPreviewUrls}
                  activeIndex={this.state.activeIndex}
                />
              </TabPane>
            </TabContent>

            <Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
              <FaEdit />
              {' '}
              Mettre à jour
            </Button>

          </Form>
        </Container>
      </div>
    );
  }
}

export default Vegetable;