Initial Commit. All seems to be working...?

EditPage.jsx and GoogleActions.js need to be cleaned up and shortened...

client/homebrew/pages/editPage/editPage.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
@@ -20,8 +21,10 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const Markdown = require('naturalcrit/markdown.js');
 
-const SAVE_TIMEOUT = 3000;
+const googleDriveActive = require('../../googleDrive.png');
+const googleDriveInactive = require('../../googleDriveMono.png');
 
+const SAVE_TIMEOUT = 3000;
 
 const EditPage = createClass({
 	getDefaultProps : function() {
@@ -32,6 +35,7 @@ const EditPage = createClass({
 				editId    : null,
 				createdAt : null,
 				updatedAt : null,
+				gDrive    : false,
 
 				title       : '',
 				description : '',
@@ -49,13 +53,19 @@ const EditPage = createClass({
 
 			isSaving   : false,
 			isPending  : false,
+			saveGoogle : this.props.brew.googleId ? true : false,
 			errors     : null,
 			htmlErrors : Markdown.validate(this.props.brew.text),
+			url        : ''
 		};
 	},
 	savedBrew : null,
 
 	componentDidMount : function(){
+		this.setState({
+			url : window.location.href
+		});
+
 		this.trySave();
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
@@ -74,7 +84,6 @@ const EditPage = createClass({
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
 
-
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const S_KEY = 83;
@@ -126,7 +135,13 @@ const EditPage = createClass({
 		}
 	},
 
-	save : function(){
+	toggleGoogleStorage : function(){
+		this.setState((prevState)=>({
+			saveGoogle : !prevState.saveGoogle
+		}));
+	},
+
+	save : async function(){
 		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
 
 		this.setState((prevState)=>({
@@ -135,22 +150,104 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
-		request
-			.put(`/api/${this.props.brew.editId}`)
-			.send(this.state.brew)
-			.end((err, res)=>{
-				if(err){
-					this.setState({
-						errors : err,
-					});
-				} else {
-					this.savedBrew = res.body;
-					this.setState({
-						isPending : false,
-						isSaving  : false,
-					});
-				}
-			});
+		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
+
+		if(this.state.saveGoogle) {
+			if(transfer) {
+				const res = await request
+				.post('/api/newGoogle/')
+				.send(this.state.brew)
+				.catch((err)=>{
+					console.log(err.status === 401
+						? 'Not signed in!'
+						: 'Error Saving to Google!');
+					this.setState({ errors: err });
+				});
+
+				if(!res) { return; }
+
+				console.log('Deleting Local Copy');
+				await request.delete(`/api/${this.state.brew.editId}`)
+				.send()
+				.catch((err)=>{
+					console.log('Error deleting Local Copy');
+				});
+
+				this.savedBrew = res.body;
+				history.replaceState(null, null, `/edit/${this.savedBrew.googleId}${this.savedBrew.editId}`); //update URL to match doc ID
+			} else {
+				const res = await request
+				.put(`/api/updateGoogle/${this.state.brew.editId}`)
+				.send(this.state.brew)
+				.catch((err)=>{
+					console.log(err.status === 401
+						? 'Not signed in!'
+						: 'Error Saving to Google!');
+					this.setState({ errors: err });
+					return;
+				});
+
+				this.savedBrew = res.body.brew;
+			}
+		} else {
+			console.log('Saving Locally');
+			if(transfer) {
+				console.log('Moving to Local Storage');
+				const res = await request.post('/api')
+				.send(this.state.brew)
+				.catch((err)=>{
+					console.log('Error creating Local Copy');
+					this.setState({ errors: err });
+					return;
+				});
+
+				await request.get(`/api/removeGoogle/${this.state.brew.googleId}${this.state.brew.editId}`)
+				.send()
+				.catch((err)=>{
+					console.log('Error Deleting Google Brew');
+				});
+
+				console.log('GOT THIS SAVED BREW:');
+				console.log(res);
+				this.savedBrew = res.body;
+				history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); //update URL to match doc ID
+			} else {
+				console.log('Updating existing local copy');
+				const res = await request
+				.put(`/api/update/${this.state.brew.editId}`)
+				.send(this.state.brew)
+				.catch((err)=>{
+					console.log('Error Updating Local Brew');
+					this.setState({ errors: err });
+					return;
+				});
+
+				this.savedBrew = res.body;
+			}
+		}
+
+		console.log('Finished saving. About to merge saved brew with current');
+		this.setState((prevState)=>({
+			brew : _.merge({}, prevState.brew, {
+				googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
+				editId 	 : this.savedBrew.editId,
+			}),
+			isPending : false,
+			isSaving  : false,
+		}));
+	},
+
+	renderGoogleDriveIcon : function(){
+		if(this.state.saveGoogle) {
+			return <Nav.item className='googleDriveStorage' onClick={this.toggleGoogleStorage}>
+				<img src={googleDriveActive} alt='googleDriveActive' />
+			</Nav.item>;
+		} else {
+			return <Nav.item className='googleDriveStorage' onClick={this.toggleGoogleStorage}>
+				<img src={googleDriveInactive} alt='googleDriveInactive' />
+			</Nav.item>;
+		}
+
 	},
 
 	renderSaveButton : function(){
@@ -161,6 +258,19 @@ const EditPage = createClass({
 				errMsg += `\`\`\`\n${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
 			} catch (e){}
 
+			if(this.state.errors.status == '401'){
+				return <Nav.item className='save error' icon='fa-warning'>
+					Oops!
+					<div className='errorContainer'>
+					You must be signed in to a Google account
+						to save this to Google Drive!<br />
+						Sign in <a target='_blank' rel='noopener noreferrer'
+							href={`http://naturalcrit.com/login?redirect=${this.state.url}`}>
+						here</a>.
+					</div>
+				</Nav.item>;
+			}
+
 			return <Nav.item className='save error' icon='fa-warning'>
 				Oops!
 				<div className='errorContainer'>
@@ -183,6 +293,7 @@ const EditPage = createClass({
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},
+
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
@@ -190,6 +301,7 @@ const EditPage = createClass({
 			</Nav.section>
 
 			<Nav.section>
+				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<ReportIssue />
 				<Nav.item newTab={true} href={`/share/${this.props.brew.shareId}`} color='teal' icon='fa-share-alt'>