From 25ce1aa00cde4bc6096937aeded17a9a60167da7 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 7 Oct 2024 19:36:17 +1300
Subject: [PATCH] Functional history menu

---
 .../homebrew/editor/snippetbar/snippetbar.jsx | 65 ++++++++++++-------
 1 file changed, 40 insertions(+), 25 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 3a7b48916..29ce4d8c8 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -50,8 +50,9 @@ const Snippetbar = createClass({
 			renderer      : this.props.renderer,
 			themeSelector : false,
 			snippets      : [],
+			showHistory   : false,
 			historyExists : false,
-			showHistory   : false
+			historyItems  : []
 		};
 	},
 
@@ -75,6 +76,17 @@ const Snippetbar = createClass({
 				historyExists : checkHistoryExists
 			});
 		}
+
+		// Update history list if it has changed
+		const checkHistoryItems = await loadHistory(this.props.brew);
+		if(checkHistoryItems.some((historyItem, index)=>{
+			return !index < this.state.historyItems.length || historyItem != this.state.historyItems[index];
+		})){
+			this.setState({
+				historyItems : checkHistoryItems
+			});
+		}
+
 	},
 
 	mergeCustomizer : function(oldValue, newValue, key) {
@@ -152,34 +164,36 @@ const Snippetbar = createClass({
 		return this.props.updateBrew(item);
 	},
 
-	renderHistoryItems : async function() {
-		if(!this.state.historyExists || !this.state.showHistory) return;
+	toggleHistoryMenu : function(){
+		this.setState({
+			showHistory : !this.state.showHistory
+		});
+	},
 
-		const historyItems = await loadHistory(this.props.brew);
-		console.log('renderHistoryItems', historyItems);
-		return;
+	renderHistoryItems : function() {
+		if(this.state.historyItems.length == 0) return;
 
-		// return <div className='dropdown'>
-		// 	{_.map(historyItems, (item, index)=>{
-		// 		if(!item[1].savedAt) return;
+		return <div className='dropdown'>
+			{_.map(this.state.historyItems, (item, index)=>{
+				if(item.noData || !item.savedAt) return;
 
-		// 		const saveTime = new Date(item[1].savedAt);
-		// 		const diffMs = new Date() - saveTime;
-		// 		const diffSecs = Math.floor(diffMs / 1000);
+				const saveTime = new Date(item.savedAt);
+				const diffMs = new Date() - saveTime;
+				const diffSecs = Math.floor(diffMs / 1000);
 
-		// 		let diffString = `about ${diffSecs} seconds ago`;
+				let diffString = `about ${diffSecs} seconds ago`;
 
-		// 		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`;
+				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>;
+				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(){
@@ -202,9 +216,10 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`} >
+			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+				onClick={this.toggleHistoryMenu} >
 				<i className='fas fa-clock-rotate-left' />
-				{/* { this.renderHistoryItems() } */}
+				{ this.state.showHistory && this.renderHistoryItems() }
 			</div>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >