ux for clearing command and other cleanup

src/components/MainCommand.js

@@ -72,48 +72,53 @@ class MainCommand extends Component {
     });
   };
 
-  handleInputChange = e => {
+  handleInputKeyDown = e => {
-    if (e.key === 'Enter') this.handleSubmitCommand(e);
+    var input = e.target.value;
-    else {
-      var newInput = e.target.value;
-      var newCommand = this.state.command;
-      var newCommandIcon = this.state.commandIcon;
-      var newCommandInputPlaceholder = this.state.commandInputPlaceholder;
-      var newCommandComplete = this.state.commandComplete;
-      var newCommandProcessedData = this.state.commandProcessedData;
 
-      // TODO: helper function to properly change properties
+    if (e.key === 'Enter' && this.state.commandComplete)
-      if (
+      this.handleSubmitCommand(e);
-        newInput.includes('gmail') &&
+    else if ((e.key === 'Backspace' || e.key === 'Delete') && input == '') {
-        newCommandIcon == envVars.DEFAULT_LOGO
+      console.log('Clearing out command');
-      ) {
+      this.setState(INITIAL_COMMAND_STATE);
-        newCommand = 'gmail';
-        newCommandIcon =
-          'https://image.flaticon.com/icons/png/512/281/281769.png';
-        newInput = newInput.replace('gmail', '');
-        newCommandInputPlaceholder = 'to | subject | message';
-      }
-
-      // TODO: helper function to check if input complete and show submit button
-      if (newCommand == 'gmail') {
-        const gmailSendParts = newInput.split('|');
-        if (gmailSendParts.length == 3) {
-          newCommandComplete = true;
-          newCommandProcessedData = gmailSendParts;
-        }
-      }
-
-      this.setState({
-        command: newCommand,
-        commandInput: newInput,
-        commandIcon: newCommandIcon,
-        commandInputPlaceholder: newCommandInputPlaceholder,
-        commandComplete: newCommandComplete,
-        commandProcessedData: newCommandProcessedData
-      });
     }
   };
 
+  handleInputChange = e => {
+    var newInput = e.target.value;
+    var newCommand = this.state.command;
+    var newCommandIcon = this.state.commandIcon;
+    var newCommandInputPlaceholder = this.state.commandInputPlaceholder;
+    var newCommandComplete = this.state.commandComplete;
+    var newCommandProcessedData = this.state.commandProcessedData;
+
+    // TODO: helper function to properly change properties
+    if (newInput.includes('gmail') && newCommandIcon == envVars.DEFAULT_LOGO) {
+      newCommand = 'gmail';
+      newCommandIcon =
+        'https://image.flaticon.com/icons/png/512/281/281769.png';
+      newInput = newInput.replace('gmail', '');
+      newCommandInputPlaceholder = 'to | subject | message';
+    }
+
+    // TODO: helper function to check if input complete and show submit button
+    if (newCommand == 'gmail') {
+      const gmailSendParts = newInput.split('|');
+      if (gmailSendParts.length == 3) {
+        newCommandComplete = true;
+        newCommandProcessedData = gmailSendParts;
+      }
+    }
+
+    this.setState({
+      command: newCommand,
+      commandInput: newInput,
+      commandIcon: newCommandIcon,
+      commandInputPlaceholder: newCommandInputPlaceholder,
+      commandComplete: newCommandComplete,
+      commandProcessedData: newCommandProcessedData
+    });
+  };
+
   handleSubmitCommand = e => {
     // TODO: make executing api calls modular with helpers/services
     const processedData = this.state.commandProcessedData;
@@ -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}
             />