Add getHistoryItems function

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -5,6 +5,8 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+import { getHistoryItems, historyExists } from '../../utils/versionHistory.js';
+
 //Import all themes
 const ThemeSnippets = {};
 ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
@@ -46,7 +48,9 @@ const Snippetbar = createClass({
 		return {
 			renderer      : this.props.renderer,
 			themeSelector : false,
-			snippets      : []
+			snippets      : [],
+			historyExists : false,
+			showHistory   : false
 		};
 	},
 
@@ -58,14 +62,21 @@ const Snippetbar = createClass({
 	},
 
 	componentDidUpdate : async function(prevProps) {
-		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
+		const update = {};
-			const snippets = this.compileSnippets();
+		let newData = false;
-			this.setState({
-				snippets : snippets
-			});
-		}
-	},
 
+		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
+			update.snippets = this.compileSnippets();
+			newData = true;
+		};
+
+		if(historyExists(this.props.brew) != this.state.historyExists){
+			update.historyExists = !this.state.historyExists;
+			newData = true;
+		}
+
+		newData && this.setState(update);
+	},
 
 	mergeCustomizer : function(oldValue, newValue, key) {
 		if(key == 'snippets') {
@@ -139,7 +150,24 @@ const Snippetbar = createClass({
 	},
 
 	showHistory : function () {
-		console.log('show history');
+		if(!this.state.historyExists) return;
+
+		this.setState({
+			showHistory : !this.state.showHistory
+		});
+	},
+
+	renderHistoryItems : function() {
+		const historyItems = getHistoryItems(this.props.brew);
+
+		return <div className='dropdown'>
+			{_.map(historyItems, (item, index)=>{
+				return <div className='snippet' key={index} >
+					<i className={`fas fa-${index+1}`} />
+					<span className='name' title={item.title}>{item.title}</span>
+				</div>;
+			})}
+		</div>;
 	},
 
 	renderEditorButtons : function(){
@@ -162,9 +190,10 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={'editorTool history'}
+			<div className={`editorTool history ${this.state.historyExists ? 'active' : ''}`}
 				onClick={this.showHistory} >
 				<i className='fas fa-clock-rotate-left' />
+				{this.state.showHistory && this.renderHistoryItems() }
 			</div>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >

client/homebrew/editor/snippetbar/snippetbar.less

@@ -57,7 +57,12 @@
 				.tooltipLeft('History');
 				font-size : 0.75em;
 				color     : grey;
-				&.active { color : inherit; }
+				&.active {
+					color : inherit;
+					&>.dropdown { visibility: visible; }
+				}
+				&:hover>.dropdown { visibility: visible; }
+
 			}
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');

client/homebrew/utils/versionHistory.js

@@ -1,4 +1,5 @@
 export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
+export const HISTORY_SLOTS = 5;
 // const HISTORY_SAVE_DELAYS = {
 //  0: 0,           // 0 minutes (if not specified)
 // 	1: 2,			// 2 minutes
@@ -68,16 +69,29 @@ function updateStoredBrew(brew, slot=0){
 	return;
 };
 
-export function updateHistory(brew) {
+export function historyExists(brew){
+	return Object.keys(localStorage)
+        .some((key)=>{
+        	return key.startsWith(`${HISTORY_PREFIX}-${brew.shareId}`);
+        });
+}
+
+export function loadHistory(brew){
 	const history = {};
 
 	// Load data from local storage to History object
-	for (let i = 1; i<=5; i++){
+	for (let i = 1; i <= HISTORY_SLOTS; i++){
 		history[i] = getVersionBySlot(brew, i);
 	};
 
+	return history;
+}
+
+export function updateHistory(brew) {
+	const history = loadHistory(brew);
+
 	// Walk each version position
-	for (let slot = 5; slot>0; slot--){
+	for (let slot = HISTORY_SLOTS; slot > 0; slot--){
 		const storedVersion = history[slot];
 
 		// If slot has expired, update all lower slots and break
@@ -96,6 +110,16 @@ export function updateHistory(brew) {
 	};
 };
 
+export function getHistoryItems(brew){
+	const historyArray = [];
+
+	for (let i = 1; i <= HISTORY_SLOTS; i++){
+		historyArray.push(getVersionBySlot(brew, i));
+	}
+
+	return historyArray;
+};
+
 export function versionHistoryGarbageCollection(){
 	Object.keys(localStorage)
         .filter((key)=>{