adding toast notification and other improvements to logic

package-lock.json

@@ -6255,6 +6255,14 @@
         "warning": "^4.0.1"
       }
     },
+    "react-toasts": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-toasts/-/react-toasts-3.0.3.tgz",
+      "integrity": "sha512-af85o0jS05A1SuurACOnBSRlLf2krPeXMPXL/67qnB1PjoMI8QjKXdGcxkELeNw1DMp8LVvxqdGnP5jiueTlEg==",
+      "requires": {
+        "watchable-stores": "^2.0.2"
+      }
+    },
     "react-transition-group": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.2.tgz",
@@ -7749,6 +7757,11 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "watchable-stores": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/watchable-stores/-/watchable-stores-2.0.2.tgz",
+      "integrity": "sha512-xKzypK+hG6gaZFcmiEvdazbD9Z8+hIlr+frC7Ne4N4LI0zvuPaT5uPrhn2RMxhiwaLVw70rctes+rPUTvwhPNg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -29,6 +29,7 @@
 		"react-dom": "^16.7.0",
 		"react-google-login": "^5.0.4",
 		"react-router-dom": "^4.3.1",
+		"react-toasts": "^3.0.3",
 		"redux-persist": "^5.10.0"
 	},
 	"devDependencies": {

src/components/MainCommand.js

@@ -5,9 +5,20 @@ const envVars = require('config');
 
 import { GoogleLogin } from 'react-google-login';
 
-import { Button } from '@material-ui/core';
+import { Button, Card, Typography } from '@material-ui/core';
 import { Send } from '@material-ui/icons';
 
+import { ToastsContainer, ToastsStore } from 'react-toasts';
+
+// Old notification elem for manual use
+// const notification = (
+//   <Card id="notification" className={styles.notificationCont}>
+//     <Typography variant="overline" color="inherit">
+//       Successfully executed command!
+//     </Typography>
+//   </Card>
+// );
+
 const INITIAL_COMMAND_STATE = {
   command: 'google',
   commandInput: '',
@@ -65,6 +76,10 @@ class MainCommand extends Component {
     });
   }
 
+  componentDidMount() {
+    this.mainBar.focus();
+  }
+
   googleSignIn = async e => {
     await console.log('Going through sign in flow');
     const signInResponse = await gapi.auth2.getAuthInstance().signIn();
@@ -107,25 +122,34 @@ class MainCommand extends Component {
       newInput = newInput.replace('gmail', '');
       newCommandInputPlaceholder = 'to | subject | message';
       newNeedGoogleAuth = true;
-    }
-
-    if (newCommand == 'google') {
-      newCommand = 'google';
-      newCommandComplete = true;
-      newCommandInputPlaceholder = 'search for anything';
-    }
-
-    if (newInput.includes('utube')) {
+    } else if (
+      newInput.includes('utube') &&
+      newCommandIcon == envVars.DEFAULT_LOGO
+    ) {
       newCommand = 'utube';
       newCommandIcon =
         'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png';
       newInput = newInput.replace('utube', '');
       newCommandComplete = true;
       newCommandInputPlaceholder = 'search for any video';
+    } else if (
+      newInput.includes('red') &&
+      newCommandIcon == envVars.DEFAULT_LOGO
+    ) {
+      newCommand = 'reddit';
+      newCommandIcon =
+        'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png';
+      newInput = newInput.replace('utube', '');
+      newCommandComplete = true;
+      newCommandInputPlaceholder = 'search for any video';
+    } else if (newCommand == 'google') {
+      newCommand = 'google';
+      newCommandComplete = true;
+      newCommandInputPlaceholder = 'search for anything';
     }
 
-    // TODO: helper function to check if input complete and show submit button
     if (newCommand == 'gmail') {
+      // TODO: helper function to check if input complete for current command and show submit button
       const gmailSendParts = newInput.split('|');
       if (gmailSendParts.length == 3) {
         newCommandComplete = true;
@@ -191,7 +215,10 @@ class MainCommand extends Component {
       );
     }
 
-    this.setState(INITIAL_COMMAND_STATE, () => console.log(this.state));
+    this.setState(INITIAL_COMMAND_STATE, () => {
+      console.log(this.state);
+      ToastsStore.success('Successfully executed command!');
+    });
   };
 
   render() {
@@ -222,6 +249,9 @@ class MainCommand extends Component {
         <React.Fragment>
           <img className={styles.commandIcon} src={commandIcon} />
           <input
+            ref={input => {
+              this.mainBar = input;
+            }}
             value={commandInput}
             onChange={this.handleInputChange}
             onKeyDown={this.handleInputKeyDown}
@@ -242,6 +272,8 @@ class MainCommand extends Component {
             <Send />
           </Button>
         )}
+
+        <ToastsContainer store={ToastsStore} />
       </div>
     );
   }

src/components/root.less

@@ -112,12 +112,22 @@
     top: 0;
     width: 100%;
     height: 100%;
-    opacity: 0.5;
+    opacity: 0.3;
 
     z-index: -1;
   }
 }
 
+.notificationCont {
+  background-color: #4bb543 !important;
+  color: white;
+  padding: 1em;
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 1em;
+}
+
 .hidden {
   display: none !important;
 }