initial commit

comps/KeyShortcuts.js

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import Router from 'next/router'; 
+import getUrl from '../util/getUrl'; 
+import { getKey } from '../util/keys'; 
+import { doLogout } from '../redux/actions/userAct'; 
+
+/* - keyboard shortcuts
+  g then h -> navigate home
+  g then n -> navigate to new doc
+  g then s -> navigate to settings
+  g then l -> logout
+  e (when on doc page) -> edit doc
+  / (when on home page) -> focus search
+  ctrl/cmd + enter -> submit new doc (handled in CodeMirror component)
+*/
+const keyToUrl = {
+  72: '/',
+  78: '/new',
+  83: '/settings'
+}; 
+const keyToEl = {
+  69: { sel: '#edit', func: 'click' }, 
+  191: { sel: '.search', func: 'focus' }
+}; 
+
+class KeyShortcuts extends Component {
+  handleDown = e => {
+    const tag = e.target.tagName; 
+    if(tag === 'INPUT' || tag === 'TEXTAREA') return;
+    const key = getKey(e);
+    if(this.prevKey === 71) { // prev key was g
+      switch (key) {
+      case 72: 
+      case 78: 
+      case 83: {
+        const url = keyToUrl[key];
+        Router.push(url, getUrl(url)); 
+        break; 
+      }
+      case 76: {
+        setTimeout(doLogout, 1);  
+        break; 
+      }
+      default: break; 
+      }
+    }
+    switch (key) {
+    case 69: 
+    case 191: {
+      const { sel, func } = keyToEl[key]; 
+      const el = document.querySelector(sel);
+      if(el) setTimeout(() => el[func](), 1);
+      break; 
+    }
+    default: break;   
+    }
+    this.prevKey = key; 
+  };
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleDown); 
+  }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleDown); 
+  }
+  render = () => null
+}
+
+export default KeyShortcuts;