Adds stasjon page

pages/sone.js

@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import getData from '../lib/get-data'
 import getConfig from 'next/config'
-import { Layout } from '../components/alheimsins'
+import { Layout, Link } from '../components/alheimsins'
 import { FaCircle } from 'react-icons/lib/fa'
 const { publicRuntimeConfig: { URL } } = getConfig()
 const capitalize = text => text ? text.charAt(0).toUpperCase() + text.slice(1) : false
@@ -11,7 +11,13 @@ const Stations = ({ data }) => (
     {
       data.map((item, i) =>
         <div key={i} style={{ textAlign: 'left' }}>
-          <h2>{item.station}</h2>
+          <h2>
+            {
+              item.eoi
+                ? <Link route='stasjon' params={{ id: item.eoi }}><a>{item.station}</a></Link>
+                : item.station
+            }
+          </h2>
           {
             item.data.map((component, i) => (
               <Fragment key={i + component.component}>
@@ -48,7 +54,6 @@ const Sone = ({ id, data, error }) => (
 
 Sone.getInitialProps = async ({ query }) => {
   const id = query && query.id ? query.id : false
-  console.log(id)
   let data, error
   try {
     const { areas } = await getData(URL)

pages/stasjon.js

@@ -0,0 +1,46 @@
+import { Fragment } from 'react'
+import getData from '../lib/get-data'
+import getConfig from 'next/config'
+import { Layout } from '../components/alheimsins'
+import { FaCircle } from 'react-icons/lib/fa'
+const { publicRuntimeConfig: { URL_STATIONS } } = getConfig()
+
+const Station = ({ data }) => (
+  <Layout title='luftstatus.no - Se forurensning og luftkvalitet nær deg.'>
+    <div>
+      <h2>{data.station}</h2>
+      {
+        data.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>
+        ))
+      }
+      <style jsx>
+        {`
+        .grid-container {
+          display: grid;
+          text-align: left;
+          grid-template-columns: auto auto auto;
+          grid-gap: 10px;
+        }
+      `}
+      </style>
+    </div>
+  </Layout>
+)
+
+Station.getInitialProps = async ({ query }) => {
+  const id = query && query.id ? query.id : false
+  let data, error
+  try {
+    const { stations } = await getData(URL_STATIONS)
+    data = stations.find(item => item.eoi === id)
+    console.log(data)
+  } catch (err) {
+    error = error.message
+  }
+  return { data, error }
+}
+
+export default Station

routes.js

@@ -3,6 +3,7 @@ const routes = module.exports = require('next-routes')()
 routes
   .add('index', '/')
   .add('sone', '/sone/:id')
+  .add('stasjon', '/stasjon/:id')
   .add('info')
   .add('kart')
   .add('kontakt')