From 559bf638deddfd5771e3e11b753e9b6c73d37db9 Mon Sep 17 00:00:00 2001
From: Timur Demin <me@tdem.in>
Date: Wed, 9 Oct 2019 09:27:46 +0500
Subject: [PATCH] Add hotkeys to the editor view

---
 src/views/components/taskSelect.tsx |  1 +
 src/views/editorView.tsx            | 32 +++++++++++++++++++++++++++++
 src/views/mainView.tsx              |  3 +++
 3 files changed, 36 insertions(+)

diff --git a/src/views/components/taskSelect.tsx b/src/views/components/taskSelect.tsx
index 136a446..9cdc1c7 100644
--- a/src/views/components/taskSelect.tsx
+++ b/src/views/components/taskSelect.tsx
@@ -18,6 +18,7 @@ interface Props extends HTMLAttributes<HTMLSelectElement> {
 }
 const TaskSelect: React.FC<Props> = (props) => (
     <select
+        id={props.id}
         onChange={props.onChange}
         value={props.initialValue}
         className={props.className}
diff --git a/src/views/editorView.tsx b/src/views/editorView.tsx
index 64fe96e..3b5636e 100644
--- a/src/views/editorView.tsx
+++ b/src/views/editorView.tsx
@@ -73,6 +73,35 @@ class EditorView extends React.Component<Props, State> {
                 title: strings.editor_newTaskTitle,
             });
         }
+        document.addEventListener("keydown", this.handleHotkeys);
+    };
+    componentWillUnmount = () => {
+        document.removeEventListener("keydown", this.handleHotkeys);
+    };
+    handleHotkeys = (event: KeyboardEvent) => {
+        const textInput = document.getElementById("taskTextInput");
+        const parentSelect = document.getElementById("taskParentSelect");
+        const statusBtn = document.getElementById("taskStatusButton");
+        const editFocused =
+            document.activeElement === textInput ||
+            document.activeElement === parentSelect ||
+            document.activeElement === statusBtn;
+        if (event.key === "b" && !editFocused) {
+            event.preventDefault();
+            this.props.history.push("/");
+        } else if (event.key === "s" && !editFocused) {
+            event.preventDefault();
+            this.saveChanges();
+        } else if (event.key === "d" && !editFocused && !this.state.newTask) {
+            event.preventDefault();
+            this.delete();
+        } else if (
+            event.keyCode === 27 &&
+            document.activeElement === textInput
+        ) {
+            event.preventDefault();
+            (textInput as HTMLElement).blur();
+        }
     };
     delete = () => {
         this.props.dispatch(deleteTask(this.state.task));
@@ -152,6 +181,7 @@ class EditorView extends React.Component<Props, State> {
                                 </label>
                                 <div className="control">
                                     <input
+                                        id="taskStatusButton"
                                         className="button"
                                         type="button"
                                         value={
@@ -169,6 +199,7 @@ class EditorView extends React.Component<Props, State> {
                                 </label>
                                 <div className="control">
                                     <input
+                                        id="taskTextInput"
                                         className="input"
                                         type="text"
                                         autoFocus
@@ -184,6 +215,7 @@ class EditorView extends React.Component<Props, State> {
                                 <div className="control">
                                     <div className="select">
                                         <TaskSelect
+                                            id="taskParentSelect"
                                             current={task}
                                             initialValue={task.PID}
                                             onChange={this.updateParent}
diff --git a/src/views/mainView.tsx b/src/views/mainView.tsx
index 3c49a30..ce32bf5 100644
--- a/src/views/mainView.tsx
+++ b/src/views/mainView.tsx
@@ -54,6 +54,9 @@ class MainView extends React.Component<Props, State> {
         this.refetch();
         document.addEventListener("keydown", this.handleHotkeys);
     };
+    componentWillUnmount = () => {
+        document.removeEventListener("keydown", this.handleHotkeys);
+    };
     componentDidUpdate = (prevProps: Props) => {
         if (prevProps.tasks !== this.props.tasks) {
             this.setState({