Add event emitter... but didn't even need to use it, for some shortcut keys.

Author: hotdang-ca

src/Components/AppDrawer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 
 import Drawer from '@material-ui/core/Drawer';
 import MenuOpen from '@material-ui/icons/MenuOpen';
@@ -11,13 +11,34 @@ interface IDrawerState {
     drawerOpen: boolean;
 }
 
-export class AppDrawer extends React.Component<any, IDrawerState> {
+class AppDrawerComponent extends React.Component<any, IDrawerState> {
+
     constructor(p: any, s: IDrawerState) {
         super(p,s);
 
         this.state = {
             drawerOpen: false,
         };
+
+        window.onkeypress = (e: KeyboardEvent) => {
+            if (e.ctrlKey) {
+                const { history } = this.props;
+
+                switch (e.key) {
+                    case 'd':
+                        history.push('/');
+                        break;
+                    case 'r':
+                        history.push('/records');
+                        break;
+                    case 'p':
+                        history.push('/reports');
+                        break;
+                    default:
+                        return false;
+                }
+            }
+        }
     }
 
     private _toggleDrawer = (): void => {
@@ -39,23 +60,28 @@ export class AppDrawer extends React.Component<any, IDrawerState> {
                         <Typography
                             variant="h3"
                         >
-                            <Link onClick={this._toggleDrawer} to="/">Dashboard</Link>
+                            <Link onClick={this._toggleDrawer} to="/">Dashboard</Link><br/>
+                            <span className="shortcut-key">CTRL</span><span className="shortcut-plus">+</span><span className="shortcut-key">D</span>
                         </Typography>
 
                         <Typography
                             variant="h3"
                         >
-                            <Link onClick={this._toggleDrawer} to="/records">Records</Link>
+                            <Link onClick={this._toggleDrawer} to="/records">Records</Link><br/>
+                            <span className="shortcut-key">CTRL</span><span className="shortcut-plus">+</span><span className="shortcut-key">R</span>
                         </Typography>
 
                         <Typography
                             variant="h3"
                         >
-                            <Link onClick={this._toggleDrawer} to="/reports">Reports</Link>
+                            <Link onClick={this._toggleDrawer} to="/reports">Reports</Link><br/>
+                            <span className="shortcut-key">CTRL</span><span className="shortcut-plus">+</span><span className="shortcut-key">P</span>
                         </Typography>
                     </div>
                 </Drawer>
             </>
         );
     }
-}
+}
+
+export const AppDrawer = withRouter(AppDrawerComponent);

src/Components/app-drawer.css

@@ -1,5 +1,5 @@
 .drawer {
-    width: 30vw;
+    min-width: 30vw;
     display: flex;
     flex-direction: column;
     align-items: left;
@@ -16,6 +16,7 @@
 .drawer a {
     text-decoration: none;
     color: white;
+    padding-right: 1rem;
 }
 
 .drawer a:visited {
@@ -32,4 +33,23 @@
     position: absolute;
     left: 0;
     top: 0;
+}
+
+.shortcut-plus {
+    font-size: 14px;
+    line-height: 3rem;
+    vertical-align: middle;
+    padding: 8px;
+}
+.shortcut-key {
+    font-size: 8px;
+    line-height: 3rem;
+    padding: 8px 12px;
+    min-width: 2rem;
+    vertical-align: middle;
+    border: 1px solid rgb(145, 145, 145);
+    border-radius: 4px;
+    background-color: rgb(198, 198, 198);
+    color: black;
+    font-weight: 500;
 }

src/Utils/index.jsx

@@ -0,0 +1,19 @@
+const EventEmitter = {
+    events: [],
+    dispatch: (event, data) => {
+        if (!this.events[event]) {
+            return;
+        }
+        this.events[event].forEach(cb => cb(data));
+    },
+    subscribe: (event, cb) => {
+        if (!this.events[event]) {
+            return;
+        }
+        this.events[event].push(cb);
+    }
+}
+
+module.exports = {
+    EventEmitter,
+};

src/index.css

@@ -21,5 +21,4 @@ body {
 .full-size-text {
   font-weight: 100;
   font-size: 4rem;
-  
 }