refactor Hotkeys

src/client/js/components/Hotkeys/Hotkeys.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import HotkeysDetector from '../HotkeysDetector/HotkeysDetector';
 import StaffCredit from '../StaffCredit/StaffCredit';
 import MirrorMode from '../MirrorMode/MirrorMode';
@@ -6,7 +6,7 @@ import ShowHotkeys from '../PageHotkeys/ShowHotkeys';
 import PageCreate from '../PageHotkeys/PageCreate';
 import PageEdit from '../PageHotkeys/PageEdit';
 
-
+// define supported components list
 const SUPPORTED_COMPONENTS = [
   StaffCredit,
   MirrorMode,
@@ -15,66 +15,47 @@ const SUPPORTED_COMPONENTS = [
   PageEdit,
 ];
 
-export default class Hotkeys extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      view: [],
-    };
-
-    this.strokeToComponentMap = {};
-    SUPPORTED_COMPONENTS.forEach((comp) => {
-      const strokes = comp.getHotkeyStrokes();
-      strokes.forEach((stroke) => {
-        this.strokeToComponentMap[stroke.toString()] = comp;
-      });
-    });
+const STROKE_TO_COMPONENT_MAP = {};
+SUPPORTED_COMPONENTS.forEach((comp) => {
+  const strokes = comp.getHotkeyStrokes();
+  strokes.forEach((stroke) => {
+    STROKE_TO_COMPONENT_MAP[stroke.toString()] = comp;
+  });
+});
 
-    // generates list of all the hotkeys command
-    this.hotkeyList = Object.keys(this.strokeToComponentMap);
-
-    // generates keymap depending on what keys were selected in this.hotkeyCommand
-    this.keymap = Array.from(new Set(this.hotkeyList));
-
-    this.deleteRender = this.deleteRender.bind(this);
-    this.onDetected = this.onDetected.bind(this);
-  }
+const Hotkeys = (props) => {
+  const [view, setView] = useState([]);
 
   /**
    * delete the instance in state.view
    */
-  deleteRender(instance) {
-    const { view } = this.state;
+  const deleteRender = (instance) => {
     const index = view.lastIndexOf(instance);
 
     const newView = view.slice(); // shallow copy
     newView.splice(index, 1);
-    this.setState({
-      view: newView,
-    });
-  }
+    setView(newView);
+  };
 
   /**
    * activates when one of the hotkey strokes gets determined from HotkeysDetector
    */
-  onDetected(strokeDetermined) {
+  const onDetected = (strokeDetermined) => {
     const key = (Math.random() * 1000).toString();
-    const Component = this.strokeToComponentMap[strokeDetermined.toString()];
-    const newComponent = <Component key={key} onDeleteRender={this.deleteRender} />;
+    const Component = STROKE_TO_COMPONENT_MAP[strokeDetermined.toString()];
+    const newComponent = <Component key={key} onDeleteRender={deleteRender} />;
+
+    const newView = view.concat(newComponent).flat();
+    setView(newView);
+  };
 
-    this.setState({
-      view: this.state.view.concat(newComponent).flat(),
-    });
-  }
+  return (
+    <>
+      <HotkeysDetector onDetected={stroke => onDetected(stroke)} hotkeyList={Object.keys(STROKE_TO_COMPONENT_MAP)} />
+      {view}
+    </>
+  );
 
-  render() {
-    return (
-      <React.Fragment>
-        <HotkeysDetector onDetected={stroke => this.onDetected(stroke)} keymap={this.keymap} hotkeyList={this.hotkeyList} />
-        {this.state.view}
-      </React.Fragment>
-    );
-  }
+};
 
-}
+export default Hotkeys;

src/client/js/components/HotkeysDetector/HotkeysDetector.jsx

@@ -65,7 +65,7 @@ export default class HotkeysDetector extends React.PureComponent {
   }
 
   render() {
-    const keyMap = { check: this.props.keymap };
+    const keyMap = { check: Array.from(new Set(this.props.hotkeyList)) };
     const handlers = { check: (event) => { return this.check(event) } };
     return (
       <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
@@ -77,6 +77,5 @@ export default class HotkeysDetector extends React.PureComponent {
 
 HotkeysDetector.propTypes = {
   onDetected: PropTypes.func.isRequired,
-  keymap: PropTypes.array.isRequired,
   hotkeyList: PropTypes.array.isRequired,
 };