From c6e037ef78ca19ac3f2f2d4fcae177745522c584 Mon Sep 17 00:00:00 2001 From: talksik Date: Sun, 23 Jun 2019 14:45:09 -0700 Subject: [PATCH] adding in all logic for gmail command to work and some ui changes --- src/components/AvailableCommandsIcons.js | 43 ++++ src/components/MainCommand.js | 251 +++++++++++++++-------- src/components/Root.js | 3 + src/components/root.less | 61 +++++- 4 files changed, 266 insertions(+), 92 deletions(-) create mode 100644 src/components/AvailableCommandsIcons.js diff --git a/src/components/AvailableCommandsIcons.js b/src/components/AvailableCommandsIcons.js new file mode 100644 index 0000000..175731a --- /dev/null +++ b/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 ( +
+ {/* */} + + + + + + +
+ ); +}; + +export default AvailableCommandsIcons; diff --git a/src/components/MainCommand.js b/src/components/MainCommand.js index 03cd9b5..d559f57 100644 --- a/src/components/MainCommand.js +++ b/src/components/MainCommand.js @@ -5,111 +5,192 @@ const envVars = require('config'); import { GoogleLogin } from 'react-google-login'; -class MainCommand extends Component { - state = { - googleAccessToken: null - }; +import { Button } from '@material-ui/core'; +import { Send } from '@material-ui/icons'; - initClient = () => { - gapi.client - .init({ +const INITIAL_STATE = { + googleAccessToken: null, + 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( - function() { - // Listen for sign-in state changes. - console.log(gapi.auth2.getAuthInstance()); - }, - function(error) { - appendPre(JSON.stringify(error, null, 2)); - } - ); - }; + }); + // .then( + // function() { + // console.log('properly initialized gapi and client and auth2'); + // gapi.auth2 + // .getAuthInstance() + // .signIn() + // .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 - .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( - 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)); - } - ); + // }); + // }, + // function(error) { + // appendPre(JSON.stringify(error, null, 2)); + // } + // ); }); } - render() { - const responseGoogle = response => { - console.log(response); - this.setState({ googleAccessToken: response.accessToken }, () => - console.log(this.state) - ); - }; + 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 { + googleAccessToken, + commandInput, + commandInputPlaceholder, + commandIcon, + commandComplete + } = this.state; - const { googleAccessToken } = this.state; return (
- {googleAccessToken == null ? null : ( // /> // scope={'https://mail.google.com/'} // cookiePolicy={'single_host_origin'} // onFailure={responseGoogle} // onSuccess={responseGoogle} // buttonText="Login" // clientId={envVars.OAUTH2_CLIENT_ID} // + Google "G" Logo + Login with Google +
+ ) : ( -
- -
+ )} + + {commandComplete && ( + + )} ); } diff --git a/src/components/Root.js b/src/components/Root.js index eb600ec..6028e44 100644 --- a/src/components/Root.js +++ b/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 => {
+ +
diff --git a/src/components/root.less b/src/components/root.less index 39edc71..524b28a 100644 --- a/src/components/root.less +++ b/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; } }