Add redux and load positions

6 files changed, 68 insertions, 16 deletions

diff --git a/modern/package.json b/modern/package.json
index 0c1a1cbb..457650c9 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -10,8 +10,10 @@
     "react-container-dimensions": "^1.4.1",
     "react-dom": "^16.4.2",
     "react-leaflet": "^2.0.1",
+    "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^1.1.5"
+    "react-scripts": "^1.1.5",
+    "redux": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 3388d670..0e93ddba 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,28 +1,38 @@
 import React, { Component } from 'react';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { connect } from 'react-redux'
+
+const mapStateToProps = state => ({
+  positions: state.positions
+});
 
 class MainMap extends Component {
   state = {
-    lat: 51.505,
-    lng: -0.09,
-    zoom: 13,
+    lat: 0,
+    lng: 0,
+    zoom: 3,
   }
 
   render() {
     const position = [this.state.lat, this.state.lng]
+
+    const markers = this.props.positions.map((position) =>
+      <Marker key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }}>
+        <Popup>
+          A pretty CSS3 popup. <br /> Easily customizable.
+        </Popup>
+      </Marker>
+    );
+
     return (
       <Map style={{height: this.props.height, width: this.props.width}} center={position} zoom={this.state.zoom}>
         <TileLayer
           attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
           url="https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png" />
-        <Marker position={position}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
+        {markers}
       </Map>
     )
   }
 }
 
-export default MainMap;
+export default connect(mapStateToProps)(MainMap);
diff --git a/modern/src/SocketContoller.js b/modern/src/SocketContoller.js
index c07fcff0..fe686ed8 100644
--- a/modern/src/SocketContoller.js
+++ b/modern/src/SocketContoller.js
@@ -1,4 +1,6 @@
 import { Component } from 'react';
+import { connect } from 'react-redux';
+import { updatePositions } from './actions';
 
 class SocketController extends Component {
   connectSocket() {
@@ -12,8 +14,7 @@ class SocketController extends Component {
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.positions) {
-        // TODO update positions
-        console.log(data.positions);
+        this.props.dispatch(updatePositions(data.positions));
       }
     }
   }
@@ -27,4 +28,4 @@ class SocketController extends Component {
   }
 }
 
-export default SocketController;
+export default connect()(SocketController);
diff --git a/modern/src/actions/index.js b/modern/src/actions/index.js
new file mode 100644
index 00000000..8ef49fa8
--- /dev/null
+++ b/modern/src/actions/index.js
@@ -0,0 +1,14 @@
+export const updateDevices = devices => ({
+  type: 'UPDATE_DEVICES',
+  devices
+})
+
+export const updatePositions = positions => ({
+  type: 'UPDATE_POSITIONS',
+  positions
+});
+
+export const updateEvents = events => ({
+  type: 'UPDATE_EVENTS',
+  events
+})
diff --git a/modern/src/index.js b/modern/src/index.js
index 016a4af1..66d3b048 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux';
+import { createStore } from 'redux'
+import rootReducer from './reducers';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
+const store = createStore(rootReducer);
+
 ReactDOM.render((
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
 ), document.getElementById('root'));
 
 registerServiceWorker();
diff --git a/modern/src/reducers/index.js b/modern/src/reducers/index.js
new file mode 100644
index 00000000..b9c94771
--- /dev/null
+++ b/modern/src/reducers/index.js
@@ -0,0 +1,18 @@
+const initialState = {
+  devices: [],
+  positions: [],
+  events: []
+};
+
+function rootReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'UPDATE_POSITIONS':
+      return Object.assign({}, {
+        positions: [...state.positions, ...action.positions]
+      });
+    default:
+      return state;
+  }
+}
+
+export default rootReducer