Added patch method for properties

src/Properties.js

@@ -29,8 +29,10 @@ class Properties extends Component {
 
     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: [],
@@ -50,6 +52,27 @@ class Properties extends Component {
     });
   }
 
+  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) => {
@@ -85,6 +108,26 @@ class Properties extends Component {
       });
   }
 
+  patchItem(event) {
+    event.preventDefault(); // Let's stop this event.
+    event.stopPropagation(); // Really this time.
+
+    const {
+      id,
+      value
+    } = event.target;
+
+    API.post(`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) => {
@@ -116,7 +159,16 @@ class Properties extends Component {
               {this.state.Properties.map((item, key) => (
                 <tr key={key}>
                   <th scope="row">{item.id}</th>
-                  <td>{item.name}</td>
+                  <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>