From 077fe0b6a9a17e07c750a28c121059056449e8f1 Mon Sep 17 00:00:00 2001
From: Yannick <yannick1691@users.noreply.github.com>
Date: Tue, 30 Jan 2018 14:43:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20edit=20functions=20to=20the?=
 =?UTF-8?q?=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formItem/index.js | 21 +++++++++++++--
 src/routes/edit/index.js         | 46 +++++++++++++++++++++++++++-----
 src/routes/editMedia/index.js    | 39 +++++++++++++++++++++++----
 3 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/components/formItem/index.js b/src/components/formItem/index.js
index cfa222a..c680322 100644
--- a/src/components/formItem/index.js
+++ b/src/components/formItem/index.js
@@ -5,23 +5,39 @@ import RemoveButton from '../../components/removeButton/';
 import style from './style';
 
 export default class FormItem extends Component {
+  constructor() {
+    super();
+
+    this.handleChange = this.handleChange.bind(this);
+    this.removeField = this.removeField.bind(this);
+  }
+
+  handleChange(e, kind) {
+    this.props.handleState(kind, e.target.value);
+  }
+
+  removeField(kind) {
+    this.props.handleState(kind, null);
+  }
+
   render() {
     return (
       <div key={this.props.item} class={style.customFormfieldWrap}>
         <label>Measurement type</label>
-        <select required class={style.select} value={this.props.item}>
+        <select required class={style.select} value={this.props.item} disabled>
           <option value="acidity">Acidity (pH)</option>
           <option value="salinity">Salinity (PSU)</option>
           <option value="Temperature">Temperature</option>
         </select>
         <label>Value</label>
         <input
+          onChange={e => this.handleChange(e, this.props.item)}
           type="number"
           step="0.00001"
           value={this.props.value}
           class={style.addedInputField}
         />
-        <RemoveButton value="remove item" removeField={this.removeField} />
+        <RemoveButton value="remove item" i={this.props.item} removeField={this.removeField} />
       </div>
     );
   }
@@ -30,4 +46,5 @@ export default class FormItem extends Component {
 FormItem.propTypes = {
   item: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  handleState: PropTypes.func.isRequired,
 };
diff --git a/src/routes/edit/index.js b/src/routes/edit/index.js
index f9a267c..9d10cbe 100644
--- a/src/routes/edit/index.js
+++ b/src/routes/edit/index.js
@@ -20,6 +20,8 @@ export default class Edit extends Component {
 
     this.handleSave = this.handleSave.bind(this);
     this.handleResetLoc = this.handleResetLoc.bind(this);
+    this.handleState = this.handleState.bind(this);
+    this.handleChange = this.handleChange.bind(this);
     this.handleEditSave = this.handleEditSave.bind(this);
 
     this.state = {
@@ -29,9 +31,13 @@ export default class Edit extends Component {
   }
 
   componentWillMount(nextProps) {
-    this.ref = base.bindToState(`/${this.props.uid}/mes/${this.props.measurementId}`, {
+    this.ref = base.fetch(`/${this.props.uid}/mes/${this.props.measurementId}`, {
       context: this,
-      state: 'measurement',
+      then(data) {
+        this.setState({
+          measurement: data,
+        });
+      },
     });
   }
 
@@ -52,6 +58,18 @@ export default class Edit extends Component {
     });
   }
 
+  handleState(kind, value) {
+    const measurement = { ...this.state.measurement };
+    measurement[kind] = value;
+    this.setState({
+      measurement,
+    });
+  }
+
+  handleChange(e, kind) {
+    this.handleState(kind, e.target.value);
+  }
+
   handleSave() {
     this.setState({
       open: false,
@@ -59,7 +77,13 @@ export default class Edit extends Component {
   }
 
   handleEditSave() {
-    route(`/mes/${this.props.measurementId}`);
+    const measurementId = this.props.measurementId;
+    base.update(`/${this.props.uid}/mes/${this.props.measurementId}`, {
+      data: this.state.measurement,
+      then() {
+        route(`/mes/${measurementId}`);
+      },
+    });
   }
 
   render() {
@@ -101,9 +125,19 @@ export default class Edit extends Component {
           <LinkRequestButton />
         </section>
         <section class={style.data}>
-          {measurement.acidity && <FormItem item="acidity" value={measurement.acidity} />}
-          {measurement.salinity && <FormItem item="acidity" value={measurement.salinity} />}
-          {measurement.Temperature && <FormItem item="acidity" value={measurement.Temperature} />}
+          {measurement.acidity && (
+            <FormItem item="acidity" handleState={this.handleState} value={measurement.acidity} />
+          )}
+          {measurement.salinity && (
+            <FormItem item="salinity" handleState={this.handleState} value={measurement.salinity} />
+          )}
+          {measurement.Temperature && (
+            <FormItem
+              item="Temperature"
+              handleState={this.handleState}
+              value={measurement.Temperature}
+            />
+          )}
           <input
             type="button"
             onClick={this.handleEditSave}
diff --git a/src/routes/editMedia/index.js b/src/routes/editMedia/index.js
index d5faeb6..0dd3aa3 100644
--- a/src/routes/editMedia/index.js
+++ b/src/routes/editMedia/index.js
@@ -18,6 +18,8 @@ export default class EditMedia extends Component {
     this.handleSave = this.handleSave.bind(this);
     this.handleResetLoc = this.handleResetLoc.bind(this);
     this.handleEditSave = this.handleEditSave.bind(this);
+    this.handleState = this.handleState.bind(this);
+    this.handleChange = this.handleChange.bind(this);
     this.removeImage = this.removeImage.bind(this);
 
     this.state = {
@@ -27,9 +29,13 @@ export default class EditMedia extends Component {
   }
 
   componentWillMount(nextProps) {
-    this.ref = base.bindToState(`/${this.props.uid}/mes/${this.props.mediaId}`, {
+    this.ref = base.fetch(`/${this.props.uid}/mes/${this.props.mediaId}`, {
       context: this,
-      state: 'measurement',
+      then(data) {
+        this.setState({
+          measurement: data,
+        });
+      },
     });
   }
 
@@ -56,8 +62,26 @@ export default class EditMedia extends Component {
     });
   }
 
+  handleState(kind, value) {
+    const measurement = { ...this.state.measurement };
+    measurement[kind] = value;
+    this.setState({
+      measurement,
+    });
+  }
+
+  handleChange(e, kind) {
+    this.handleState(kind, e.target.value);
+  }
+
   handleEditSave() {
-    route(`/med/${this.props.mediaId}`);
+    const mediaId = this.props.mediaId;
+    base.update(`/${this.props.uid}/mes/${this.props.mediaId}`, {
+      data: this.state.measurement,
+      then() {
+        route(`/med/${mediaId}`);
+      },
+    });
   }
 
   removeImage(e, i) {
@@ -101,7 +125,6 @@ export default class EditMedia extends Component {
               type="date"
               placeholder=""
             />
-            <i className="material-icons">date_range</i>
           </div>
           <section class={style.locationEdit}>
             <label>Location</label>
@@ -124,7 +147,12 @@ export default class EditMedia extends Component {
           />
           <div class={style.inputGroupDate}>
             <label for="category">Category</label>
-            <select id="category" class={style.select} value={measurement.category}>
+            <select
+              id="category"
+              class={style.select}
+              value={measurement.category}
+              onChange={e => this.handleChange(e, 'category')}
+            >
               <option value="State of the water">State of the water</option>
               <option value="Sea Animals">Sea Animals</option>
               <option value="Coral">Coral</option>
@@ -137,6 +165,7 @@ export default class EditMedia extends Component {
             label="Description (optional)"
             fullWidth
             placeholder=""
+            handleState={this.handleState}
           />
           <LinkRequestButton />
         </section>