Use module for Vegetable

src/Vegetable.js

@@ -3,40 +3,27 @@ import React, {
 } from 'react';
 import {
   Container,
-  Row,
-  Col,
   Form,
-  FormGroup,
   Button,
-  Label,
-  Input,
   TabContent,
   TabPane,
   Nav,
   NavItem,
   NavLink,
-  Carousel,
-  CarouselItem,
-  CarouselControl,
-  CarouselIndicators,
 } from 'reactstrap';
 import classnames from 'classnames';
 import {
   FaEdit,
-  FaMapMarkerAlt,
-  FaFileImage,
 } from 'react-icons/fa';
 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';
 
-const Map = {
-  width: 734,
-  height: 530,
-};
-
 class Vegetable extends Component {
   constructor(props) {
     super(props);
@@ -51,27 +38,17 @@ class Vegetable extends Component {
       },
       imagePreviewUrl: '',
       imagesPreviewUrls: [],
-      Map: {
-        width: '20px',
-        height: '20px',
-      },
       activeTab: '1',
-      activeIndex: 0,
+      availableProperties: []
     };
 
     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.onPictureChange = this.onPictureChange.bind(this);
+    this.changeMainPicture = this.changeMainPicture.bind(this);
+    this.addPicture = this.addPicture.bind(this);
     this.toggle = this.toggle.bind(this);
-    this.next = this.next.bind(this);
-    this.previous = this.previous.bind(this);
-    this.goToIndex = this.goToIndex.bind(this);
-    this.onExiting = this.onExiting.bind(this);
-    this.onExited = this.onExited.bind(this);
     this.postPicture = this.postPicture.bind(this);
+    this.updateValueFromChild = this.updateValueFromChild.bind(this);
 
     this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
   }
@@ -80,26 +57,11 @@ class Vegetable extends Component {
     if (this.state.activeTab !== tab) {
       this.setState({
         activeTab: tab,
-      }, () => {
-        this.setMap();
       });
     }
   }
 
-  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;
-
+  updateValueFromChild(name, value) {
     this.setState(prevState => ({
       Vegetable: {
         ...prevState.Vegetable,
@@ -108,13 +70,7 @@ class Vegetable extends Component {
     }));
   }
 
-  onImageChange(e) {
-    e.preventDefault();
-
-    const reader = new FileReader();
-    const file = e.target.files[0];
-
-    reader.onloadend = () => {
+  changeMainPicture(file, reader) {
     this.setState(prevState => ({
       Vegetable: {
         ...prevState.Vegetable,
@@ -122,18 +78,9 @@ class Vegetable extends Component {
       },
       imagePreviewUrl: reader.result,
     }));
-    };
-
-    reader.readAsDataURL(file);
   }
 
-  onPictureChange(e) {
-    e.preventDefault();
-
-    const reader = new FileReader();
-    const file = e.target.files[0];
-
-    reader.onloadend = () => {
+  addPicture(file, reader) {
     this.setState(prevState => ({
       Vegetable: {
         ...prevState.Vegetable,
@@ -148,11 +95,8 @@ class Vegetable extends Component {
       ],
       activeIndex: prevState.imagesPreviewUrls.length
     }));
-    };
 
     this.postPicture(file);
-
-    reader.readAsDataURL(file);
   }
 
   updateVegetable(event) {
@@ -194,6 +138,19 @@ class Vegetable extends Component {
   }
 
   getVegetable(categoryId, vegetableId) {
+    API.get('properties')
+      .then(res => {
+        //availableProperties
+        if (res.status === 200) {
+          this.setState({
+            availableProperties: res.data.rows
+          });
+        }
+      })
+      .catch(e => {
+        alert('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) {
@@ -222,71 +179,7 @@ class Vegetable extends Component {
       });
   }
 
-  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,
-      },
-    });
-  }
-
-  onExiting() {
-    this.animating = true;
-  }
-
-  onExited() {
-    this.animating = false;
-  }
-
-  next() {
-    if (this.animating) return;
-    const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
-    this.setState({
-      activeIndex: nextIndex,
-    });
-  }
-
-  previous() {
-    if (this.animating) return;
-    const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
-    this.setState({
-      activeIndex: nextIndex,
-    });
-  }
-
-  goToIndex(newIndex) {
-    if (this.animating) return;
-    this.setState({
-      activeIndex: newIndex,
-    });
-  }
-
   render() {
-    const {
-      activeIndex,
-    } = this.state;
-    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 (
       <div>
         <Header />
@@ -321,143 +214,25 @@ class Vegetable extends Component {
             </Nav>
             <TabContent activeTab={this.state.activeTab}>
               <TabPane tabId="1">
-                <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}
+                <VegetableMain
+                  Vegetable={this.state.Vegetable}
+                  imagePreviewUrl={this.state.imagePreviewUrl}
+                  updateValue={this.updateValueFromChild}
+                  changeMainPicture={this.changeMainPicture}
                 />
-                      </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="mainPicture" sm={4}>Photo principale</Label>
-                      <Col sm={8}>
-                        <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
-                          <FaFileImage />
-                        </Label>
-                        <Input
-                          type="file"
-                          id="mainPicture"
-                          onChange={e => this.onImageChange(e)}
-                        />
-                      </Col>
-                    </FormGroup>
-                  </Col>
-                  <Col xs={12} sm={8}>
-                    <div className="imgPreview">
-                      {$imagePreview}
-                    </div>
-                  </Col>
-                </Row>
               </TabPane>
               <TabPane tabId="2">
-                <Row>
-                  <Col xs={12} sm={4}>
-                    <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}
+                <VegetableMap
+                  Vegetable={this.state.Vegetable}
+                  updateValue={this.updateValueFromChild}
                 />
-                      </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>
-                  </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>
               </TabPane>
               <TabPane tabId="3">
-                <Row>
-                  <Col xs={12} sm={4}>
-                    <FormGroup row>
-                      <Col sm={12}>
-                        <Label className="btn btn-success" for="Pictures" sm={12}>
-                          <FaFileImage />
-                          {' '}
-                          Ajouter une photo
-                        </Label>
-                        <Input
-                          type="file"
-                          id="Pictures"
-                          onChange={e => this.onPictureChange(e)}
+                <VegetableCarousel
+                  addPicture={this.addPicture}
+                  imagesPreviewUrls={this.state.imagesPreviewUrls}
+                  activeIndex={this.state.activeIndex}
                 />
-                      </Col>
-                    </FormGroup>
-                  </Col>
-                  <Col xs={12} sm={8}>
-                    {this.state.imagesPreviewUrls
-                      && this.state.imagesPreviewUrls.length > 0
-                        ? (<Carousel
-                          activeIndex={activeIndex}
-                          next={this.next}
-                          previous={this.previous}
-                           >
-                          <CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
-                          {this.state.imagesPreviewUrls.map( (item, key) => (
-                            <CarouselItem
-                              onExiting={this.onExiting}
-                              onExited={this.onExited}
-                              key={`Carousel_${key}`}
-                            >
-                              <img src={item} alt="Carousel" />
-                            </CarouselItem>
-                          ))}
-                          <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
-                          <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
-                        </Carousel>)
-                        : (null)
-                    }
-                  </Col>
-                </Row>
               </TabPane>
             </TabContent>
 

src/Vegetable/Carousel.js

@@ -0,0 +1,145 @@
+import React, {
+  Component,
+} from 'react';
+import {
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Input,
+  Carousel,
+  CarouselItem,
+  CarouselControl,
+  CarouselIndicators,
+} from 'reactstrap';
+import {
+  FaFileImage,
+} from 'react-icons/fa';
+
+class VegetableCarousel extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      imagesPreviewUrls: this.props.imagesPreviewUrls,
+      activeIndex: 0
+    };
+
+    this.onPictureChange = this.onPictureChange.bind(this);
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+    this.goToIndex = this.goToIndex.bind(this);
+    this.onExited = this.onExited.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if ( nextProps.imagesPreviewUrls) {
+      this.setState({
+        imagesPreviewUrls: nextProps.imagesPreviewUrls
+      });
+    }
+    if ( nextProps.activeIndex) {
+      this.setState({
+        activeIndex: nextProps.activeIndex
+      });
+    }
+  }
+
+  onPictureChange(e) {
+    e.preventDefault();
+
+    const reader = new FileReader();
+    const file = e.target.files[0];
+
+    reader.onloadend = () => {
+      this.props.addPicture(file, reader);
+    };
+
+    reader.readAsDataURL(file);
+  }
+
+  next() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
+    this.setState({
+      activeIndex: nextIndex,
+    });
+  }
+
+  previous() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
+    this.setState({
+      activeIndex: nextIndex,
+    });
+  }
+
+  goToIndex(newIndex) {
+    if (this.animating) return;
+    this.setState({
+      activeIndex: newIndex,
+    });
+  }
+
+  onExiting() {
+    this.animating = true;
+  }
+
+  onExited() {
+    this.animating = false;
+  }
+
+  render() {
+    const {
+      activeIndex,
+    } = this.state;
+
+    return (
+      <Row>
+        <Col xs={12} sm={4}>
+          <FormGroup row>
+            <Col sm={12}>
+              <Label className="btn btn-success" for="Pictures" sm={12}>
+                <FaFileImage />
+                {' '}
+                Ajouter une photo
+              </Label>
+              <Input
+                type="file"
+                id="Pictures"
+                onChange={e => this.onPictureChange(e)}
+              />
+            </Col>
+          </FormGroup>
+        </Col>
+        <Col xs={12} sm={8}>
+          {this.state.imagesPreviewUrls
+            && this.state.imagesPreviewUrls.length > 0
+              ? (<Carousel
+                activeIndex={activeIndex}
+                next={this.next}
+                previous={this.previous}
+                 >
+                <CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+                {this.state.imagesPreviewUrls.map( (item, key) => (
+                  <CarouselItem
+                    onExiting={this.onExiting}
+                    onExited={this.onExited}
+                  key={`Carousel_${key}`}
+                >
+                  <img src={item} alt="Carousel" />
+                </CarouselItem>
+              ))}
+              <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+              <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+            </Carousel>)
+            : (null)
+        }
+      </Col>
+    </Row>
+    )
+  }
+}
+
+export default VegetableCarousel;

src/Vegetable/Main.js

@@ -0,0 +1,142 @@
+import React, {
+  Component,
+} from 'react';
+import {
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Input,
+} from 'reactstrap';
+import {
+  FaFileImage,
+} from 'react-icons/fa';
+
+class VegetableMain extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      Vegetable: {
+        name: '',
+        lat: 0,
+        lng: 0,
+        description: '',
+        Pictures: [],
+      },
+      imagePreviewUrl: '',
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps)
+    if (nextProps.Vegetable) {
+      this.setState({
+        Vegetable: nextProps.Vegetable
+      });
+    }
+    if (nextProps.imagePreviewUrl) {
+      this.setState({
+        imagePreviewUrl: nextProps.imagePreviewUrl
+      });
+    }
+  }
+
+  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,
+      },
+    }));
+
+    this.props.updateValue(name, value)
+  }
+
+  onImageChange(e) {
+    e.preventDefault();
+
+    const reader = new FileReader();
+    const file = e.target.files[0];
+
+    reader.onloadend = () => {
+      this.props.changeMainPicture(file, reader);
+    };
+
+    reader.readAsDataURL(file);
+  }
+
+  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 (
+      <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="mainPicture" sm={4}>Photo principale</Label>
+            <Col sm={8}>
+              <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
+                <FaFileImage />
+              </Label>
+              <Input
+                type="file"
+                id="mainPicture"
+                onChange={e => this.onImageChange(e)}
+              />
+            </Col>
+          </FormGroup>
+        </Col>
+        <Col xs={12} sm={8}>
+          <div className="imgPreview">
+            {$imagePreview}
+          </div>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default VegetableMain;

src/Vegetable/Map.js

@@ -0,0 +1,145 @@
+import React, {
+  Component,
+} from 'react';
+import {
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Input,
+} from 'reactstrap';
+import {
+  FaMapMarkerAlt
+} from 'react-icons/fa';
+
+const Map = {
+  width: 734,
+  height: 530,
+};
+
+class VegetableMap extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      Vegetable: {
+        name: '',
+        lat: 0,
+        lng: 0,
+        description: '',
+        Pictures: [],
+      },
+      Map: {
+        width: '20px',
+        height: '20px',
+      },
+    };
+
+    this.setMap = this.setMap.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.Vegetable) {
+      this.setState({
+        Vegetable: nextProps.Vegetable
+      });
+    }
+
+    setTimeout( () => {
+      this.setMap();
+    }, 200);
+  }
+
+  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,
+      },
+    }));
+
+    this.props.updateValue(name, value)
+  }
+
+  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() {
+    return (
+      <Row>
+        <Col xs={12} sm={4}>
+          <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>
+        </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>
+    )
+  }
+}
+
+export default VegetableMap