adding in all logic for gmail command to work and some ui changes

src/components/AvailableCommandsIcons.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './root.less';
+
+const envVars = require('config');
+
+const AvailableCommandsIcons = props => {
+  return (
+    <div className={styles.availableCommandsIconsCont}>
+      {/* <img className={styles.icon} src={envVars.DEFAULT_LOGO} /> */}
+      <img
+        className={styles.icon}
+        src={'https://image.flaticon.com/icons/png/512/281/281769.png'}
+      />
+      <img
+        className={styles.icon}
+        src={
+          'https://a.slack-edge.com/4a5c4/marketing/img/meta/slack_hash_256.png'
+        }
+      />
+      <img
+        className={styles.icon}
+        src={
+          'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png'
+        }
+      />
+      <img
+        className={styles.icon}
+        src={
+          'https://travelhoney.com/wp-content/uploads/2017/03/google-maps-for-ios-8-1.png'
+        }
+      />
+
+      <img
+        className={styles.icon}
+        src={
+          'https://electronjs.org/app-img/android-messages/android-messages-icon-128.png'
+        }
+      />
+    </div>
+  );
+};
+
+export default AvailableCommandsIcons;

src/components/MainCommand.js

@@ -5,111 +5,192 @@ const envVars = require('config');
 
 import { GoogleLogin } from 'react-google-login';
 
-class MainCommand extends Component {
+import { Button } from '@material-ui/core';
-  state = {
+import { Send } from '@material-ui/icons';
-    googleAccessToken: null
-  };
 
-  initClient = () => {
+const INITIAL_STATE = {
-    gapi.client
+  googleAccessToken: null,
-      .init({
+  googleAuthUser: null,
+  command: 'default',
+  commandInput: '',
+  commandIcon: envVars.DEFAULT_LOGO,
+  commandInputPlaceholder: 'Do Everything You Want',
+  commandComplete: false,
+  commandProcessedData: null
+};
+
+class MainCommand extends Component {
+  state = INITIAL_STATE;
+
+  componentWillMount() {
+    gapi.load('client:auth2', () => {
+      gapi.client.init({
         apiKey: envVars.GOOGLE_API_KEY,
         clientId: envVars.OAUTH2_CLIENT_ID,
         discoveryDocs: [
           'https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest'
         ],
         scope: 'profile email https://mail.google.com/'
-      })
+      });
-      .then(
+      // .then(
-        function() {
+      //   function() {
-          // Listen for sign-in state changes.
+      //     console.log('properly initialized gapi and client and auth2');
-          console.log(gapi.auth2.getAuthInstance());
+      //     gapi.auth2
-        },
+      //       .getAuthInstance()
-        function(error) {
+      //       .signIn()
-          appendPre(JSON.stringify(error, null, 2));
+      //       .then(() => {
-        }
+      //         // getting all messages example
-      );
+      //         // var messageRequest = gapi.client.gmail.users.messages.get({
-  };
+      //         //   userId: 'me',
+      //         //   id: '16b854db03a69932',
+      //         //   format: 'full'
+      //         // });
+      //         // messageRequest.execute(function(response) {
+      //         //   console.log(response);
+      //         // });
 
-  componentWillMount() {
+      //       });
-    gapi.load('client:auth2', () => {
+      //   },
-      gapi.client
+      //   function(error) {
-        .init({
+      //     appendPre(JSON.stringify(error, null, 2));
-          apiKey: envVars.GOOGLE_API_KEY,
+      //   }
-          clientId: envVars.OAUTH2_CLIENT_ID,
+      // );
-          discoveryDocs: [
-            'https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest'
-          ],
-          scope: 'profile email https://mail.google.com/'
-        })
-        .then(
-          function() {
-            console.log('properly initialized gapi and client and auth2');
-            gapi.auth2
-              .getAuthInstance()
-              .signIn()
-              .then(() => {
-                gapi.client.gmail.users.labels
-                  .list({
-                    userId: 'me'
-                  })
-                  .then(function(response) {
-                    var labels = response.result.labels;
-                    console.log(labels);
-                  });
-
-                // var messageRequest = gapi.client.gmail.users.messages.get({
-                //   userId: 'me',
-                //   id: '16b854db03a69932',
-                //   format: 'full'
-                // });
-                // messageRequest.execute(function(response) {
-                //   console.log(response);
-                // });
-                gapi.client.gmail.users.messages
-                  .send({
-                    userId: 'me',
-                    requestBody: {
-                      // same response with any of these
-                      raw: reallyEncodedMessage
-                      // raw: encodedMessage
-                      // raw: message
-                    }
-                  })
-                  .then(function() {
-                    console.log('done!');
-                  });
-              });
-          },
-          function(error) {
-            appendPre(JSON.stringify(error, null, 2));
-          }
-        );
     });
   }
 
+  googleSignIn = async e => {
+    await console.log('Going through sign in flow');
+    const signInResponse = await gapi.auth2.getAuthInstance().signIn();
+
+    await console.log('Sign in response', signInResponse);
+
+    this.setState({
+      googleAccessToken: signInResponse.Zi.access_token,
+      googleAuthUser: signInResponse.w3
+    });
+  };
+
+  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;
+      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;
+
+    if (this.state.command == 'gmail') {
+      const message =
+        `From: ${this.state.googleAuthUser.U3}\r\n` +
+        `To: ${processedData[0]}\r\n` +
+        `Subject: ${processedData[1]}\r\n\r\n` +
+        `${processedData[2]}`;
+      // The body needs to be base64url encoded.
+      const encodedMessage = btoa(message);
+      const reallyEncodedMessage = encodedMessage
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=+$/, '');
+      var sendEmail = gapi.client.gmail.users.messages.send({
+        userId: 'me',
+        resource: {
+          // same response with any of these
+          raw: reallyEncodedMessage
+          // raw: encodedMessage
+          // raw: message
+        }
+      });
+      return sendEmail.execute(function(response) {
+        console.log('Sent the Email!', response);
+      });
+    }
+
+    this.setState(INITIAL_STATE);
+  };
+
   render() {
-    const responseGoogle = response => {
+    const {
-      console.log(response);
+      googleAccessToken,
-      this.setState({ googleAccessToken: response.accessToken }, () =>
+      commandInput,
-        console.log(this.state)
+      commandInputPlaceholder,
-      );
+      commandIcon,
-    };
+      commandComplete
+    } = this.state;
 
-    const { googleAccessToken } = this.state;
     return (
       <div className={styles.searchCont}>
-        {googleAccessToken == null ? null : ( //   /> //     scope={'https://mail.google.com/'} //     cookiePolicy={'single_host_origin'} //     onFailure={responseGoogle} //     onSuccess={responseGoogle} //     buttonText="Login" //     clientId={envVars.OAUTH2_CLIENT_ID} //   <GoogleLogin
+        {googleAccessToken == null ? (
+          <div className={styles.googleButton} onClick={this.googleSignIn}>
+            <img
+              className={styles.googleLogo}
+              width="20px"
+              alt='Google "G" Logo'
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"
+            />
+            Login with Google
+          </div>
+        ) : (
           <React.Fragment>
-            <div className={styles.commandIcon}>
+            <img className={styles.commandIcon} src={commandIcon} />
-              <img className={styles.icon} src={envVars.DEFAULT_LOGO} />
-            </div>
             <input
+              value={commandInput}
+              onChange={this.handleInputChange}
+              onKeyPress={this.handleInputChange}
               className={styles.searchBar}
-              placeholder="Do Everything You Want"
+              placeholder={commandInputPlaceholder}
             />
           </React.Fragment>
         )}
+
+        {commandComplete && (
+          <Button
+            variant="contained"
+            color="primary"
+            className={styles.submitButton}
+            onClick={this.handleSubmitCommand}
+          >
+            Send
+            {/* This Button uses a Font Icon, see the installation instructions in the docs. */}
+            <Send />
+          </Button>
+        )}
       </div>
     );
   }

src/components/Root.js

@@ -5,6 +5,7 @@ import styles from './root.less';
 import backgroundImage from '../assets/images/mainbg.jpg';
 
 import MainCommand from './MainCommand';
+import AvailableCommandsIcons from './AvailableCommandsIcons';
 
 const Root = props => {
   return (
@@ -14,6 +15,8 @@ const Root = props => {
       <div className={styles.mainCont}>
         <MainCommand />
 
+        <AvailableCommandsIcons />
+
         <img className={styles.backgroundImage} src={backgroundImage} />
       </div>
 

src/components/root.less

@@ -11,6 +11,22 @@
     justify-content: center;
     align-items: center;
 
+    .googleButton {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: white;
+      padding: 1em;
+      transition: box-shadow var(--transitionDuration);
+      box-shadow: 0 0 8px #666;
+
+      cursor: pointer;
+
+      .googleLogo {
+        margin-right: 5px;
+      }
+    }
+
     .commandIcon {
       display: flex;
       justify-content: center;
@@ -20,13 +36,6 @@
       flex: 1;
       border-radius: 0.4rem;
       margin: 0 10px;
-
-      background-color: azure;
-
-      .icon {
-        height: inherit;
-        width: inherit;
-      }
     }
     .searchBar {
       display: block;
@@ -46,6 +55,44 @@
       height: 40px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+      ::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: grey;
+        opacity: 0.5;
+      }
+      ::-moz-placeholder {
+        /* Firefox 19+ */
+        color: grey;
+        opacity: 0.5;
+      }
+      :-ms-input-placeholder {
+        /* IE 10+ */
+        color: grey;
+        opacity: 0.5;
+      }
+      :-moz-placeholder {
+        /* Firefox 18- */
+        color: grey;
+        opacity: 0.5;
+      }
+    }
+
+    .submitButton {
+      margin: 0 10px;
+    }
+  }
+
+  .availableCommandsIconsCont {
+    display: flex;
+
+    position: fixed;
+    bottom: 3em;
+
+    .icon {
+      height: 50px;
+      width: 50px;
+      margin: 1em;
     }
   }