Merge branch 'master' into refactor-homebrew.jsx-to-functional

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -113,7 +113,9 @@ const BrewRenderer = (props)=>{
 		zoomLevel    : 100,
 		spread       : 'single',
 		startOnRight : true,
-		pageShadows  : true
+		pageShadows  : true,
+		rowGap       : 5,
+		columnGap    : 10,
 	});
 
 	//useEffect to store or gather toolbar state from storage

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -21,8 +21,9 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	}, [visiblePages]);
 
 	useEffect(()=>{
-		const visibility = localStorage.getItem('hb_toolbarVisibility') === 'true';
-		setToolsVisible(visibility);
+		const Visibility = localStorage.getItem('hb_toolbarVisibility');
+		if (Visibility) setToolsVisible(Visibility === 'true');
+
 	}, []);
 
 	const handleZoomButton = (zoom)=>{
@@ -68,7 +69,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 		} else if(mode == 'fit'){
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
 			let minDimRatio;
-			if(displayOptions.spread === 'active')
+			if(displayOptions.spread === 'single')
 				minDimRatio = [...pages].reduce(
 					(minRatio, page)=>Math.min(minRatio,
 						iframeWidth / page.offsetWidth,
@@ -165,7 +166,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						id='single-spread'
 						className='tool'
 						title='Single Page'
-						onClick={()=>{handleOptionChange('spread', 'active');}}
+						onClick={()=>{handleOptionChange('spread', 'single');}}
 						aria-checked={displayOptions.spread === 'single'}
 					><i className='fac single-spread' /></button>
 					<button role='radio'

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -175,6 +175,10 @@
 			opacity    : 0;
 			transition : all 0.2s ease;
 		}
+
+		.toggleButton button i {
+			filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
+		}
 	}
 }
 
@@ -184,9 +188,4 @@
 	z-index   : 5;
 	display   : flex;
 	height    : 100%;
-
-	button i {
-		filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
-
-	}
 }

client/homebrew/navbar/error-navitem.jsx

@@ -23,14 +23,15 @@ const ErrorNavItem = createClass({
 
 		const error       = this.props.error;
 		const response    = error.response;
-		const status      = response.status;
-		const HBErrorCode = response.body?.HBErrorCode;
-		const message     = response.body?.message;
+		const status      = response?.status;
+		const errorCode   = error.code
+		const HBErrorCode = response?.body?.HBErrorCode;
+		const message     = response?.body?.message;
 		let errMsg = '';
 		try {
 			errMsg += `${error.toString()}\n\n`;
 			errMsg += `\`\`\`\n${error.stack}\n`;
-			errMsg += `${JSON.stringify(response.error, null, '  ')}\n\`\`\``;
+			errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
 			console.log(errMsg);
 		} catch (e){}
 
@@ -73,7 +74,7 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
-		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+		if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
 				<div className='errorContainer' onClick={clearError}>
@@ -82,7 +83,7 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
-		if(response.req.url.match(/^\/api.*Google.*$/m)){
+		if(response?.req.url.match(/^\/api.*Google.*$/m)){
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer' onClick={clearError}>
@@ -129,6 +130,18 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
+		if(errorCode === 'ECONNABORTED') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					The request to the server was interrupted or timed out.
+					This can happen due to a network issue, or if
+					trying to save a particularly large brew.
+					Please check your internet connection and try again.
+				</div>
+			</Nav.item>;
+		}
+
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
 			<div className='errorContainer'>

client/homebrew/pages/editPage/editPage.jsx

@@ -3,6 +3,9 @@ require('./editPage.less');
 const React = require('react');
 const _ = require('lodash');
 const createClass = require('create-react-class');
+import {makePatches, applyPatches, stringifyPatches, parsePatches} from '@sanity/diff-match-patch';
+import { md5 } from 'hash-wasm';
+import { gzipSync, strToU8 } from 'fflate';
 
 import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
@@ -47,7 +50,7 @@ const EditPage = createClass({
 		return {
 			brew                       : this.props.brew,
 			isSaving                   : false,
-			isPending                  : false,
+			unsavedChanges             : false,
 			alertTrashedGoogleBrew     : this.props.brew.trashed,
 			alertLoginToTransfer       : false,
 			saveGoogle                 : this.props.brew.googleId ? true : false,
@@ -85,7 +88,7 @@ const EditPage = createClass({
 		});
 
 		window.onbeforeunload = ()=>{
-			if(this.state.isSaving || this.state.isPending){
+			if(this.state.isSaving || this.state.unsavedChanges){
 				return 'You have unsaved changes!';
 			}
 		};
@@ -104,9 +107,9 @@ const EditPage = createClass({
 	},
 	componentDidUpdate : function(){
 		const hasChange = this.hasChanges();
-		if(this.state.isPending != hasChange){
+		if(this.state.unsavedChanges != hasChange){
 			this.setState({
-				isPending : hasChange
+				unsavedChanges : hasChange
 			});
 		}
 	},
@@ -156,9 +159,9 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(snippet);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, snippets: snippet },
-			isPending  : true,
-			htmlErrors : htmlErrors,
+			brew           : { ...prevState.brew, snippets: snippet },
+			unsavedChanges : true,
+			htmlErrors     : htmlErrors,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -188,20 +191,28 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			brew : {
 				...prevState.brew,
-				style : newData.style,
-				text  : newData.text
+				style    : newData.style,
+				text     : newData.text,
+				snippets : newData.snippets
 			}
 		}));
 	},
 
 	trySave : function(immediate=false){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.hasChanges()){
+		if(this.state.isSaving)
+			return;
+
+		if(immediate) {
 			this.debounceSave();
-		} else {
-			this.debounceSave.cancel();
+			this.debounceSave.flush();
+			return;
 		}
-		if(immediate) this.debounceSave.flush();
+		
+		if(this.hasChanges())
+			this.debounceSave();
+		else
+			this.debounceSave.cancel();
 	},
 
 	handleGoogleClick : function(){
@@ -215,8 +226,7 @@ const EditPage = createClass({
 			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
 		}));
 		this.setState({
-			error    : null,
-			isSaving : false
+			error    : null
 		});
 	},
 
@@ -232,14 +242,16 @@ const EditPage = createClass({
 	toggleGoogleStorage : function(){
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
-			isSaving   : false,
 			error      : null
-		}), ()=>this.save());
+		}), ()=>this.trySave(true));
 	},
 
 	save : async function(){
 		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
 
+		const brewState       = this.state.brew; // freeze the current state
+		const preSaveSnapshot = { ...brewState };
+
 		this.setState((prevState)=>({
 			isSaving   : true,
 			error      : null,
@@ -249,15 +261,25 @@ const EditPage = createClass({
 		await updateHistory(this.state.brew).catch(console.error);
 		await versionHistoryGarbageCollection().catch(console.error);
 
+		//Prepare content to send to server
+		const brew          = { ...brewState };
+		brew.text           = brew.text.normalize('NFC');
+		this.savedBrew.text = this.savedBrew.text.normalize('NFC');
+		brew.pageCount      = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+		brew.patches        = stringifyPatches(makePatches(this.savedBrew.text, brew.text));
+		brew.hash           = await md5(this.savedBrew.text);
+		//brew.text           = undefined; - Temporary parallel path
+		brew.textBin        = undefined;
+
+		const compressedBrew = gzipSync(strToU8(JSON.stringify(brew)));
+
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
-
-		const brew = this.state.brew;
-		brew.pageCount = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
-
 		const params = `${transfer ? `?${this.state.saveGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : ''}`;
 		const res = await request
 			.put(`/api/update/${brew.editId}${params}`)
-			.send(brew)
+			.set('Content-Encoding', 'gzip')
+			.set('Content-Type', 'application/json')
+			.send(compressedBrew)
 			.catch((err)=>{
 				console.log('Error Updating Local Brew');
 				this.setState({ error: err });
@@ -265,20 +287,28 @@ const EditPage = createClass({
 		if(!res) return;
 
 		this.savedBrew = {
-			...this.state.brew,
+			...preSaveSnapshot,
 			googleId : res.body.googleId ? res.body.googleId : null,
 			editId 	 : res.body.editId,
 			shareId  : res.body.shareId,
 			version  : res.body.version
 		};
-		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
 
-		this.setState(()=>({
-			brew        : this.savedBrew,
-			isPending   : false,
+		this.setState((prevState) => ({
+			brew: {
+				...prevState.brew,
+				googleId : res.body.googleId ? res.body.googleId : null,
+				editId 	 : res.body.editId,
+				shareId  : res.body.shareId,
+				version  : res.body.version
+			},
 			isSaving    : false,
 			unsavedTime : new Date()
-		}));
+		}), ()=>{
+			this.setState({ unsavedChanges : this.hasChanges() });
+		});
+
+		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
 	},
 
 	renderGoogleDriveIcon : function(){
@@ -336,7 +366,7 @@ const EditPage = createClass({
 		}
 
 		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
-		if(this.state.isPending && this.state.autoSaveWarning){
+		if(this.state.unsavedChanges && this.state.autoSaveWarning){
 			this.setAutosaveWarning();
 			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
 			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
@@ -351,7 +381,7 @@ const EditPage = createClass({
 
 		// #3 - Unsaved changes exist, click to save, show SAVE NOW
 		// Use trySave(true) instead of save() to use debounced save function
-		if(this.state.isPending){
+		if(this.state.unsavedChanges){
 			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
 		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -176,6 +176,26 @@ const errorIndex = (props)=>{
 		
 		If the selected brew is your document, you may designate it as a theme by adding the \`theme:meta\` tag.`,
 
+		// ID validation error
+		'11' : dedent`
+		## No Homebrewery document could be found.
+		
+		The server could not locate the Homebrewery document. The Brew ID failed the validation check.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Google ID validation error
+		'12' : dedent`
+		## No Google document could be found.
+		
+		The server could not locate the Google document. The Google ID failed the validation check.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}`,
+
 		//account page when account is not defined
 		'50' : dedent`
 		## You are not signed in

client/homebrew/pages/newPage/newPage.jsx

@@ -148,7 +148,6 @@ const NewPage = createClass({
 
 		this.setState((prevState)=>({
 			brew       : { ...prevState.brew, snippets: snippet },
-			isPending  : true,
 			htmlErrors : htmlErrors,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},

client/homebrew/utils/versionHistory.js

@@ -42,6 +42,7 @@ function parseBrewForStorage(brew, slot = 0) {
 		title    : brew.title,
 		text     : brew.text,
 		style    : brew.style,
+		snippets : brew.snippets,
 		version  : brew.version,
 		shareId  : brew.shareId,
 		savedAt  : brew?.savedAt || new Date(),