ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.

1 files changed, 8 insertions, 20 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 2cd0ed6e..60bf3104 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
+import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
-import { Shortcuts } from 'react-shortcuts'
 import MapLayer from '../../../containers/app/map/layers/MapLayer'
 import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer'
 import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
@@ -55,23 +55,11 @@ class MapStageComponent extends React.Component {
         this.setState({ mouseX: mousePos.x, mouseY: mousePos.y })
     }
 
-    handleShortcuts(action) {
-        switch (action) {
-            case 'MOVE_LEFT':
-                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_RIGHT':
-                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_UP':
-                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            case 'MOVE_DOWN':
-                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            default:
-                break
-        }
+    handlers = {
+        MOVE_LEFT: () => this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
     }
 
     moveWithDelta(deltaX, deltaY) {
@@ -80,7 +68,7 @@ class MapStageComponent extends React.Component {
 
     render() {
         return (
-            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
+            <HotKeys handlers={this.handlers}>
                 <Stage
                     ref={(stage) => {
                         this.stage = stage
@@ -95,7 +83,7 @@ class MapStageComponent extends React.Component {
                         <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
-            </Shortcuts>
+            </HotKeys>
         )
     }
 }