Bug fixes & code cleaning

webgem-xyz · Jan 17, 2018 · cc79c07 · cc79c07
1 parent 3023d81
commit cc79c07
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [0.0.2] - 2018-01-17
+### Added
+- RemoveButton Component.
+- ProgressBar Component.
+- Updated readme to reflect the new RemoveButton and ProgressBar Component.
+
+### Changed
+- Moved remove input and ProgressBar out of Add & AddMedia into there own components.
+- Replaced code of date of measurements with InputGroup Component.
+
+### Fixed
+- Duplicate code in AddMedia.
+- Reduced lines of code in the AddMedia Component.
+
+### Removed
+- Removed UID prop from Add component as it doesn't use / need it.
+- Removed trailing unused code.
+
 ## [0.0.1] - 2018-01-17
 ### Added
 - InputGroup Component now accepts the props fullWidth & placeholder.

diff --git a/readme.md b/readme.md
@@ -46,6 +46,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 * [Measurement Component](#measurement-component)
 * [Media Component](#media-component)
 * [Overview Component](#overview-component)
+* [ProgressBar Component](#progressbar-component)
+* [RemoveButton Component](#removebutton-component)
 * [Reset Component](#reset-component)
 
 ## Account Component
@@ -380,6 +382,44 @@ Attribute | Type | Usage
 --- | --- | ---
 Measurements | object | The measurements of the logged in user.
 
+## ProgressBar Component
+### Usage
+The ProgressBar Component consists of the following
+* Bar wrapper
+* Progress bar showing the ammount of progress made
+
+### Location
+The ProgressBar Component is located at
+```
+  src/components/progress/
+```
+### Attributes
+The ProgressBar Component accepts the following attributes
+
+Attribute | Type | Usage
+--- | --- | ---
+progress | number | How mutch % is uploaded.
+
+## RemoveButton Component
+### Usage
+The RemoveButton Component consists of the following
+* Input field (type button)
+
+### Location
+The RemoveButton Component is located at
+```
+  src/components/removeButton/
+```
+### Attributes
+The RemoveButton Component accepts the following attributes
+
+Attribute | Type | Usage
+--- | --- | ---
+removeField | function | The function that handles deleting the field.
+i | number | Identifier of what field it should remove.
+value | string | What should the text in the button be.
+
+
 ## Reset Component
 ### Usage
 The Reset Component consists of the following

diff --git a/src/components/home/index.js b/src/components/home/index.js
@@ -64,9 +64,8 @@ export default class Home extends Component {
         />
         <Add
           path="/add"
-          uid={this.props.uid}
-          measurements={this.state.measurements}
           addMeasurement={this.addMeasurement}
+          measurements={this.state.measurements}
         />
         <AddMedia
           path="/addMedia"

diff --git a/src/components/progress/index.js b/src/components/progress/index.js
@@ -0,0 +1,17 @@
+import { Component } from 'preact';
+import { PropTypes } from 'preact-compat';
+import style from './style';
+
+export default class ProgressBar extends Component {
+  render() {
+    return (
+      <div class={style.progress}>
+        <span class={style.progressBar} style={`width: ${this.props.progress}%;`} />
+      </div>
+    );
+  }
+}
+
+ProgressBar.propTypes = {
+  progress: PropTypes.number.isRequired,
+};
diff --git a/src/components/progress/style.scss b/src/components/progress/style.scss
@@ -0,0 +1,16 @@
+.progress {
+  background: var(--main-light-color);
+  display: block;
+  height: 2px;
+  margin: -11px 0 11px;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.progressBar {
+  background: rgba(10.6%, 81.2%, 54.1%, .596);
+  display: inline-block;
+  height: 100%;
+  min-width: 4%;
+}
diff --git a/src/components/removeButton/index.js b/src/components/removeButton/index.js
@@ -0,0 +1,22 @@
+import { Component } from 'preact';
+import { PropTypes } from 'preact-compat';
+import style from './style';
+
+export default class RemoveButton extends Component {
+  render() {
+    return (
+      <input
+        type="button"
+        value={this.props.value}
+        class={style.remove}
+        onClick={e => this.props.removeField(e, this.props.i)}
+      />
+    );
+  }
+}
+
+RemoveButton.propTypes = {
+  removeField: PropTypes.func.isRequired,
+  i: PropTypes.number.isRequired,
+  value: PropTypes.string.isRequired,
+};
diff --git a/src/components/removeButton/style.scss b/src/components/removeButton/style.scss
@@ -0,0 +1,10 @@
+.remove {
+  color: var(--main-color);
+  float: right;
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 10px;
+  padding: 0;
+  text-align: right;
+  text-transform: uppercase;
+}
diff --git a/src/helpers.js b/src/helpers.js
diff --git a/src/routes/add/index.js b/src/routes/add/index.js
@@ -6,13 +6,15 @@ import style from './style';
 
 import Header from '../../components/header/index';
 import InputGroup from '../../components/inputGroup/index';
+import RemoveButton from '../../components/removeButton/index';
 
 export default class Add extends Component {
   constructor(props) {
     super(props);
 
     this.geoSuccess = this.geoSuccess.bind(this);
     this.geoError = this.geoError.bind(this);
+    this.removeField = this.removeField.bind(this);
 
     this.createMeasurement = this.createMeasurement.bind(this);
 
@@ -91,7 +93,7 @@ export default class Add extends Component {
     const measurement = {
       longitude: this.state.longitude,
       latitude: this.state.latitude,
-      date: moment(this.date.value, 'YYYY-MM-DD').format('YYYY-MM-DD'),
+      date: moment(this.state.date, 'YYYY-MM-DD').format('YYYY-MM-DD'),
       type: 'mes',
     };
     for (let i = 0; i < this.state.count; i += 1) {
@@ -125,12 +127,7 @@ export default class Add extends Component {
             onChange={e => this.handleChange(e, i)}
             class={style.addedInputField}
           />
-          <input
-            type="button"
-            value="remove item"
-            class={style.remove}
-            onClick={e => this.removeField(e, i)}
-          />
+          <RemoveButton value="remove item" removeField={this.removeField} i={i} />
         </div>
       );
     }
@@ -159,17 +156,14 @@ export default class Add extends Component {
                 handleState={this.handleState}
               />
             </div>
-            <div class={style.inputGroupDate}>
-              <label for="date">Date of measurement</label>
-              <input
-                ref={input => (this.date = input)}
-                type="text"
-                placeholder="YYYY-MM-DD"
-                value={this.state.date}
-                id="date"
-                class={style.inputField}
-              />
-            </div>
+            <InputGroup
+              value={this.state.date}
+              kind="date"
+              label="Date of measurement"
+              handleState={this.handleState}
+              fullWidth
+              placeholder="YYYY-MM-DD"
+            />
           </div>
           {this.createUI()}
           <button class={style.addButton} onClick={e => this.addField(e)}>

diff --git a/src/routes/add/style.scss b/src/routes/add/style.scss
@@ -53,20 +53,10 @@
   padding: 10px 5px;
 }
 
-.remove {
-  color: var(--main-color);
-  float: right;
-  font-size: 16px;
-  font-weight: 700;
-  margin-top: 10px;
-  padding: 0;
-  text-align: right;
-  text-transform: uppercase;
-}
-
 .inputRow {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
 }
 
 .inputField {

diff --git a/src/routes/addMedia/index.js b/src/routes/addMedia/index.js
@@ -8,6 +8,7 @@ import style from './style';
 
 import InputGroup from '../../components/inputGroup/index';
 import Header from '../../components/header/index';
+import ProgressBar from '../../components/progress';
 
 export default class AddMedia extends Component {
   constructor() {
@@ -121,7 +122,7 @@ export default class AddMedia extends Component {
     const measurement = {
       longitude: this.state.longitude,
       latitude: this.state.latitude,
-      date: moment(this.date.value, 'YYYY-MM-DD').format('YYYY-MM-DD'),
+      date: moment(this.state.date, 'YYYY-MM-DD').format('YYYY-MM-DD'),
       category: this.category.value,
       desc: this.state.desc || null,
       type: 'med',
@@ -138,12 +139,6 @@ export default class AddMedia extends Component {
     for (let i = 0; i < this.state.count; i += 1) {
       imagesUI.push(
         <div key={i} class={style.uploadedImage}>
-          <input
-            type="button"
-            value="x"
-            class={style.remove}
-            onClick={e => this.removeImage(e, i)}
-          />
           <button class={style.remove} onClick={e => this.removeImage(e, i)}>
             <i className={`material-icons ${style.icon}`}>close</i>
           </button>
@@ -158,7 +153,7 @@ export default class AddMedia extends Component {
     return (
       <div class={style.addMedia}>
         <Header to="/" backCol="#E7E7E7" title="add media" />
-        <form onSubmit={(e) => this.createMeasurement(e)}>
+        <form onSubmit={e => this.createMeasurement(e)}>
           <div class={style.mainInputs}>
             <div class={style.inputRow}>
               <InputGroup
@@ -176,17 +171,14 @@ export default class AddMedia extends Component {
                 handleState={this.handleState}
               />
             </div>
-            <div class={style.inputGroupDate}>
-              <label for="date">Date of measurement</label>
-              <input
-                ref={input => (this.date = input)}
-                type="text"
-                placeholder="YYYY-MM-DD"
-                value={this.state.date}
-                id="date"
-                class={style.inputField}
-              />
-            </div>
+            <InputGroup
+              value={this.state.date}
+              kind="date"
+              label="Date of measurement"
+              handleState={this.handleState}
+              fullWidth
+              placeholder="YYYY-MM-DD"
+            />
             <div class={style.inputGroupDate}>
               <label for="category">Category</label>
               <select id="category" class={style.select} ref={input => (this.category = input)}>
@@ -208,11 +200,7 @@ export default class AddMedia extends Component {
               placeholder=""
             />
           </div>
-          {this.state.isUploading && (
-            <div class={style.progress}>
-              <span class={style.progressBar} style={`width: ${this.state.progress}%;`} />
-            </div>
-          )}
+          {this.state.isUploading && <ProgressBar progress={this.state.progress} />}
           <div class={style.imageWrap}>{this.renderImages()}</div>
           <label class={style.uploadButton}>
             <i className="material-icons">add</i>

diff --git a/src/routes/addMedia/style.scss b/src/routes/addMedia/style.scss
@@ -31,6 +31,7 @@
 .inputRow {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
 }
 
 .inputField {
@@ -63,8 +64,8 @@
 
 .imageWrap {
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .uploadedImage {
@@ -90,8 +91,8 @@
     outline: 0;
     padding: 0;
     position: absolute;
-    top: 5px;
     right: 5px;
+    top: 5px;
     width: 40px;
 
     .icon {
@@ -107,23 +108,6 @@
   }
 }
 
-.progress {
-  background: var(--main-light-color);
-  display: block;
-  height: 2px;
-  margin: -11px 0 11px;
-  padding: 0;
-  position: relative;
-  width: 100%;
-}
-
-.progressBar {
-  background: rgba(10.6%, 81.2%, 54.1%, 0.596);
-  display: inline-block;
-  height: 100%;
-  min-width: 4%;
-}
-
 .submit {
   background: var(--main-color);
   border: 0;
@@ -139,4 +123,4 @@
   position: relative;
   text-transform: uppercase;
   transform: translateX(-50%);
-}
+}