Added a hybrid navitem for both recently edited and viewed brews

changelog.md

@@ -1,5 +1,8 @@
 # changelog
 
+### Thursday, 07/07/2016 - v2.2.6
+- Added a new nav item on the homepage for accessing both recently viewed and edited brews (thanks [ChosenSeraph!](https://github.com/stolksdorf/homebrewery/issues/147))
+
 ### Friday, 10/06/2016 - v2.2.4
 - Added an id to each rendered page
 - Allows adding in hyperlinks to specific pages

client/homebrew/navbar/navbar.jsx

@@ -34,7 +34,7 @@ var Navbar = React.createClass({
 				<Nav.item href='/' className='homebrewLogo'>
 					<div>The Homebrewery</div>
 				</Nav.item>
-				<Nav.item>v2.2.5</Nav.item>
+				<Nav.item>v2.2.6</Nav.item>
 
 				{this.renderChromeWarning()}
 			</Nav.section>

client/homebrew/navbar/navbar.less

@@ -62,6 +62,18 @@
 			left     : 0px;
 			z-index  : 10000;
 			width    : 100%;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				background-color : #333;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border-top       : 1px solid #888;
+				&:nth-of-type(1){ background-color: darken(@teal, 20%); }
+				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
+			}
 			.item{
 				.animate(background-color);
 				position         : relative;

client/homebrew/navbar/recent.navitem.jsx

@@ -5,6 +5,9 @@ var Moment = require('moment');
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 
+const VIEW_KEY = 'homebrewery-recently-viewed';
+const EDIT_KEY = 'homebrewery-recently-edited';
+
 var BaseItem = React.createClass({
 	getDefaultProps: function() {
 		return {
@@ -88,7 +91,7 @@ module.exports = {
 			};
 		},
 		render : function(){
-			return <BaseItem text='recently viewed' storageKey='homebrewery-recently-viewed'
+			return <BaseItem text='recently viewed' storageKey={VIEW_KEY}
 				currentBrew={{
 					id : this.props.brew.shareId,
 					title : this.props.brew.title,
@@ -108,7 +111,7 @@ module.exports = {
 			};
 		},
 		render : function(){
-			return <BaseItem text='recently edited' storageKey='homebrewery-recently-edited'
+			return <BaseItem text='recently edited' storageKey={EDIT_KEY}
 				currentBrew={{
 					id : this.props.brew.editId,
 					title : this.props.brew.title,
@@ -117,4 +120,57 @@ module.exports = {
 			/>
 		},
 	}),
+
+	both : React.createClass({
+		getInitialState: function() {
+			return {
+				showDropdown: false,
+				edit : [],
+				view : []
+			};
+		},
+
+		componentDidMount: function() {
+			this.setState({
+				edit : JSON.parse(localStorage.getItem(EDIT_KEY) || '[]'),
+				view : JSON.parse(localStorage.getItem(VIEW_KEY) || '[]')
+			});
+		},
+
+		handleDropdown : function(show){
+			this.setState({
+				showDropdown : show
+			})
+		},
+
+		renderDropdown : function(){
+			if(!this.state.showDropdown) return null;
+
+			var makeItems = (brews) => {
+				return _.map(brews, (brew)=>{
+					return <a href={brew.url} className='item' key={brew.id} target='_blank'>
+						<span className='title'>{brew.title}</span>
+						<span className='time'>{Moment(brew.ts).fromNow()}</span>
+					</a>
+				});
+			};
+
+			return <div className='dropdown'>
+				<h4>edited</h4>
+				{makeItems(this.state.edit)}
+				<h4>viewed</h4>
+				{makeItems(this.state.view)}
+			</div>
+		},
+
+		render : function(){
+			return <Nav.item icon='fa-clock-o' color='grey' className='recent'
+						onMouseEnter={this.handleDropdown.bind(null, true)}
+						onMouseLeave={this.handleDropdown.bind(null, false)}>
+				Recent brews
+				{this.renderDropdown()}
+			</Nav.item>
+		}
+
+	})
 }

client/homebrew/pages/homePage/homePage.jsx

@@ -7,6 +7,7 @@ var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
 var PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
 var IssueNavItem = require('../../navbar/issue.navitem.jsx');
+var RecentNavItem = require('../../navbar/recent.navitem.jsx');
 
 
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
@@ -54,6 +55,7 @@ var HomePage = React.createClass({
 				<Nav.item newTab={true} href='/changelog' color='purple' icon='fa-file-text-o'>
 					Changelog
 				</Nav.item>
+				<RecentNavItem.both />
 				<Nav.item href='/new' color='green' icon='fa-external-link'>
 					New Brew
 				</Nav.item>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "scripts": {
     "postinstall": "gulp prod",
     "start": "node server.js"