refactor snippetbar into functional component

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,147 +30,122 @@ 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 [showHistory, setShowHistory] = useState(false);
+	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 toggleHistoryMenu = ()=>setShowHistory(!showHistory);
 
-	renderHistoryItems : function() {
-		if(!this.state.historyExists) return;
+	const renderHistoryItems = ()=>{
+		if(!historyExists) return;
 
 		return <div className='dropdown'>
-			{_.map(this.state.historyItems, (item, index)=>{
+			{_.map(historyItems, (item, index)=>{
 				if(item.noData || !item.savedAt) return;
 
 				const saveTime = new Date(item.savedAt);
@@ -185,106 +159,103 @@ const Snippetbar = createReactClass({
 				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);}} >
+				return <div className='snippet' key={index} onClick={()=>{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} >
+				{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
+					<button className={`editorTool snippetGroup history ${historyExists ? 'active' : ''}`}
+						onClick={toggleHistoryMenu} >
 						<i className='fas fa-clock-rotate-left' />
-						{ this.state.showHistory && this.renderHistoryItems() }
+						{ showHistory && renderHistoryItems() }
 					</button>
-					<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
-						onClick={this.props.undo} >
+					<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 +266,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>;
+};