Push to have Ichizawasan look at it

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

@@ -2,6 +2,7 @@ import React from 'react';
 import HotkeysDetector from '../HotkeysDetector/HotkeysDetector';
 import StaffCredit from '../StaffCredit/StaffCredit';
 import MirrorMode from '../MirrorMode/MirrorMode';
+import PageCreate from '../PageHotkeys/PageCreate';
 
 export default class Hotkeys extends React.Component {
 
@@ -13,6 +14,7 @@ export default class Hotkeys extends React.Component {
     this.supportClasses = [
       StaffCredit,
       MirrorMode,
+      PageCreate,
     ];
     this.keymap = this.keymapSet();
     this.deleteRender = this.deleteRender.bind(this);

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

@@ -15,27 +15,38 @@ export default class HotkeysDetector extends React.Component {
   }
 
   check(event) {
-    this.setState({
-      userCommand: this.state.userCommand.concat(event.key),
-    });
-
-    // filters the corresponding hotkeys(keys) that the user has pressed so far
-    const tempUserCommand = this.state.userCommand;
-    this.processingCommands = this.hotkeyList.filter((value) => {
-      return value.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
-    });
-
-    // executes if there were keymap that matches what the user pressed fully.
-    if ((this.processingCommands.length === 1) && (this.hotkeyList.find(ary => ary.toString() === this.state.userCommand.toString()))) {
-      this.props.onDetected(this.processingCommands[0]);
-      this.setState({
-        userCommand: [],
-      });
+    const target = event.target;
+    // ignore when target dom is input
+    const inputPattern = /^input|textinput|textarea$/i;
+    if (inputPattern.test(target.tagName) || target.isContentEditable) {
+      return;
     }
-    else if (this.processingCommands.toString() === [].toString()) {
+
+    // don't fire when not needed
+    if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+      console.log(event.key);
       this.setState({
-        userCommand: [],
+        userCommand: this.state.userCommand.concat(event.key),
       });
+
+      // filters the corresponding hotkeys(keys) that the user has pressed so far
+      const tempUserCommand = this.state.userCommand;
+      this.processingCommands = this.hotkeyList.filter((value) => {
+        return value.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
+      });
+
+      // executes if there were keymap that matches what the user pressed fully.
+      if ((this.processingCommands.length === 1) && (this.hotkeyList.find(ary => ary.toString() === this.state.userCommand.toString()))) {
+        this.props.onDetected(this.processingCommands[0]);
+        this.setState({
+          userCommand: [],
+        });
+      }
+      else if (this.processingCommands.toString() === [].toString()) {
+        this.setState({
+          userCommand: [],
+        });
+      }
     }
     return null;
 

src/client/js/components/PageHotkeys/PageCreate.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NavigationContainer from '../../services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+
+/**
+ *
+ * @export
+ * @extends {React.Component}
+ */
+
+class PageCreate extends React.Component {
+
+  // when this is called it returns the hotkey stroke
+  static getHotkeyStroke() {
+    return ['c'];
+  }
+
+  static getComponent() {
+    return <PageCreate />;
+  }
+
+  componentDidMount() {
+    console.log(this.props);
+    return null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+      </React.Fragment>
+    );
+  }
+
+}
+const PageCreateWrapper = withUnstatedContainers(PageCreate, [NavigationContainer]);
+
+PageCreate.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default PageCreateWrapper;

src/client/js/services/NavigationContainer.js

@@ -50,22 +50,22 @@ export default class NavigationContainer extends Container {
   }
 
   initHotkeys() {
-    window.addEventListener('keydown', (event) => {
-      const target = event.target;
-
-      // ignore when target dom is input
-      const inputPattern = /^input|textinput|textarea$/i;
-      if (inputPattern.test(target.tagName) || target.isContentEditable) {
-        return;
-      }
-
-      if (event.key === 'c') {
-        // don't fire when not needed
-        if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-          this.setState({ isPageCreateModalShown: true });
-        }
-      }
-    });
+    // window.addEventListener('keydown', (event) => {
+    //   const target = event.target;
+
+    //   // ignore when target dom is input
+    //   const inputPattern = /^input|textinput|textarea$/i;
+    //   if (inputPattern.test(target.tagName) || target.isContentEditable) {
+    //     return;
+    //   }
+
+    //   if (event.key === 'c') {
+    //     // don't fire when not needed
+    //     if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+    //       this.setState({ isPageCreateModalShown: true });
+    //     }
+    //   }
+    // });
   }
 
   initDeviceSize() {