add shortcuts (#17)

main/index.js

@@ -41,6 +41,8 @@ app.on('ready', async () => {
     slashes: true
   })
 
+  const url = isDev ? devPath : prodPath
+
   const template = [
     {
       label: 'Application',
@@ -72,14 +74,31 @@ app.on('ready', async () => {
           selector: 'selectAll:'
         }
       ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Developer Tools',
+          accelerator: 'CmdOrCtrl+alt+I',
+          click: (item, focusedWindow) => {
+            const webContents = focusedWindow.webContents
+
+            if (webContents.isDevToolsOpened()) {
+              webContents.closeDevTools()
+            } else {
+              webContents.openDevTools({ mode: 'detach' })
+            }
+          }
+        }
+      ]
     }
   ]
 
   if (platform() !== 'win32') {
     autoUpdater()
   }
 
-  const url = isDev ? devPath : prodPath
   mainWindow.loadURL(url)
   Menu.setApplicationMenu(Menu.buildFromTemplate(template))
 })

package.json

@@ -17,26 +17,17 @@
   },
   "build": {
     "appId": "taskr",
-    "files": [
-      "**/*",
-      "!renderer",
-      "renderer/out"
-    ],
+    "files": ["**/*", "!renderer", "renderer/out"],
     "win": {
-      "target": [
-        "squirrel"
-      ],
+      "target": ["squirrel"],
       "icon": "main/static/icon.ico"
     },
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "main/static/icon.icns"
     },
     "linux": {
-      "target": [
-        "AppImage",
-        "deb"
-      ]
+      "target": ["AppImage", "deb"]
     }
   },
   "dependencies": {
@@ -65,11 +56,7 @@
     "xo": "^0.18.2"
   },
   "xo": {
-    "extends": [
-      "prettier",
-      "prettier/react",
-      "plugin:react/recommended"
-    ],
+    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
     "rules": {
       "react/no-unescaped-entities": 0,
       "react/react-in-jsx-scope": 0,
@@ -80,12 +67,8 @@
       "no-return-assign": 0,
       "import/prefer-default-export": 0
     },
-    "ignores": [
-      "node_modules"
-    ],
-    "globals": [
-      "localStorage"
-    ]
+    "ignores": ["node_modules"],
+    "globals": ["localStorage", "document"]
   },
   "lint-staged": {
     "*.js": [

renderer/layouts/page.js

@@ -1,62 +1,120 @@
 'use strict'
 
+// Native
+import { platform } from 'os'
+
+// Packages
+import { Component } from 'react'
+import Router from 'next/router'
+
+// Components
 import WinControls from '../components/win-controls'
 
 // Theme
 import { colors } from './../theme'
 
-const { platform } = require('os')
-
-const Page = ({ children }) => {
-  return (
-    <main>
-      {platform() === 'win32' ? (
-        <WinControls />
-      ) : (
-        <style global>
-          {`
-            html {
-              -webkit-app-region: drag;
-            }
-          `}
-        </style>
-      )}
-      {children}
-
-      <style jsx global>{`
-        * {
-          padding: 0;
-          margin: 0;
-          -webkit-font-smoothing: antialiased;
-          box-sizing: border-box;
-          font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
-            Roboto, 'Helvetica Neue', Arial, sans-serif;
-        }
-
-        body {
-          background-color: ${colors.black};
-          max-height: 550px;
-          overflow: hidden;
-        }
-
-        a {
-          text-decoration: none;
-        }
-
-        li {
-          list-style: none;
-        }
-
-        img {
-          max-width: 100%;
-        }
-
-        fieldset {
-          border: 0;
-        }
-      `}</style>
-    </main>
-  )
+class Page extends Component {
+  constructor() {
+    super()
+
+    this.handleKeypress = this.handleKeypress.bind(this)
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeypress, true)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeypress, true)
+  }
+
+  handleKeypress(event) {
+    if (event.keyCode === 27) {
+      return Router.push({
+        pathname: '/start',
+        query: { tab: 'Today' }
+      })
+    }
+
+    if ((event.ctrlKey || event.metaKey) && event.keyCode === 78) {
+      return Router.push('/add')
+    }
+
+    if ((event.ctrlKey || event.metaKey) && event.keyCode === 49) {
+      return Router.push({
+        pathname: '/start',
+        query: { tab: 'Today' }
+      })
+    }
+
+    if ((event.ctrlKey || event.metaKey) && event.keyCode === 50) {
+      return Router.push({
+        pathname: '/start',
+        query: { tab: 'Backlog' }
+      })
+    }
+
+    if ((event.ctrlKey || event.metaKey) && event.keyCode === 51) {
+      return Router.push({
+        pathname: '/start',
+        query: { tab: 'Done' }
+      })
+    }
+  }
+
+  render() {
+    const { children } = this.props
+
+    return (
+      <main>
+        {platform() === 'win32' ? (
+          <WinControls />
+        ) : (
+          <style global>
+            {`
+              html {
+                -webkit-app-region: drag;
+              }
+            `}
+          </style>
+        )}
+        {children}
+
+        <style jsx global>{`
+          * {
+            padding: 0;
+            margin: 0;
+            -webkit-font-smoothing: antialiased;
+            box-sizing: border-box;
+            font-family: -apple-system, system-ui, BlinkMacSystemFont,
+              'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+          }
+
+          body {
+            background-color: ${colors.black};
+            max-height: 550px;
+            overflow: hidden;
+          }
+
+          a {
+            text-decoration: none;
+          }
+
+          li {
+            list-style: none;
+          }
+
+          img {
+            max-width: 100%;
+          }
+
+          fieldset {
+            border: 0;
+          }
+        `}</style>
+      </main>
+    )
+  }
 }
 
 export default Page

renderer/pages/start.js

@@ -42,6 +42,12 @@ class Home extends Component {
     this.setState({ user, tabSelected })
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.url.query.tab !== this.props.url.query) {
+      this.selectTab(nextProps.url.query.tab)
+    }
+  }
+
   selectTab(tabSelected) {
     this.setState({ tabSelected })
   }