Merge branch 'master' into issue_4201

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'>

server/app.js

@@ -404,6 +404,7 @@ app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res,
 		renderer : req.brew.renderer,
 		theme    : req.brew.theme,
 		tags     : req.brew.tags,
+		snippets : req.brew.snippets
 	};
 	req.brew = _.defaults(brew, DEFAULT_BREW);
 

server/homebrew.api.js

@@ -412,6 +412,8 @@ const api = {
 		const after = await afterSave();
 		if(!after) return;
 
+		saved.textBin = undefined; // Remove textBin from the saved object to save bandwidth
+
 		res.status(200).send(saved);
 	},
 	deleteGoogleBrew : async (account, id, editId, res)=>{