Merge pull request #772 from dt-ap/experiment/redux-toolkit

Experimental: Use Redux Toolkit

10 files changed, 65 insertions, 69 deletions

diff --git a/modern/package.json b/modern/package.json
index 04c1b4a..90b03d3 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
+    "@reduxjs/toolkit": "^1.2.5",
     "mapbox-gl": "^1.8.1",
     "ol": "^6.2.1",
     "ol-mapbox-style": "^6.0.1",
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index 03c5126..235ba22 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';
 
 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..bacac51 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';
 
 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/actions/index.js b/modern/src/actions/index.js
deleted file mode 100644
index 5527810..0000000
--- a/modern/src/actions/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export const updateDevices = devices => ({
-  type: 'UPDATE_DEVICES',
-  devices
-})
-
-export const updatePositions = positions => ({
-  type: 'UPDATE_POSITIONS',
-  positions
-});
-
-export const updateEvents = events => ({
-  type: 'UPDATE_EVENTS',
-  events
-})
-
-export const selectDevice = device => ({
-  type: 'SELECT_DEVICE',
-  device
-})
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/reducers/index.js b/modern/src/reducers/index.js
deleted file mode 100644
index 752a4c3..0000000
--- a/modern/src/reducers/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const initialState = {
-  devices: new Map(),
-  positions: new Map()
-};
-
-function updateMap(map, array, key) {
-  for (let value of array) {
-    map.set(value[key], value);
-  }
-  return map;
-}
-
-function rootReducer(state = initialState, action) {
-  switch (action.type) {
-    case 'UPDATE_DEVICES':
-      return Object.assign({}, {
-        ...state,
-        devices: updateMap(state.devices, action.devices, 'id')
-      });
-    case 'UPDATE_POSITIONS':
-      return Object.assign({}, {
-        ...state,
-        positions: updateMap(state.positions, action.positions, 'deviceId')
-      });
-    case 'SELECT_DEVICE':
-      return Object.assign({}, {
-        ...state,
-        selectedDevice: action.device.id
-      });
-    default:
-      return state;
-  }
-}
-
-export default rootReducer
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
new file mode 100644
index 0000000..0d96e98
--- /dev/null
+++ b/modern/src/store/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/index.js b/modern/src/store/index.js
new file mode 100644
index 0000000..86de31a
--- /dev/null
+++ b/modern/src/store/index.js
@@ -0,0 +1,14 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+
+import { devicesReducer as devices } from './devices';
+import { positionsReducer as positions } from './positions';
+
+const reducer = combineReducers({
+  devices,
+  positions,
+});
+
+export { devicesActions } from './devices';
+export { positionsActions } from './positions';
+
+export default configureStore({ reducer });
diff --git a/modern/src/store/positions.js b/modern/src/store/positions.js
new file mode 100644
index 0000000..1df468c
--- /dev/null
+++ b/modern/src/store/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 };