From 2f8ae58f4f5cde892b4b6981a83a37edc1422a2c Mon Sep 17 00:00:00 2001 From: ditoaugusta Date: Tue, 24 Mar 2020 15:04:52 +0700 Subject: experiment: redux toolkit --- modern/src/DeviceList.js | 6 +++--- modern/src/MainMap.js | 9 +++++---- modern/src/SocketController.js | 8 ++++---- modern/src/index.js | 6 ++---- modern/src/store/index.js | 5 +++++ modern/src/store/modules/devices.js | 20 ++++++++++++++++++++ modern/src/store/modules/index.js | 12 ++++++++++++ modern/src/store/modules/positions.js | 16 ++++++++++++++++ 8 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 modern/src/store/index.js create mode 100644 modern/src/store/modules/devices.js create mode 100644 modern/src/store/modules/index.js create mode 100644 modern/src/store/modules/positions.js (limited to 'modern/src') 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(( 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 }; -- cgit v1.2.3 From 506fe663e2e3b9ffe9764f5c06b04524c4793534 Mon Sep 17 00:00:00 2001 From: ditoaugusta Date: Wed, 25 Mar 2020 00:24:33 +0700 Subject: delete module subfolder. edit relative path. --- modern/jsconfig.json | 4 ++-- modern/src/DeviceList.js | 3 ++- modern/src/SocketController.js | 2 +- modern/src/index.js | 2 +- modern/src/store/devices.js | 20 ++++++++++++++++++++ modern/src/store/index.js | 15 ++++++++++++--- modern/src/store/modules/devices.js | 20 -------------------- modern/src/store/modules/index.js | 12 ------------ modern/src/store/modules/positions.js | 16 ---------------- modern/src/store/positions.js | 16 ++++++++++++++++ 10 files changed, 54 insertions(+), 56 deletions(-) create mode 100644 modern/src/store/devices.js delete mode 100644 modern/src/store/modules/devices.js delete mode 100644 modern/src/store/modules/index.js delete mode 100644 modern/src/store/modules/positions.js create mode 100644 modern/src/store/positions.js (limited to 'modern/src') diff --git a/modern/jsconfig.json b/modern/jsconfig.json index ec9aa3f..a66ba28 100644 --- a/modern/jsconfig.json +++ b/modern/jsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "baseUrl": "src" + "baseUrl": "./" }, - "include": ["src"] + "include": ["src/**/*"] } \ No newline at end of file diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js index 8842800..edc6475 100644 --- a/modern/src/DeviceList.js +++ b/modern/src/DeviceList.js @@ -10,7 +10,8 @@ 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 { devicesActions } from 'store/modules'; + +import { devicesActions } from 'src/store'; const mapStateToProps = state => ({ devices: Object.values(state.devices.items) diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 10db17a..03f6e4c 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 { positionsActions, devicesActions } from 'store/modules'; +import { positionsActions, devicesActions } from 'src/store'; const displayNotifications = events => { if ("Notification" in window) { diff --git a/modern/src/index.js b/modern/src/index.js index f501a08..0c5361f 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -6,7 +6,7 @@ import { Provider } from 'react-redux'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; -import store from './store'; +import store from 'src/store'; ReactDOM.render(( 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 index c981c13..86de31a 100644 --- a/modern/src/store/index.js +++ b/modern/src/store/index.js @@ -1,5 +1,14 @@ -import { configureStore } from '@reduxjs/toolkit'; +import { combineReducers, configureStore } from '@reduxjs/toolkit'; -import { rootReducer } from './modules'; +import { devicesReducer as devices } from './devices'; +import { positionsReducer as positions } from './positions'; -export default configureStore({ reducer: rootReducer }); +const reducer = combineReducers({ + devices, + positions, +}); + +export { devicesActions } from './devices'; +export { positionsActions } from './positions'; + +export default configureStore({ reducer }); diff --git a/modern/src/store/modules/devices.js b/modern/src/store/modules/devices.js deleted file mode 100644 index 0d96e98..0000000 --- a/modern/src/store/modules/devices.js +++ /dev/null @@ -1,20 +0,0 @@ -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 deleted file mode 100644 index e2037c7..0000000 --- a/modern/src/store/modules/index.js +++ /dev/null @@ -1,12 +0,0 @@ -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 deleted file mode 100644 index 1df468c..0000000 --- a/modern/src/store/modules/positions.js +++ /dev/null @@ -1,16 +0,0 @@ -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 }; 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 }; -- cgit v1.2.3 From 4d200181a6a97c8143d0843f07d90072ef35e25c Mon Sep 17 00:00:00 2001 From: ditoaugusta Date: Wed, 25 Mar 2020 00:26:02 +0700 Subject: delete actions and reducers folder --- modern/src/actions/index.js | 19 ------------------- modern/src/reducers/index.js | 35 ----------------------------------- 2 files changed, 54 deletions(-) delete mode 100644 modern/src/actions/index.js delete mode 100644 modern/src/reducers/index.js (limited to 'modern/src') 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/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 -- cgit v1.2.3 From 37f8b1cd81614ed9281647b326a30d58123c5942 Mon Sep 17 00:00:00 2001 From: ditoaugusta Date: Wed, 25 Mar 2020 14:08:05 +0700 Subject: delete jsconfig. edit import --- modern/jsconfig.json | 6 ------ modern/src/DeviceList.js | 3 +-- modern/src/SocketController.js | 2 +- modern/src/index.js | 2 +- 4 files changed, 3 insertions(+), 10 deletions(-) delete mode 100644 modern/jsconfig.json (limited to 'modern/src') diff --git a/modern/jsconfig.json b/modern/jsconfig.json deleted file mode 100644 index a66ba28..0000000 --- a/modern/jsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./" - }, - "include": ["src/**/*"] -} \ No newline at end of file diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js index edc6475..235ba22 100644 --- a/modern/src/DeviceList.js +++ b/modern/src/DeviceList.js @@ -10,8 +10,7 @@ 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 { devicesActions } from 'src/store'; +import { devicesActions } from './store'; const mapStateToProps = state => ({ devices: Object.values(state.devices.items) diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 03f6e4c..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 { positionsActions, devicesActions } from 'src/store'; +import { positionsActions, devicesActions } from './store'; const displayNotifications = events => { if ("Notification" in window) { diff --git a/modern/src/index.js b/modern/src/index.js index 0c5361f..f501a08 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -6,7 +6,7 @@ import { Provider } from 'react-redux'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; -import store from 'src/store'; +import store from './store'; ReactDOM.render(( -- cgit v1.2.3