aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-07 16:09:01 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-07 16:09:01 +1200
commit72aa50650203d6db0b17de59bfd98c9d5b06e3e7 (patch)
tree0cdd9aced5356f8e32d23069cd0bec2b5c8ef484
parent06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa (diff)
downloadtrackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.tar.gz
trackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.tar.bz2
trackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.zip
Add redux and load positions
-rw-r--r--modern/package.json4
-rw-r--r--modern/src/MainMap.js28
-rw-r--r--modern/src/SocketContoller.js7
-rw-r--r--modern/src/actions/index.js14
-rw-r--r--modern/src/index.js13
-rw-r--r--modern/src/reducers/index.js18
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