Initial UI functionality

client/homebrew/editor/editor.jsx

@@ -460,7 +460,9 @@ const Editor = createClass({
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
 					snippetBundle={this.props.snippetBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
+					updateBrew={this.props.updateBrew}
+				/>
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -40,7 +40,8 @@ const Snippetbar = createClass({
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
-			snippetBundle     : []
+			snippetBundle     : [],
+			updateBrew        : ()=>{}
 		};
 	},
 
@@ -148,6 +149,10 @@ const Snippetbar = createClass({
 		});
 	},
 
+	replaceContent : function(item){
+		return this.props.updateBrew(item);
+	},
+
 	renderHistoryItems : function() {
 		const historyItems = getHistoryItems(this.props.brew);
 
@@ -156,12 +161,18 @@ const Snippetbar = createClass({
 				if(!item.savedAt) return;
 
 				const saveTime = new Date(item.savedAt);
-				const diffTime = new Date() - saveTime;
-				const diffMins = Math.floor(diffTime / (60 * 1000));
+				const diffMs = new Date() - saveTime;
+				const diffMins = Math.floor(diffMs / (60 * 1000));
 
-				return <div className='snippet' key={index} >
+				let diffString = `about ${diffMins} minutes ago`;
+
+				if(diffMins > 60) diffString = `about ${Math.floor(diffMins / 60)} hours ago`;
+				if(diffMins > (24 * 60)) diffString = `about ${Math.floor(diffMins / (24 * 60))} days ago`;
+				if(diffMins > (7 * 24 * 60)) diffString = `about ${Math.floor(diffMins / (7 * 24 * 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} : about {diffMins} mins ago</span>
+					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
 				</div>;
 			})}
 		</div>;

client/homebrew/pages/editPage/editPage.jsx

@@ -152,6 +152,16 @@ const EditPage = createClass({
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
+	updateBrew : function(newData){
+		this.setState((prevState)=>({
+			brew : {
+				...prevState.brew,
+				style : newData.style,
+				text  : newData.text
+			}
+		}));
+	},
+
 	trySave : function(immediate=false){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
@@ -418,6 +428,7 @@ const EditPage = createClass({
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
 						snippetBundle={this.state.themeBundle.snippets}
+						updateBrew={this.updateBrew}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}