Merge pull request #68 from webgem-xyz/v3.1

✏️ Changing Tempature in measurements to Temperature
✏️ Changed Ph to pH in measurements
✏️ Editable now uses 30 days instead of random number.

🐛 Fixed remove item in add measurement to remove the proper added field.
🐛 Input fields now also allow . and ,

✨ Now warning when signing out.
✨ In edit added input type date
✨ In editMedia added input type date.
✨ Added remove button in editmedia

✨ Edit now saves changes.
🎨 Removed unused comments
💚 Updates to eslint config

Author: Yannick

.eslintrc

@@ -44,7 +44,9 @@
     "max-len": 0,
     "import/extensions": 0,
     "no-underscore-dangle": 0,
+    "no-restricted-globals": 1,
     "no-return-assign": 0,
+    "no-alert": 0,
     "consistent-return": 0,
     "react/display-name": 1,
     "react/no-unknown-property": 0,

readme.md

@@ -240,16 +240,16 @@ createAccount | function | Function that handles creating the user account and s
 ## DatePicker Component
 ### Usage
 The DatePicker Component consists of the following
-* Label 
+* Label
 * Input (date)
   * You choose the date
 
 ### Location
-The DatePicker Component is located at 
+The DatePicker Component is located at
 ```
   src/components/datePicker/
 ```
-### Attributes 
+### Attributes
 The DatePicker Component accepts the following attributes
 
 Attribute | Type | Usage
@@ -362,7 +362,7 @@ HandleFilter | function | function that handles the filtering.
 
 ## Footer Component
 ### Usage
-The Footer Component consists of the following 
+The Footer Component consists of the following
 * Overview (icon)
   * When clicked on Overview it will send them to [Overview Component](#overview-component).
 * Request (icon)
@@ -373,7 +373,7 @@ The Footer Component consists of the following
   * When clicked on Notifications it will send them to [Notifications Component](#notifications-component).
 
 ### Location
-The Footer Component is located at 
+The Footer Component is located at
 ```
   src/components/footer/
 ```
@@ -393,15 +393,15 @@ The FormItem Component consists of the following
     * Value
       * Acidity
       * Salinity
-      * Tempature
+      * Temperature
 * Label (value)
 * Input (number)
 * Remove Button
   * Value
     * Remove item
 
 ### Location
-The FormItem is located at 
+The FormItem is located at
 ```
   src/components/formItem/
 ```
@@ -612,7 +612,7 @@ The Measurement component consists of the following
   * Date
   * Acidity (pH)
   * Salinity (PSU)
-  * Tempature
+  * Temperature
 * A button to delete the measurements
 
 ### Location

src/components/formItem/index.js

@@ -5,18 +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}>
-          <option value="acidity">Acidity (Ph)</option>
+        <select required class={style.select} value={this.props.item} disabled>
+          <option value="acidity">Acidity (pH)</option>
           <option value="salinity">Salinity (PSU)</option>
-          <option value="tempature">Tempature</option>
+          <option value="Temperature">Temperature</option>
         </select>
         <label>Value</label>
-        <input type="number" value={this.props.value} class={style.addedInputField} />
-        <RemoveButton value="remove item" removeField={this.removeField} />
+        <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" i={this.props.item} removeField={this.removeField} />
       </div>
     );
   }
@@ -25,4 +46,5 @@ export default class FormItem extends Component {
 FormItem.propTypes = {
   item: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  handleState: PropTypes.func.isRequired,
 };

src/components/inputGroup/index.js

@@ -22,6 +22,7 @@ export default class InputGroup extends Component {
         <input
           onChange={e => this.handleChange(e, this.props.kind)}
           type={this.props.type}
+          step="0.00001"
           placeholder={this.props.placeholder}
           value={this.props.value}
           id={this.props.kind}

src/components/item/index.js

@@ -24,10 +24,6 @@ function defineImgAlt(details) {
   }
 }
 
-function getNumber(mx) {
-  return Math.floor(Math.random() * Math.floor(mx)) + 1;
-}
-
 export default class Item extends Component {
   render() {
     const details = this.props.details;
@@ -41,7 +37,7 @@ export default class Item extends Component {
             class={style.icon}
           />
           <p class={style.date}>{details.date}</p>
-          <p class={style.edit}>{getNumber(24)} days</p>
+          <p class={style.edit}>30 days</p>
           <p class={style.uploadStatText}>Received</p>
           <i className={`material-icons ${style.uploadStat}`}>done</i>
         </div>

src/components/removeButton/index.js

@@ -9,7 +9,7 @@ export default class RemoveButton extends Component {
         type="button"
         value={this.props.value}
         class={style.remove}
-        onClick={e => this.props.removeField(e, this.props.i)}
+        onClick={() => this.props.removeField(this.props.i)}
       />
     );
   }

src/routes/account/index.js

@@ -8,6 +8,21 @@ import Header from '../../components/header/index';
 import style from './style';
 
 export default class Account extends Component {
+  constructor(props) {
+    super(props);
+
+    this.logoutConfirm = this.logoutConfirm.bind(this);
+  }
+
+  logoutConfirm(e) {
+    e.preventDefault();
+    const r = confirm(
+      `Are you sure you want to sign out? \nYou need a proper internet connection to sign in again.`
+    );
+    if (r === true) {
+      this.props.logout(e);
+    }
+  }
   render() {
     return (
       <div class={style.account}>
@@ -26,7 +41,7 @@ export default class Account extends Component {
           <p>
             <span>Birth date:</span> 20-04-1990
           </p>
-          <button onClick={e => this.props.logout(e)} class={style.logout}>
+          <button onClick={e => this.logoutConfirm(e)} class={style.logout}>
             SIGN OUT
           </button>
         </div>

src/routes/add/index.js

@@ -147,13 +147,14 @@ export default class Add extends Component {
           <label>Measurement type</label>
           <select required onChange={e => this.handleSelectChange(e, i)} class={style.select}>
             <option label=" " disabled selected />
-            <option value="acidity">Acidity (Ph)</option>
+            <option value="acidity">Acidity (pH)</option>
             <option value="salinity">Salinity (PSU)</option>
-            <option value="tempature">Tempature</option>
+            <option value="Temperature">Temperature</option>
           </select>
           <label>Value</label>
           <input
             type="number"
+            step="0.0000001"
             value={this.state.value[i] || ''}
             onChange={e => this.handleChange(e, i)}
             class={style.addedInputField}

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,14 +58,32 @@ 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,
     });
   }
 
   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() {
@@ -75,9 +99,9 @@ export default class Edit extends Component {
               label="Date"
               handleState={this.handleState}
               fullWidth
+              type="date"
               placeholder=""
             />
-            <i className="material-icons">date_range</i>
           </div>
           <section class={style.locationEdit}>
             <label>Location</label>
@@ -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.tempature && <FormItem item="acidity" value={measurement.tempature} />}
+          {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}