Adding map

app/actions/index.js

@@ -0,0 +1,73 @@
+import { getAPI } from '../request';
+import { API_GET_STATION_DATA } from '../urls'
+
+export const FETCH_DATA_FOR_LOCATION = 'FETCH_DATA_FOR_LOCATION';
+export const RECEIVE_DATA_FOR_LOCATION = 'RECEIVE_DATA_FOR_LOCATION';
+export const INVALIDATE_LOCATION_DATA = 'INVALIDATE_LOCATION_DATA';
+
+export const fetchDataForLocation = (southWest, northEast) => ({
+    type: FETCH_DATA_FOR_LOCATION,
+    northEast,
+    southWest
+});
+
+export const receiveDataForLocation = (data) => ({
+    type: RECEIVE_DATA_FOR_LOCATION,
+    data
+});
+
+export const invalidateLocationData = () => ({
+    type: INVALIDATE_LOCATION_DATA
+});
+
+
+export const invalidateAndFetchData = (southWest, northEast) => {
+    return (dispatch) => {
+        dispatch(invalidateLocationData());
+        dispatch(fetchDataForLocation(southWest, northEast));
+        return getAPI(API_GET_STATION_DATA, {
+            in_bbox: southWest.lat + "," + southWest.lng + "," + northEast.lat + "," + northEast.lng
+        }).then((response) => {
+                dispatch(receiveDataForLocation(
+                    [
+                        // TODO it should have data from repsonse
+                        {
+                            position: [52.229, 21.032],
+                            description: "This marker should be blue",
+                            last_metering: {
+                                pm10: null,
+                                pm25: null
+                            }
+                        },
+                        {
+                            position: [52.217, 20.987],
+                            description: "This marker should be green",
+                            last_metering: {
+                                pm10: 25,
+                                pm25: 25
+                            }
+                        },
+                        {
+                            position: [52.236, 20.976],
+                            description: "This marker should be orange",
+                            last_metering: {
+                                pm10: 75,
+                                pm25: 75
+                            }
+                        },
+                        {
+                            position: [52.259, 21.045],
+                            description: "This marker should be red",
+                            last_metering: {
+                                pm10: 200,
+                                pm25: 200
+                            }
+                        },
+                    ]
+                ))
+            }
+
+
+        );
+    }
+};

app/components/DataHolder.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class Data extends React.Component {
+    render () {
+        return (<div className="data">
+            I'm data
+        </div>)
+    }
+}

app/components/PollutionMap.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
+import {noDataIcon, okIcon, warningIcon, errorIcon} from '../helpers/mapMarkers';
+import { invalidateAndFetchData } from '../actions';
+
+
+
+export class PollutionMap extends React.Component {
+
+    constructor (props) {
+        super(props);
+
+        this.state = {
+            mapCenter: [52.229, 21.011],
+            zoom: 13,
+            lastUpdated: Date.now()
+        };
+
+        this.handleMoveEnd = this.handleMoveEnd.bind(this);
+    }
+
+    componentDidMount () {
+        this.getGeolocation();
+    }
+
+    getGeolocation () {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.updatePosition(position.coords.latitude, position.coords.longitude);
+            });
+        }
+        // TODO - some geolocation warning? Or a fallback of some kind?
+    }
+
+    updatePosition (lat, lng) {
+        const bounds = this.refs.map.leafletElement.getBounds();
+        const zoom = this.refs.map.leafletElement.getZoom();
+        this.setState({
+            mapCenter: [lat, lng],
+            zoom,
+            lastUpdated: Date.now()
+        });
+        this.props.invalidateAndFetchData(bounds.getSouthWest(), bounds.getNorthEast());
+    }
+
+    handleMoveEnd () {
+        if (Date.now() - this.state.lastUpdated > 20) {
+            const center = this.refs.map.leafletElement.getCenter();
+            this.updatePosition(center.lat, center.lng);
+        }
+    }
+
+    getMarkerIcon(pollutionLevel) {
+        if (pollutionLevel === null) {
+            return noDataIcon;
+        } else if (pollutionLevel < 50) {
+            return okIcon;
+        } else if (pollutionLevel < 150) {
+            return warningIcon;
+        } else {
+            return errorIcon;
+        }
+    }
+
+    extractMarkers(stationData) {
+        return stationData.map((markerData, iterator) => {
+            const icon = this.getMarkerIcon(markerData.last_metering.pm10);
+            return (
+                <Marker key={iterator} position={markerData.position} icon={icon}>
+                    <Popup>
+                        <span>{markerData.description}</span>
+                    </Popup>
+                </Marker>
+            );
+        });
+    }
+
+    render () {
+        const { mapCenter, zoom } = this.state;
+        const data = this.props.data.toJS();
+
+        const markers = this.extractMarkers(data);
+
+        return (
+            <Map center={mapCenter}
+                 ref='map'
+                 onMoveend={this.handleMoveEnd}
+                 zoom={zoom}>
+                {this.props.mapSpec}
+                {markers}
+            </Map>)
+    }
+}
+PollutionMap.propTypes = {
+    isFetching: React.PropTypes.bool.isRequired,
+    data: React.PropTypes.object.isRequired,
+    invalidateAndFetchData: React.PropTypes.func.isRequired,
+    mapSpec: React.PropTypes.node,
+};
+
+const mapStateToProps = (state) => ({
+    isFetching: state.get('mapData').get('isFetching'),
+    data: state.get('mapData').get('data')
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    invalidateAndFetchData: bindActionCreators(invalidateAndFetchData, dispatch)
+});
+
+export const ConnectedPollutionMap = connect(mapStateToProps, mapDispatchToProps)(PollutionMap);
+
+const PollutionMapWrapper = () => {
+
+    const mapSpec = (
+        <TileLayer
+            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        />
+    );
+
+    return (<ConnectedPollutionMap mapSpec={mapSpec}/>)
+};
+
+export default PollutionMapWrapper

app/helpers/mapMarkers.js

@@ -0,0 +1,36 @@
+import noDataImageUrl from '../../images/marker-no-data.png';
+import okImageUrl from '../../images/marker-ok.png';
+import warningImageUrl from '../../images/marker-warning.png';
+import errorImageUrl from '../../images/marker-error.png';
+import Leaflet from 'leaflet';
+import assign from 'lodash.assign';
+
+const defaultProperties = {
+    iconSize: [25, 41],
+    iconAnchor: [13, 40],
+    popupAnchor: [0, -30]
+};
+
+export const noDataIcon = Leaflet.icon(assign(
+    {
+        iconUrl: noDataImageUrl,
+    }, defaultProperties
+));
+
+export const okIcon = Leaflet.icon(assign(
+    {
+        iconUrl: okImageUrl,
+    }, defaultProperties
+));
+
+export const warningIcon = Leaflet.icon(assign(
+    {
+        iconUrl: warningImageUrl,
+    }, defaultProperties
+));
+
+export const errorIcon = Leaflet.icon(assign(
+    {
+        iconUrl: errorImageUrl,
+    }, defaultProperties
+));

app/index.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import Root from './root';
+import store from './store';
+
 
 ReactDOM.render(
-    <Root/>
+    <Provider store={store}>
+        <Root />
+    </Provider>
     , document.getElementById('root')
 );

app/reducers/index.js

@@ -0,0 +1,28 @@
+import Immutable from 'immutable';
+
+import {
+    INVALIDATE_LOCATION_DATA,
+    FETCH_DATA_FOR_LOCATION,
+    RECEIVE_DATA_FOR_LOCATION
+} from '../actions';
+
+const initialState = {
+    isFetching: false,
+    data:  Immutable.fromJS([])
+};
+
+const mapData = (state = Immutable.fromJS(initialState), action) => {
+    switch (action.type) {
+        case INVALIDATE_LOCATION_DATA:
+            return state.set('data', Immutable.fromJS([]));
+        case FETCH_DATA_FOR_LOCATION:
+            return state.set('isFetching', true);
+        case RECEIVE_DATA_FOR_LOCATION:
+            return state.set('isFetching', false)
+                .set('data', Immutable.fromJS(action.data));
+        default:
+            return state;
+    }
+};
+
+export default mapData

app/request.js

@@ -0,0 +1,15 @@
+import fetch from 'isomorphic-fetch';
+import queryString from 'query-string';
+
+export const FAKE_DOMAIN = 'http://fakedomain.com/';
+
+export const getAPI = (location, data) => {
+    return fetch(createUrl(location) + "?" + queryString.stringify(data))
+};
+
+const createUrl = (location) => {
+    if (process.env.NODE_ENV === 'test') {
+        location = FAKE_DOMAIN + location
+    }
+    return location
+};

app/root.jsx

@@ -1,9 +1,14 @@
 import React from 'react';
+import PollutionMap from './components/PollutionMap';
+import DataHolder from './components/DataHolder';
 
 class Root extends React.Component {
     render () {
         return (
-            <h1>I've been rendered with React</h1>
+            <div className="root">
+                <PollutionMap/>
+                <DataHolder/>
+            </div>
         );
     }
 }

app/store.js

@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux-immutable';
+import thunkMiddleware from 'redux-thunk';
+import Immutable from 'immutable';
+import mapData from './reducers';
+
+import { createStore, applyMiddleware } from 'redux';
+
+const initialState = Immutable.Map();
+const rootReducer = combineReducers({ mapData });
+const store = createStore(rootReducer, initialState, applyMiddleware(thunkMiddleware));
+
+export default store;

app/urls.js

@@ -0,0 +1 @@
+export const API_GET_STATION_DATA = '/station/';