From e097ef1764009010524b26f19c2e5958d738ef3f Mon Sep 17 00:00:00 2001
From: Jonas Enge <jonas.enge@gmail.com>
Date: Fri, 15 Jun 2018 21:51:24 +0200
Subject: [PATCH] Small fixes (patch)

---
 components/Map.js |  6 +++---
 lib/get-data.js   |  7 ++-----
 next.config.js    |  1 +
 pages/index.js    | 24 +++++++-----------------
 pages/sone.js     | 47 +++++++++++++++++++++++++++++++++++++----------
 5 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/components/Map.js b/components/Map.js
index b99cad0..65ad6d7 100644
--- a/components/Map.js
+++ b/components/Map.js
@@ -5,7 +5,7 @@ import ReactMapGL, { Marker, Popup } from 'react-map-gl'
 import { FaCircle } from 'react-icons/lib/fa'
 import getData from '../lib/get-data'
 
-const { publicRuntimeConfig: { TOKEN } } = getConfig()
+const { publicRuntimeConfig: { TOKEN, URL_STATIONS } } = getConfig()
 
 const InfoBox = () => (
   <div className='info-box'>
@@ -74,7 +74,7 @@ class Map extends Component {
     this.resize()
     this.interval = setInterval(() => this.tick(), 30000)
     try {
-      const { stations: data } = await getData()
+      const { stations: data } = await getData(URL_STATIONS)
       this.setState({ data, error: false })
     } catch (error) {
       console.log(error)
@@ -126,7 +126,7 @@ class Map extends Component {
           <div style={{ color: '#333333', fontSize: '12px', textAlign: 'left' }}>
             {
               components && components.map(item =>
-                <Fragment><FaCircle key={item.station + item.component} style={{ color: item.color }} /> {item.component}: {item.value.toFixed(2)} {item.unit}<br /></Fragment>
+                <Fragment key={item.station + item.component}><FaCircle style={{ color: item.color }} /> {item.component}: {item.value.toFixed(2)} {item.unit}<br /></Fragment>
               )
             }
           </div>
diff --git a/lib/get-data.js b/lib/get-data.js
index b1820bf..5c9eeb4 100644
--- a/lib/get-data.js
+++ b/lib/get-data.js
@@ -1,11 +1,8 @@
-import getConfig from 'next/config'
 import axios from 'axios'
 
-const { publicRuntimeConfig: { URL } } = getConfig()
-
-export default async () => {
+export default async url => {
   try {
-    const { data } = await axios.get(URL)
+    const { data } = await axios.get(url)
     return data
   } catch (error) {
     console.log(error)
diff --git a/next.config.js b/next.config.js
index 5e93e05..481df4a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,7 @@ module.exports = {
   useFileSystemPublicRoutes: false,
   publicRuntimeConfig: {
     URL: process.env.URL || 'https://s3.eu-central-1.amazonaws.com/luftstatus/data.json',
+    URL_STATIONS: process.env.URL_STATIONS || 'https://s3.eu-central-1.amazonaws.com/luftstatus/stations.json',
     URL_AREAS: process.env.URL_AREAS || 'https://s3.eu-central-1.amazonaws.com/luftstatus/areas.json',
     TOKEN: process.env.TOKEN || '<INSERT-YOUR-MAPBOX-TOKEN>'
   },
diff --git a/pages/index.js b/pages/index.js
index 55b62a8..12027e1 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,10 @@
 import { Fragment, Component } from 'react'
 import { geolocated } from 'react-geolocated'
 import { FaCircle } from 'react-icons/lib/fa'
-import { Layout, Field, InputText, Loading, Link } from '../components/alheimsins'
+import { Layout, Loading, Link } from '../components/alheimsins'
+import getConfig from 'next/config'
 import getData from '../lib/get-data-areas'
-
-/* { coords && coords.latitude && <p>Your position: {coords.latitude} - {coords.longitude}</p> }
-  <div><Field name='Søk'><InputText name='search' value={searchQuery} onChange={this.search} /></Field></div><div />
-*/
+const { publicRuntimeConfig: { URL_AREAS } } = getConfig()
 
 const ColorDescription = () => (
   <span style={{ textAlign: 'left' }}>
@@ -22,28 +20,20 @@ class Index extends Component {
   constructor (props) {
     super(props)
     this.state = {}
-    this.search = this.search.bind(this)
   }
 
   async componentDidMount () {
     try {
-      const { areas: data } = await getData()
+      const { areas: data } = await getData(URL_AREAS)
       this.setState({ data, error: false })
     } catch (error) {
       this.setState({ error: error.message })
     }
   }
 
-  search ({ target }) {
-    const searchQuery = target.value
-    const { data } = this.state
-    const res = data.filter(item => item.area.includes(searchQuery) || item.municipality.includes(searchQuery) || item.station.includes(searchQuery))
-    this.setState({ searchQuery, data: res })
-  }
-
   render () {
-    const {data, error, searchQuery} = this.state
-    const {coords} = this.props
+    const { data, error } = this.state
+    // const { coords } = this.props
     return (
       <Layout title='luftstatus.no - Se forurensning og luftkvalitet nær deg.'>
         <h1>Luftforurensning nå</h1>
@@ -58,7 +48,7 @@ class Index extends Component {
                   <Fragment key={i}>
                     <div>
                       <FaCircle style={{ color: `${item.color}`, border: '1px #dddddd solid', borderRadius: '10px', marginRight: '10px' }} />
-                      <Link route='sone' params={{id: item.area}}><a>{item.area}</a></Link>
+                      <Link route='sone' params={{id: item.municipality.toLowerCase()}}><a>{item.municipality}</a></Link>
                     </div>
                   </Fragment>)
                 : <Loading />
diff --git a/pages/sone.js b/pages/sone.js
index 74e7e1c..bc16768 100644
--- a/pages/sone.js
+++ b/pages/sone.js
@@ -1,7 +1,39 @@
 import { Component, Fragment } from 'react'
 import getData from '../lib/get-data'
+import getConfig from 'next/config'
 import { Layout, Loading } from '../components/alheimsins'
 import { FaCircle } from 'react-icons/lib/fa'
+const { publicRuntimeConfig: { URL } } = getConfig()
+const capitalize = text => text.charAt(0).toUpperCase() + text.slice(1)
+
+const Stations = ({ data }) => (
+  <div className='grid-container'>
+    {
+      data.map((item, i) =>
+        <div key={i} style={{ textAlign: 'left' }}>
+          <h2>{item.station}</h2>
+          {
+            item.data.map((component, i) => (
+              <Fragment key={i + component.component}>
+                <FaCircle className='circle' style={{ color: `${component.color}`, border: '1px #dddddd solid', borderRadius: '10px', marginRight: '10px' }} />{component.component}
+              </Fragment>
+            ))
+          }
+        </div>
+      )
+    }
+    <style jsx>
+      {`
+        .grid-container {
+          display: grid;
+          text-align: left;
+          grid-template-columns: auto auto auto;
+          grid-gap: 10px;
+        }
+      `}
+    </style>
+  </div>
+)
 
 export default class Sone extends Component {
   constructor (props) {
@@ -15,8 +47,9 @@ export default class Sone extends Component {
   async componentDidMount () {
     try {
       const { id } = this.state
-      const { areas: data } = await getData()
-      const { stations: filterStations } = data.find(item => item.municipality === id)
+      const { areas: data } = await getData(URL)
+      const { stations: filterStations } = data.find(item => item.municipality.toLowerCase() === id)
+      console.log(filterStations)
       this.setState({ data: filterStations, error: false })
     } catch (error) {
       console.log(error)
@@ -28,16 +61,10 @@ export default class Sone extends Component {
     const { id, data, error } = this.state
     return (
       <Layout title='luftstatus.no - Se forurensning og luftkvalitet nær deg.'>
-        <h1>{ id }</h1>
+        <h1>{ capitalize(id) }</h1>
         {
           data
-            ? data.map((item, i) =>
-              <Fragment key={i}>
-                <div style={{ textAlign: 'left' }}>
-                  <FaCircle style={{ color: `${item.color}`, border: '1px #dddddd solid', borderRadius: '10px', marginRight: '10px' }} />
-                  {item.station}
-                </div>
-              </Fragment>)
+            ? <Stations data={data} />
             : error
               ? <div>{error}</div>
               : <Loading />