diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-07 16:09:01 +1200 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-07 16:09:01 +1200 |
commit | 72aa50650203d6db0b17de59bfd98c9d5b06e3e7 (patch) | |
tree | 0cdd9aced5356f8e32d23069cd0bec2b5c8ef484 /modern/src | |
parent | 06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa (diff) | |
download | trackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.tar.gz trackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.tar.bz2 trackermap-web-72aa50650203d6db0b17de59bfd98c9d5b06e3e7.zip |
Add redux and load positions
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/MainMap.js | 28 | ||||
-rw-r--r-- | modern/src/SocketContoller.js | 7 | ||||
-rw-r--r-- | modern/src/actions/index.js | 14 | ||||
-rw-r--r-- | modern/src/index.js | 13 | ||||
-rw-r--r-- | modern/src/reducers/index.js | 18 |
5 files changed, 65 insertions, 15 deletions
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='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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 |