Merge pull request #35 from webgem-xyz/Media

✨  Added Media Component
✨  Added map & remove measurement button to Measurement Component
✨  Added MeasurementRow Component ( thx @Coen )

🎨  Made code of the Measurement Component DRY by moving measurementRow to component (#17 #18 #19 #20 #21 #22) ( Thx @Coen )
🎨  Changed color values from #7e7e7e and #fafafa to use var(--var-name)
🎨  Updated Media Component to use measurementRow (DRY)
🎨  Fixed code styling issues ( #25 #27 #28 #30 ) ( Thx @Coen )
🎨  Changed readme.md to README.md

🐛  Fixed items being in the wrong order ( #41 )
🐛  Quickfix for issues ( #46 #47 )
🐛  Moved syncState out of components in to src/components/home.js ( #31 ) ( This fix has been temporarily disabled due to #46 & #47 )
🐛  Changed font-weight: 900; to font-weight: 700; as the font does not support a font-weight of 900.
🐛  Changed Media Component from path="/media/:mediaId" to path="/med/:mediaId" so the Item Component actually sends you to the correct view when u click a media measurement.

📝  Added measurementRow to README
📝  Added removeMeasurement function as accepted prop for the Measurement Component
📝  Fixed spelling mistakes in ISSUE_TEMPLATE.md
📝  Updated README to add the right props to the Media Component
📝  Fixed spelling mistake in CHANGELOG.md on line 40

❗️ This build contains temporarily fixes. These issues should be resolved properly as soon as possible.

Thx @Coen for a fixing a lot of the issues in the Measurement Component.
Thx @ThijsvanRijn for reviewing the changes made.

Author: Yannick

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "uva-reactnativeapp"
+  }
+}

.gitignore

@@ -1,2 +1,3 @@
 node_modules/.bin/acorn
-node_modules/
+node_modules/
+build/

CHANGELOG.md

@@ -3,6 +3,43 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [0.0.7] - 2018-01-18
+### Added
+- Map to measurement page.
+- Remove button to view measurement.
+
+### Fixed
+- A quickfix for #46 and #47 (Still needs proper fixing!) ❗
+- Fixed items being in the wrong order in the Overview Component [#41](https://github.com/webgem-xyz/UVA-React/issues/41)
+
+
+## [0.0.6] - 2018-01-18
+### Added
+- MeasurementRow Component to README [#44](https://github.com/webgem-xyz/UVA-React/issues/44)
+
+### Fixed
+- Spelling mistakes in ISSUE_TEMPLATE.md
+- Moved syncState out of Measurement Component in to Home.js [#31](https://github.com/webgem-xyz/UVA-React/issues/31)
+
+### Changed
+- readme.md to README.md (The standard).
+- Updated Media Component in README to show the proper props it accepts.
+
+## [0.0.5] - 2018-01-18
+### Changed
+- Made code more DRY
+- Updated Media to use MeasurementRow Component
+- Changed color values to the global variable
+- Fixed font-weight 900 to 700
+
+## [0.0.4] - 2018-01-18
+### Added
+- Media component. (Still needs the new measurement component)
+
+### Changed
+- Item component now uses measurement type to determine if it should send it to /mes/:measurementId or /med/:mediaId
+- Router path changed from "/media/:mediaId" to "/med/:mediaId"
+
 ## [0.0.3] - 2018-01-18
 ### Fixed
 - Spelling mistake in README (line 7)

ISSUE_TEMPLATE.md

@@ -1,19 +1,19 @@
 Short description of what the issue is, what we should change.
 
 ## How we do it now
-- 
+-
 -
 
 ## Why does this need improving.
-- 
-- 
+-
+-
 
 ## What would we need to change.
 -
-- 
+-
 
 ## Which files are affected.
-- src/components/addButtton/index.js (example) 
+- src/components/addButtton/index.js (example)
 -
 
 ## Error messages if available
@@ -26,4 +26,4 @@ Short description of what the issue is, what we should change.
 -
 
 ## Estimated time needed to change.
-Fixing this issue will proberly take arround .. to .. hours
+Fixing this issue will probably take around .. to .. hours

firebase.json

@@ -0,0 +1,114 @@
+{
+  "rewrites": [
+    {
+      "source": "**",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "**",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=3600, no-cache"
+        },
+        {
+          "key": "Access-Control-Max-Age",
+          "value": "600"
+        }
+      ]
+    },
+    {
+      "source": "/sw.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "private, no-cache"
+        }
+      ]
+    },
+    {
+      "source": "**/*.chunk.*.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000"
+        }
+      ]
+    },
+    {
+      "source": "/",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style"
+        }
+      ]
+    },
+    {
+      "source": "/account",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-account.chunk.14754.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/addMedia",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-addMedia.chunk.0993d.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/overview",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-overview.chunk.ac036.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/login",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-login.chunk.b8935.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/add",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-add.chunk.d9d39.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/measurement",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-measurement.chunk.b0abb.js>; rel=preload; as=script"
+        }
+      ]
+    },
+    {
+      "source": "/Media",
+      "headers": [
+        {
+          "key": "Link",
+          "value": "</bundle.80def.js>; rel=preload; as=script, </style.a240d.css>; rel=preload; as=style, </route-Media.chunk.53605.js>; rel=preload; as=script"
+        }
+      ]
+    }
+  ],
+  "public": "build"
+}

package.json

@@ -43,6 +43,7 @@
     "preact-router": "^2.6.0",
     "re-base": "^3.2.1",
     "react-firebase-file-uploader": "^2.4.1",
+    "react-gmaps": "^1.7.0",
     "react-router": "^4.2.0",
     "recharts": "^1.0.0-beta.9"
   }

readme.md

@@ -58,6 +58,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 * [Item Component](#item-component)
 * [Login Component](#login-component)
 * [Measurement Component](#measurement-component)
+* [MeasurementRow Component](#measurement-component)
 * [Media Component](#media-component)
 * [Overview Component](#overview-component)
 * [ProgressBar Component](#progressbar-component)
@@ -337,10 +338,54 @@ Attribute | Type | Usage
 Signin | function | The function that handles the login.
 
 ## Measurement Component
+### Usage
 The Measurement component consists of the following
-* Information from the Measurements
-* A Delete button
+* Header
+  * Back Arrow
+  * View Measurement
 * Map focused at the coordinates from the measurements.
+* List of data (label - value)
+  * Longitude
+  * Latitude
+  * Date
+  * Acidity (pH)
+  * Salinity (PSU)
+  * Tempature
+* A button to delete the measurements
+
+### Location
+The Measurement Component is located at
+```
+  src/routes/measurement/
+```
+### Attributes
+The Measurements Component accepts the following attributes
+
+Attribute | Type | Usage
+--- | --- | ---
+measurementId | string | Used to get the measurement that was selected.
+measurements | object | Object of al the meaurements, reduced to the measurement the user is currently being viewed.
+removeMeasurement | func | Function that handles deleting the measurement from the database.
+
+## MeasurementRow Component
+### Usage
+The MeasurementRow Component consists of the following
+* Wrapper row
+  * Label
+  * Value
+
+### Location
+The MeasurementRow Component is located at
+```
+  src/components/measurementRow/
+```
+### Attributes
+The MeasurementsRow Component accepts the following attributes
+
+Attribute | Type | Usage
+--- | --- | ---
+label | string | What should the label be of the data.
+value | string | The value of the measurementRow.
 
 ## Media Component
 ### Usage
@@ -367,8 +412,8 @@ The Media Component accepts the following attributes
 
 Attribute | Type | Usage
 --- | --- | ---
-Uid | string | Used to get the media of the user.
 mediaId | string | Used to get the media that was selected.
+measurements | object | Passes down all measurements, Media Component reduces the data to what the user is trying to view.
 
 
 ## Overview Component

src/components/app.js

@@ -60,7 +60,7 @@ export default class App extends Component {
           <Home path="/mes/:measurementId" uid={this.state.uid} />
           <Home path="/add" uid={this.state.uid} />
           <Home path="/addMedia" uid={this.state.uid} />
-          <Home path="/media/:mediaId" uid={this.state.uid} />
+          <Home path="/med/:mediaId" uid={this.state.uid} />
           <Home
             path="/account"
             uid={this.state.uid}

src/components/home/index.js

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 import { PropTypes } from 'preact-compat';
 import { Router, route } from 'preact-router';
 import moment from 'moment';
@@ -19,6 +19,7 @@ export default class Home extends Component {
     super(props);
 
     this.addMeasurement = this.addMeasurement.bind(this);
+    this.removeMeasurement = this.removeMeasurement.bind(this);
 
     this.state = {
       measurements: {},
@@ -50,6 +51,14 @@ export default class Home extends Component {
     route('/');
   }
 
+  removeMeasurement = (e, key) => {
+    e.preventDefault();
+    const measurements = { ...this.state.measurements };
+    measurements[key] = null;
+    this.setState({ measurements });
+    route('/');
+  };
+
   handleRoute = e => {
     this.currentUrl = e.url;
   };
@@ -62,6 +71,7 @@ export default class Home extends Component {
           path="/mes/:measurementId"
           uid={this.props.uid}
           measurements={this.state.measurements}
+          removeMeasurement={this.removeMeasurement}
         />
         <Add
           path="/add"
@@ -74,7 +84,7 @@ export default class Home extends Component {
           measurements={this.state.measurements}
           addMeasurement={this.addMeasurement}
         />
-        <Media path="/media/:mediaId" uid={this.props.uid} />
+        <Media path="/med/:mediaId" uid={this.props.uid} measurements={this.state.measurements} />
         <Account
           path="/account"
           uid={this.props.uid}

src/components/item/index.js

@@ -28,7 +28,7 @@ export default class Item extends Component {
   render() {
     const details = this.props.details;
     return (
-      <Link href={`/mes/${this.props.index}`} class={style.link}>
+      <Link href={`/${details.type}/${this.props.index}`} class={style.link}>
         <div class={style.itemLinkWrap}>
           <img src={defineImgSrc(details)} alt={defineImgAlt(details)} height="20" class={style.icon} />
           <p class={style.date}>{details.date}</p>