aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorditoaugusta <dt_ap@ymail.com>2020-03-24 15:04:52 +0700
committerditoaugusta <dt_ap@ymail.com>2020-03-24 15:04:52 +0700
commit2f8ae58f4f5cde892b4b6981a83a37edc1422a2c (patch)
treef9354abc103d4dde4f98effbdf46739fefe4ac1f /modern/src
parent78d69f50595e058a08f3eaaa47fd7c3745fa1266 (diff)
downloadetbsa-traccar-web-2f8ae58f4f5cde892b4b6981a83a37edc1422a2c.tar.gz
etbsa-traccar-web-2f8ae58f4f5cde892b4b6981a83a37edc1422a2c.tar.bz2
etbsa-traccar-web-2f8ae58f4f5cde892b4b6981a83a37edc1422a2c.zip
experiment: redux toolkit
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/DeviceList.js6
-rw-r--r--modern/src/MainMap.js9
-rw-r--r--modern/src/SocketController.js8
-rw-r--r--modern/src/index.js6
-rw-r--r--modern/src/store/index.js5
-rw-r--r--modern/src/store/modules/devices.js20
-rw-r--r--modern/src/store/modules/index.js12
-rw-r--r--modern/src/store/modules/positions.js16
8 files changed, 67 insertions, 15 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index 03c5126..8842800 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -10,15 +10,15 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Divider from '@material-ui/core/Divider';
-import { selectDevice } from './actions';
+import { devicesActions } from 'store/modules';
const mapStateToProps = state => ({
- devices: Array.from(state.devices.values())
+ devices: Object.values(state.devices.items)
});
class DeviceList extends Component {
handleClick(device) {
- this.props.dispatch(selectDevice(device));
+ this.props.dispatch(devicesActions.select(device));
}
render() {
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 35b933b..01230da 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
import mapboxgl from 'mapbox-gl';
const calculateMapCenter = (state) => {
- if (state.selectedDevice) {
- const position = state.positions.get(state.selectedDevice);
+ if (state.devices.selectedId) {
+ const position = state.positions.items[state.devices.selectedId] || null;
if (position) {
return [position.longitude, position.latitude];
}
@@ -14,8 +14,9 @@ const calculateMapCenter = (state) => {
}
const mapFeatureProperties = (state, position) => {
+ const device = state.devices.items[position.deviceId] || null;
return {
- name: state.devices.get(position.deviceId).name
+ name: device ? device.name : ''
}
}
@@ -23,7 +24,7 @@ const mapStateToProps = state => ({
mapCenter: calculateMapCenter(state),
data: {
type: 'FeatureCollection',
- features: Array.from(state.positions.values()).map(position => ({
+ features: Object.values(state.positions.items).map(position => ({
type: 'Feature',
geometry: {
type: 'Point',
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index b89845f..10db17a 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,6 +1,6 @@
import { Component } from 'react';
import { connect } from 'react-redux';
-import { updateDevices, updatePositions } from './actions';
+import { positionsActions, devicesActions } from 'store/modules';
const displayNotifications = events => {
if ("Notification" in window) {
@@ -31,10 +31,10 @@ class SocketController extends Component {
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.devices) {
- this.props.dispatch(updateDevices(data.devices));
+ this.props.dispatch(devicesActions.update(data.devices));
}
if (data.positions) {
- this.props.dispatch(updatePositions(data.positions));
+ this.props.dispatch(positionsActions.update(data.positions));
}
if (data.events) {
displayNotifications(data.events);
@@ -46,7 +46,7 @@ class SocketController extends Component {
fetch('/api/devices').then(response => {
if (response.ok) {
response.json().then(devices => {
- this.props.dispatch(updateDevices(devices));
+ this.props.dispatch(devicesActions.update(devices));
});
}
this.connectSocket();
diff --git a/modern/src/index.js b/modern/src/index.js
index 527a4d6..f501a08 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -3,12 +3,10 @@ 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);
+import store from './store';
ReactDOM.render((
<Provider store={store}>
diff --git a/modern/src/store/index.js b/modern/src/store/index.js
new file mode 100644
index 0000000..c981c13
--- /dev/null
+++ b/modern/src/store/index.js
@@ -0,0 +1,5 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import { rootReducer } from './modules';
+
+export default configureStore({ reducer: rootReducer });
diff --git a/modern/src/store/modules/devices.js b/modern/src/store/modules/devices.js
new file mode 100644
index 0000000..0d96e98
--- /dev/null
+++ b/modern/src/store/modules/devices.js
@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const { reducer, actions } = createSlice({
+ name: 'devices',
+ initialState: {
+ items: {},
+ selectedId: null
+ },
+ reducers: {
+ update(state, action) {
+ action.payload.forEach(item => state.items[item['id']] = item);
+ },
+ select(state, action) {
+ state.selectedId = action.payload.id;
+ }
+ }
+});
+
+export { actions as devicesActions };
+export { reducer as devicesReducer };
diff --git a/modern/src/store/modules/index.js b/modern/src/store/modules/index.js
new file mode 100644
index 0000000..e2037c7
--- /dev/null
+++ b/modern/src/store/modules/index.js
@@ -0,0 +1,12 @@
+import { combineReducers } from '@reduxjs/toolkit';
+
+import { devicesReducer as devices } from './devices';
+import { positionsReducer as positions } from './positions';
+
+export const rootReducer = combineReducers({
+ devices,
+ positions,
+});
+
+export { devicesActions } from './devices';
+export { positionsActions } from './positions';
diff --git a/modern/src/store/modules/positions.js b/modern/src/store/modules/positions.js
new file mode 100644
index 0000000..1df468c
--- /dev/null
+++ b/modern/src/store/modules/positions.js
@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const { reducer, actions } = createSlice({
+ name: 'positions',
+ initialState: {
+ items: {},
+ },
+ reducers: {
+ update(state, action) {
+ action.payload.forEach(item => state.items[item['deviceId']] = item);
+ },
+ }
+});
+
+export { actions as positionsActions };
+export { reducer as positionsReducer };