ux for clearing command and other cleanup

src/components/MainCommand.js

@@ -72,9 +72,18 @@ class MainCommand extends Component {
     });
   };
 
+  handleInputKeyDown = e => {
+    var input = e.target.value;
+
+    if (e.key === 'Enter' && this.state.commandComplete)
+      this.handleSubmitCommand(e);
+    else if ((e.key === 'Backspace' || e.key === 'Delete') && input == '') {
+      console.log('Clearing out command');
+      this.setState(INITIAL_COMMAND_STATE);
+    }
+  };
+
   handleInputChange = e => {
-    if (e.key === 'Enter') this.handleSubmitCommand(e);
-    else {
     var newInput = e.target.value;
     var newCommand = this.state.command;
     var newCommandIcon = this.state.commandIcon;
@@ -83,10 +92,7 @@ class MainCommand extends Component {
     var newCommandProcessedData = this.state.commandProcessedData;
 
     // TODO: helper function to properly change properties
-      if (
+    if (newInput.includes('gmail') && newCommandIcon == envVars.DEFAULT_LOGO) {
-        newInput.includes('gmail') &&
-        newCommandIcon == envVars.DEFAULT_LOGO
-      ) {
       newCommand = 'gmail';
       newCommandIcon =
         'https://image.flaticon.com/icons/png/512/281/281769.png';
@@ -111,7 +117,6 @@ class MainCommand extends Component {
       commandComplete: newCommandComplete,
       commandProcessedData: newCommandProcessedData
     });
-    }
   };
 
   handleSubmitCommand = e => {
@@ -175,7 +180,7 @@ class MainCommand extends Component {
             <input
               value={commandInput}
               onChange={this.handleInputChange}
-              onKeyPress={this.handleInputChange}
+              onKeyDown={this.handleInputKeyDown}
               className={styles.searchBar}
               placeholder={commandInputPlaceholder}
             />