Merge branch 'master' into limitStreamListeners-#5090.1

client/components/dropdown/dropdown.jsx

@@ -22,7 +22,7 @@ import _ from 'lodash';
 // use react context to keep track of the menu depth (menus in menus)
 const MenuDepthContext = React.createContext(0);
 
-const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled = false, ...props })=>{
 	const reactId = useId();
 	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
 	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
@@ -41,7 +41,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	useEffect(()=>{
 		triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
 		menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
-	}, [anchorName]);
+	}, [anchorName, disabled]);
 
 	// hide popover with click inside iframe (not supported by light dismiss)
 	useEffect(()=>{
@@ -91,8 +91,23 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 		document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
 	};
 
+	if(disabled){
+		return (
+			<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
+				<button
+					className={['menu-item', color].filter(Boolean).join(' ')}
+					aria-label={groupName}
+					role='menuitem'
+					disabled
+				>
+					{trigger(groupName, icon)}
+				</button>
+			</li>
+		);
+	}
+
 	return (
-		<li className='menu-wrapper' role='none'>
+		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
 			<button
 				id={`${menuId}-trigger`}
 				className={['menu-item', color].join(' ')}

client/components/dropdown/dropdown.less

@@ -11,6 +11,9 @@
 }
 
 :root { --activeTriggerColor : var(--activeTriggerColor); }
+.menu-wrapper {
+	list-style: none;
+}
 .menu-list {
 	position         : fixed;
 	top              : anchor(bottom);

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,7 +1,6 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 import './snippetbar.less';
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React, { useState, useEffect } from 'react';
 import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
@@ -31,260 +30,247 @@ const execute = function(val, props){
 	return val;
 };
 
-const Snippetbar = createReactClass({
-	displayName     : 'SnippetBar',
-	getDefaultProps : function() {
-		return {
-			brew            : {},
-			view            : 'text',
-			onViewChange    : ()=>{},
-			onInject        : ()=>{},
-			onToggle        : ()=>{},
-			showEditButtons : true,
-			renderer        : 'legacy',
-			undo            : ()=>{},
-			redo            : ()=>{},
-			historySize     : ()=>{},
-			foldCode        : ()=>{},
-			unfoldCode      : ()=>{},
-			formatCode      : ()=>{},
-			cursorPos       : {},
-			themeBundle     : [],
-			updateBrew      : ()=>{}
-		};
-	},
+const SnippetBar = ({
+	brew            = {},
+	view            = 'text',
+	onViewChange    = ()=>{},
+	onInject        = ()=>{},
+	onToggle        = ()=>{},
+	showEditButtons = true,
+	renderer        = 'legacy',
+	undo            = ()=>{},
+	redo            = ()=>{},
+	historySize     = ()=>{},
+	foldCode        = ()=>{},
+	unfoldCode      = ()=>{},
+	formatCode      = ()=>{},
+	cursorPos       = {},
+	themeBundle     = [],
+	updateBrew      = ()=>{}
+})=>{
+	const [snippets, setSnippets] = useState([]);
+	const [historyExists, setHistoryExists] = useState(false);
+	const [historyItems, setHistoryItems] = useState([]);
 
-	getInitialState : function() {
-		return {
-			renderer      : this.props.renderer,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
-		};
-	},
+	useEffect(()=>{
+		setSnippets(compileSnippets());
+	}, []);
 
-	componentDidMount : async function(prevState) {
-		const snippets = this.compileSnippets();
-		this.setState({
-			snippets : snippets
-		});
-	},
-
-	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer ||
-			prevProps.themeBundle != this.props.themeBundle ||
-			prevProps.brew.snippets != this.props.brew.snippets) {
-			this.setState({
-				snippets : this.compileSnippets()
-			});
-		};
-
-		// Update history list if it has changed
-		const checkHistoryItems = await loadHistory(this.props.brew);
-
-		// If all items have the noData property, there is no saved data
-		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
-			return historyItem?.noData;
-		});
-		if(prevState.historyExists != checkHistoryExists){
-			this.setState({
-				historyExists : checkHistoryExists
-			});
-		}
-
-		// If any history items have changed, update the list
-		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
-			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
-		})){
-			this.setState({
-				historyItems : checkHistoryItems
-			});
-		}
-	},
-
-	mergeCustomizer : function(oldValue, newValue, key) {
-		if(key == 'snippets') {
+	const mergeCustomizer = (oldValue, newValue, key)=>{
+		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
 			return result.filter((snip)=>snip.gen || snip.subsnippets);
 		};
-	},
-
-	compileSnippets : function() {
+	};
+	const compileSnippets = ()=>{
 		let compiledSnippets = [];
 
 		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 
-		if(this.props.themeBundle.snippets) {
-			for (let snippets of this.props.themeBundle.snippets) {
+		if(themeBundle.snippets) {
+			for (let snippets of themeBundle.snippets) {
 				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
 					snippets = ThemeSnippets[snippets];
 
 				const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
-				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
+				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, mergeCustomizer));
 
 				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 			}
 		}
 
-		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
+		const userSnippetsasJSON = brewSnippetsToJSON(brew.title || 'New Document', brew.snippets, themeBundle.snippets);
 		compiledSnippets.push(userSnippetsasJSON);
 
 		return compiledSnippets;
-	},
+	};
 
-	handleSnippetClick : function(injectedText){
-		this.props.onInject(injectedText);
-	},
+	useEffect(()=>{
+		setSnippets(compileSnippets());
+	}, [renderer, themeBundle, brew.snippets]);
 
-	renderSnippetGroups : function(){
-		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
-		if(snippets.length === 0) return null;
+	useEffect(()=>{
+		const updateHistory = async ()=>{
+			// Update history list if it has changed
+			const checkHistoryItems = await loadHistory(brew);
+
+			// If all items have the noData property, there is no saved data
+			const checkHistoryExists = !checkHistoryItems.every(
+				(historyItem)=>historyItem?.noData
+			);
+
+			if(historyExists !== checkHistoryExists) {
+				setHistoryExists(checkHistoryExists);
+			}
+
+			// If any history items have changed, update the list
+			if(!_.isEqual(checkHistoryItems, historyItems)) {
+				setHistoryItems(checkHistoryItems);
+			}
+		};
+
+		updateHistory();
+	}, [brew]);
+
+	const handleSnippetClick = (injectedText)=>onInject(injectedText);
+
+	const renderSnippetGroups = ()=>{
+		const currentSnippets = snippets.filter((snippetGroup)=>snippetGroup.view === view);
+		if(currentSnippets.length === 0) return null;
 
 		return <ul className='snippets' role='menubar' aria-label='Snippets Menubar'>
-			{_.map(snippets, (snippetGroup)=>{
+			{_.map(currentSnippets, (snippetGroup)=>{
 				return <SnippetGroup
-					brew={this.props.brew}
+					brew={brew}
 					groupName={snippetGroup.groupName}
 					icon={snippetGroup.icon}
 					snippets={snippetGroup.snippets}
 					key={snippetGroup.groupName}
-					onSnippetClick={this.handleSnippetClick}
-					cursorPos={this.props.cursorPos}
+					onSnippetClick={handleSnippetClick}
+					cursorPos={cursorPos}
 				/>;
 			})
 			}
 		</ul>;
-	},
+	};
 
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
+	const replaceContent = (item)=>{
+		return updateBrew(item);
+	};
 
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
-		});
-	},
+	const renderHistoryMenu = ()=>{
+		return (
+			<Dropdown
+				groupName='History'
+				icon='fas fa-clock-rotate-left'
+				className='history'
+				customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
+				disabled={!historyExists}
+			>
+				{historyExists && _.map(historyItems, (item, index)=>{
+					if(item.noData || !item.savedAt) return null;
 
-	renderHistoryItems : function() {
-		if(!this.state.historyExists) return;
+					const saveTime = new Date(item.savedAt);
+					const diffMs = new Date() - saveTime;
+					const diffSecs = Math.floor(diffMs / 1000);
 
-		return <div className='dropdown'>
-			{_.map(this.state.historyItems, (item, index)=>{
-				if(item.noData || !item.savedAt) return;
+					let diffString = `about ${diffSecs} seconds ago`;
 
-				const saveTime = new Date(item.savedAt);
-				const diffMs = new Date() - saveTime;
-				const diffSecs = Math.floor(diffMs / 1000);
+					if(diffSecs > 60)
+						diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+					if(diffSecs > (60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+					if(diffSecs > (24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+					if(diffSecs > (7 * 24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
 
-				let diffString = `about ${diffSecs} seconds ago`;
+					return (
+						<li key={index} role='none'>
+							<button
+								className='menu-item'
+								onClick={()=>replaceContent(item)}
+								role='menuitem'
+							>
+								<i className={`fas fa-${index + 1}`} />
+								<span
+									className='name'
+									title={saveTime.toISOString()}
+								>
+								v{item.version} : {diffString}
+								</span>
+							</button>
+						</li>
+					);
+				})}
+			</Dropdown>
+		);
+	};
 
-				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
-				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
-				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
-				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
-
-				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
-					<i className={`fas fa-${index+1}`} />
-					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
-				</div>;
-			})}
-		</div>;
-	},
-
-	renderEditorButtons : function(){
-		if(!this.props.showEditButtons) return;
+	const renderEditorButtons =()=>{
+		if(!showEditButtons) return;
 
 		return (
 			<div className='editors'>
-				{this.props.view !== 'meta' && this.props.view !== 'settings' && <><div className='historyTools'>
-					<button className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-						onClick={this.toggleHistoryMenu} >
-						<i className='fas fa-clock-rotate-left' />
-						{ this.state.showHistory && this.renderHistoryItems() }
-					</button>
-					<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
-						onClick={this.props.undo} >
+				{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
+					{renderHistoryMenu()}
+					<button className={`editorTool undo ${historySize.done ? 'active' : ''}`}
+						onClick={undo} >
 						<i className='fas fa-undo' />
 					</button>
-					<button className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
-						onClick={this.props.redo} >
+					<button className={`editorTool redo ${historySize.undone ? 'active' : ''}`}
+						onClick={redo} >
 						<i className='fas fa-redo' />
 					</button>
 				</div>
 				<div className='codeTools'>
-					<button className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
+					<button className={`editorTool foldAll ${foldCode ? 'active' : ''}`}
+						onClick={foldCode} >
 						<i className='fas fa-compress-alt' />
 					</button>
-					<button className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
+					<button className={`editorTool unfoldAll ${unfoldCode ? 'active' : ''}`}
+						onClick={unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</button>
-					<button className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
-						onClick={this.props.formatCode} >
+					<button className={`editorTool formatCode ${formatCode ? 'active' : ''}`}
+						onClick={formatCode} >
 						<i className='fas fa-wand-magic-sparkles' />
 					</button>
 				</div></>}
 
 				<div className='tabs'>
-					<button className={cx('text', { selected: this.props.view === 'text' })}
-						onClick={()=>this.props.onViewChange('text')}>
+					<button className={cx('text', { selected: view === 'text' })}
+						onClick={()=>onViewChange('text')}>
 						<i className='fa fa-beer' />
 					</button>
-					<button className={cx('style', { selected: this.props.view === 'style' })}
-						onClick={()=>this.props.onViewChange('style')}>
+					<button className={cx('style', { selected: view === 'style' })}
+						onClick={()=>onViewChange('style')}>
 						<i className='fa fa-paint-brush' />
 					</button>
-					<button className={cx('snippet', { selected: this.props.view === 'snippet' })}
-						onClick={()=>this.props.onViewChange('snippet')}>
+					<button className={cx('snippet', { selected: view === 'snippet' })}
+						onClick={()=>onViewChange('snippet')}>
 						<i className='fas fa-th-list' />
 					</button>
-					<button className={cx('meta', { selected: this.props.view === 'meta' })}
-						onClick={()=>this.props.onViewChange('meta')}>
+					<button className={cx('meta', { selected: view === 'meta' })}
+						onClick={()=>onViewChange('meta')}>
 						<i className='fas fa-info-circle' />
 					</button>
-					<button className={cx('settings', { selected: this.props.view === 'settings' })}
-						onClick={()=>this.props.onViewChange('settings')}>
+					<button className={cx('settings', { selected: view === 'settings' })}
+						onClick={()=>onViewChange('settings')}>
 						<i className='fas fa-gear' />
 					</button>
 				</div>
 
 			</div>
 		);
-	},
+	};
 
-	render : function(){
-		return <div className='snippetBar'>
-			{this.renderSnippetGroups()}
-			{this.renderEditorButtons()}
-		</div>;
-	}
-});
+	return <div className='snippetBar'>
+		{renderSnippetGroups()}
+		{renderEditorButtons()}
+	</div>;
+};
 
-export default Snippetbar;
+export default SnippetBar;
 
-const SnippetGroup = createReactClass({
-	displayName     : 'SnippetGroup',
-	getDefaultProps : function() {
-		return {
-			brew           : {},
-			groupName      : '',
-			icon           : 'fas fa-rocket',
-			snippets       : [],
-			onSnippetClick : function(){},
-		};
-	},
-	handleSnippetClick : function(e, snippet){
-		this.props.onSnippetClick(execute(snippet.gen, this.props));
-	},
-	renderSnippets : function(snippets){
+const SnippetGroup = (props)=>{
+	const {
+		brew           = {},
+		groupName      = '',
+		icon           = 'fas fa-rocket',
+		snippets       = [],
+		onSnippetClick = function(){},
+	} = props;
+
+	const handleSnippetClick = (e, snippet)=>{
+		onSnippetClick(execute(snippet.gen, props));
+	};
+	const renderSnippets = (snippets)=>{
 		return _.map(snippets, (snippet)=>{
 			if(!snippet.subsnippets){
 				return (
 					<li key={snippet.name} role='none'>
-						<button className='menu-item'  onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
+						<button className='menu-item'  onClick={(e)=>handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
 							<i className={snippet.icon} />
 							<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 							{snippet.experimental && <span className='status'>beta</span>}
@@ -295,17 +281,15 @@ const SnippetGroup = createReactClass({
 			} else if(snippet.subsnippets){
 				return (
 					<Dropdown groupName={snippet.name} icon={snippet.icon} key={snippet.name}>
-						{this.renderSnippets(snippet.subsnippets)}
+						{renderSnippets(snippet.subsnippets)}
 					</Dropdown>
 				);
 			}
 
 		});
-	},
+	};
 
-	render : function(){
-		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
-			{this.renderSnippets(this.props.snippets)}
-		</Dropdown>;
-	},
-});
+	return <Dropdown groupName={groupName} id={groupName} icon={icon}>
+		{renderSnippets(snippets)}
+	</Dropdown>;
+};

client/homebrew/editor/snippetbar/snippetbar.less

@@ -25,7 +25,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-		font-size       : 0.85rem;
+		font-size:0.85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 		reading-order   : 2;
 
@@ -36,7 +36,7 @@
 
 			&:first-child { border-left : none; }
 
-			& > button {
+			& > button, & > li {
 				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
@@ -44,7 +44,7 @@
 				text-align  : center;
 				cursor      : pointer;
 
-				&.editorTool:not(.active) { cursor : not-allowed; }
+				&.editorTool:not(.active),&.editorTool:disabled { cursor : not-allowed; }
 
 				&:hover,&.selected { background-color : var(--hoverMenuColor); }
 				&.text {
@@ -59,6 +59,9 @@
 				&.snippet {
 					.tooltipLeft('Snippets');
 				}
+				&.settings {
+					.tooltipLeft('Settings');
+				}
 				&.undo {
 					.tooltipLeft('Undo');
 					color     : grey;
@@ -85,11 +88,16 @@
 					&.active { color : inherit; }
 				}
 				&.history {
+					font-size:.70rem;
+					
+					i {
+						min-width:auto;
+					}
 					.tooltipLeft('History');
 					position  : relative;
 					color     : grey;
 					border    : none;
-					&.active { color : inherit; }
+					&:not(:disabled) { color : inherit; }
 					& > .dropdown {
 						right : -1px;
 						& > .snippet { padding-right : 10px; }

client/homebrew/pages/editPage/editPage.jsx

@@ -103,23 +103,13 @@ const EditPage = (props)=>{
 		if(!res) return;
 
 		const updatedFields = {
-			googleId : res.body.googleId ?? null,
-			editId   : res.body.editId,
+			googleId : res.body.googleId ?? null, //TODO: investigate if we can set googleId:null in server/update instead of undefined
+			editId   : res.body.editId,           //then, editPage can just apply res.body instead of breaking out these fields.
 			shareId  : res.body.shareId,
 			version  : res.body.version
 		};
 
-		lastSavedBrew.current = {
-			...brew,
-			...updatedFields
-		};
-
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...updatedFields
-		}));
-
-		return res.body;
+		return updatedFields;
 	};
 
 	const onSaveSuccess = (savedBrew)=>{

client/homebrew/pages/homePage/homePage.jsx

@@ -22,9 +22,9 @@ const HomePage =(props)=>{
 		...props
 	};
 
-	const [currentBrew, setCurrentBrew]                = useState(props.brew);
-	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
-	const [error, setError]                      = useState(undefined);
+	const [currentBrew, setCurrentBrew] = useState(props.brew);
+	const [saveGoogle, setSaveGoogle]   = useState(global.account?.googleId ? true : false);
+	const [error, setError]             = useState(undefined);
 
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
@@ -38,11 +38,6 @@ const HomePage =(props)=>{
 			});
 		if(!res) return;
 
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...res.body
-		}));
-
 		return res.body;
 	};
 

client/homebrew/pages/newPage/newPage.jsx

@@ -23,8 +23,8 @@ const NewPage = (props)=>{
 	};
 
 	const [currentBrew, setCurrentBrew] = useState(props.brew);
-	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
-	const [error, setError] = useState(null);
+	const [saveGoogle, setSaveGoogle]   = useState(global.account?.googleId ? true : false);
+	const [error, setError]             = useState(null);
 
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
@@ -46,11 +46,6 @@ const NewPage = (props)=>{
 			});
 		if(!res) return;
 
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...res.body
-		}));
-
 		return res.body;
 	};
 

client/homebrew/utils/commonEditPageFunctions.jsx

@@ -202,9 +202,20 @@ export default function useCommonEditPageFunctions(dependencies) {
 			setIsSaving(true);
 			setError(null);
 			setHTMLErrors(hbfm.validate(currentBrew.text));
-			let savedBrew = await save(currentBrew, saveToGoogle)
+			const brewToSave = currentBrew;
+			let savedBrew = await save(brewToSave, saveToGoogle)
 				.catch((err)=>{setError(err);});
 			if(savedBrew) {
+				lastSavedBrew.current = {
+					...brewToSave,
+					...savedBrew
+				};
+
+				setCurrentBrew((prevBrew)=>({
+					...prevBrew,
+					...savedBrew
+				}));
+
 				if(useLocalStorage) clearLocalStorage();
 				onSaveSuccess(savedBrew);
 			}