Merge branch 'master' of https://github.com/naturalcrit/homebrewery

client/homebrew/homebrew.less

@@ -9,6 +9,7 @@
 		flex-direction   : column;
 		.content{
 			position   : relative;
+			overflow-y : hidden;
 			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
 		}

client/homebrew/navbar/recent.navitem.jsx

@@ -1,131 +1,21 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-const VIEW_KEY = 'homebrewery-recently-viewed';
 const EDIT_KEY = 'homebrewery-recently-edited';
+const VIEW_KEY = 'homebrewery-recently-viewed';
+
+
+const RecentItems = createClass({
 
-const BaseItem = createClass({
 	getDefaultProps : function() {
 		return {
 			storageKey : '',
-			text        : '',
+			showEdit   : false,
-			currentBrew : {
+			showView   : false
-				title : '',
-				id    : '',
-				url   : ''
-			}
-		};
-	},
-	getInitialState : function() {
-		return {
-			showDropdown : false,
-			brews        : []
-		};
-	},
-
-	componentDidMount : function() {
-		let brews = JSON.parse(localStorage.getItem(this.props.storageKey) || '[]');
-
-		brews = _.filter(brews, (brew)=>{
-			return brew.id !== this.props.currentBrew.id;
-		});
-		if(this.props.currentBrew.id){
-			brews.unshift({
-				id    : this.props.currentBrew.id,
-				url   : this.props.currentBrew.url,
-				title : this.props.currentBrew.title,
-				ts    : Date.now()
-			});
-		}
-		brews = _.slice(brews, 0, 8);
-		localStorage.setItem(this.props.storageKey, JSON.stringify(brews));
-		this.setState({
-			brews : brews
-		});
-	},
-
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show
-		});
-	},
-
-	renderDropdown : function(){
-		if(!this.state.showDropdown) return null;
-
-		const items = _.map(this.state.brews, (brew)=>{
-			return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer'>
-				<span className='title'>{brew.title}</span>
-				<span className='time'>{Moment(brew.ts).fromNow()}</span>
-			</a>;
-		});
-
-		return <div className='dropdown'>{items}</div>;
-	},
-
-	render : function(){
-		return <Nav.item icon='fa-clock-o' color='grey' className='recent'
-			onMouseEnter={()=>this.handleDropdown(true)}
-			onMouseLeave={()=>this.handleDropdown(false)}>
-			{this.props.text}
-			{this.renderDropdown()}
-		</Nav.item>;
-	},
-
-});
-
-
-
-module.exports = {
-	viewed : createClass({
-		getDefaultProps : function() {
-			return {
-				brew : {
-					title   : '',
-					shareId : ''
-				}
-			};
-		},
-		render : function(){
-			return <BaseItem text='recently viewed' storageKey={VIEW_KEY}
-				currentBrew={{
-					id    : this.props.brew.shareId,
-					title : this.props.brew.title,
-					url   : `/share/${this.props.brew.shareId}`
-				}}
-			/>;
-		},
-	}),
-
-	edited : createClass({
-		getDefaultProps : function() {
-			return {
-				brew : {
-					title  : '',
-					editId : ''
-				}
-			};
-		},
-		render : function(){
-			return <BaseItem text='recently edited' storageKey={EDIT_KEY}
-				currentBrew={{
-					id    : this.props.brew.editId,
-					title : this.props.brew.title,
-					url   : `/edit/${this.props.brew.editId}`
-				}}
-			/>;
-		},
-	}),
-
-	both : createClass({
-		getDefaultProps : function() {
-			return {
-				errorId : null
 		};
 	},
 
@@ -139,21 +29,40 @@ module.exports = {
 
 	componentDidMount : function() {
 
+	//== Load recent items list ==//
 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 		let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
 
-			if(this.props.errorId){
+		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
-				edited = _.filter(edited, (edit)=>{
+		if(this.props.storageKey == 'edit'){
-					return edit.id !== this.props.errorId;
+			edited = _.filter(edited, (brew)=>{
+				return brew.id !== this.props.brew.editId;
 			});
-				viewed = _.filter(viewed, (view)=>{
+			edited.unshift({
-					return view.id !== this.props.errorId;
+				id    : this.props.brew.editId,
+				title : this.props.brew.title,
+				url   : `/edit/${this.props.brew.editId}`,
+				ts    : Date.now()
 			});
+		}
+		if(this.props.storageKey == 'view'){
+			viewed = _.filter(viewed, (brew)=>{
+				return brew.id !== this.props.brew.shareId;
+			});
+			viewed.unshift({
+				id    : this.props.brew.shareId,
+				title : this.props.brew.title,
+				url   : `/share/${this.props.brew.shareId}`,
+				ts    : Date.now()
+			});
+		}
+
+		//== Store the updated lists (up to 8 items each) ==//
+		edited = _.slice(edited, 0, 8);
+		viewed = _.slice(viewed, 0, 8);
 
 		localStorage.setItem(EDIT_KEY, JSON.stringify(edited));
 		localStorage.setItem(VIEW_KEY, JSON.stringify(viewed));
-			}
-
 
 		this.setState({
 			edit : edited,
@@ -173,17 +82,21 @@ module.exports = {
 		const makeItems = (brews)=>{
 			return _.map(brews, (brew)=>{
 				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer'>
-						<span className='title'>{brew.title}</span>
+					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 				</a>;
 			});
 		};
 
 		return <div className='dropdown'>
-				<h4>edited</h4>
+			{(this.props.showEdit && this.props.showView) ?
-				{makeItems(this.state.edit)}
+				<h4>edited</h4> : null }
-				<h4>viewed</h4>
+			{this.props.showEdit ?
-				{makeItems(this.state.view)}
+				makeItems(this.state.edit) : null }
+			{(this.props.showEdit && this.props.showView) ?
+				<h4>viewed</h4>	: null }
+			{this.props.showView ?
+				makeItems(this.state.view) : null }
 		</div>;
 	},
 
@@ -191,10 +104,40 @@ module.exports = {
 		return <Nav.item icon='fa-clock-o' color='grey' className='recent'
 			onMouseEnter={()=>this.handleDropdown(true)}
 			onMouseLeave={()=>this.handleDropdown(false)}>
-				Recent brews
+			{this.props.text}
 			{this.renderDropdown()}
 		</Nav.item>;
 	}
 
-	})
+});
+
+module.exports = {
+
+	edited : (props)=>{
+		return <RecentItems
+			brew={props.brew}
+			storageKey={props.storageKey}
+			text='recently edited'
+			showEdit={true}
+		/>;
+	},
+
+	viewed : (props)=>{
+		return <RecentItems
+			brew={props.brew}
+			storageKey={props.storageKey}
+			text='recently viewed'
+			showView={true}
+		/>;
+	},
+
+	both : (props)=>{
+		return <RecentItems
+			brew={props.brew}
+			storageKey={props.storageKey}
+			text='recent brews'
+			showEdit={true}
+			showView={true}
+		/>;
+	}
 };

client/homebrew/pages/editPage/editPage.jsx

@@ -10,7 +10,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 const ReportIssue = require('../../navbar/issue.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
-//const RecentlyEdited = require('../../navbar/recent.navitem.jsx').edited;
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -186,14 +186,15 @@ const EditPage = createClass({
 			<Nav.section>
 				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>
+
 			<Nav.section>
 				{this.renderSaveButton()}
-				{/*<RecentlyEdited brew={this.props.brew} />*/}
 				<ReportIssue />
 				<Nav.item newTab={true} href={`/share/${this.props.brew.shareId}`} color='teal' icon='fa-share-alt'>
 					Share
 				</Nav.item>
 				<PrintLink shareId={this.props.brew.shareId} />
+				<RecentNavItem brew={this.props.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
 		</Navbar>;

client/homebrew/pages/errorPage/errorPage.jsx

@@ -7,7 +7,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
 const IssueNavItem = require('../../navbar/issue.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
@@ -33,7 +33,7 @@ const ErrorPage = createClass({
 				<Nav.section>
 					<PatreonNavItem />
 					<IssueNavItem />
-					<RecentNavItem.both errorId={this.props.errorId} />
+					<RecentNavItem />
 				</Nav.section>
 			</Navbar>
 

client/homebrew/pages/homePage/homePage.jsx

@@ -8,7 +8,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
 const IssueNavItem = require('../../navbar/issue.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 
 
@@ -59,7 +59,7 @@ const HomePage = createClass({
 				<Nav.item newTab={true} href='/changelog' color='purple' icon='fa-file-text-o'>
 					Changelog
 				</Nav.item>
-				<RecentNavItem.both />
+				<RecentNavItem />
 				<AccountNavItem />
 				{/*}
 				<Nav.item href='/new' color='green' icon='fa-external-link'>

client/homebrew/pages/newPage/newPage.jsx

@@ -9,6 +9,7 @@ const Markdown = require('naturalcrit/markdown.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const IssueNavItem = require('../../navbar/issue.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
@@ -135,6 +136,7 @@ const NewPage = createClass({
 				{this.renderSaveButton()}
 				{this.renderLocalPrintButton()}
 				<IssueNavItem />
+				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
 		</Navbar>;

client/homebrew/pages/sharePage/sharePage.jsx

@@ -7,7 +7,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const ReportIssue = require('../../navbar/issue.navitem.jsx');
-//const RecentlyViewed = require('../../navbar/recent.navitem.jsx').viewed;
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 
 
@@ -53,11 +53,11 @@ const SharePage = createClass({
 
 				<Nav.section>
 					<ReportIssue />
-					{/*<RecentlyViewed brew={this.props.brew} />*/}
 					<PrintLink shareId={this.props.brew.shareId} />
 					<Nav.item href={`/source/${this.props.brew.shareId}`} color='teal' icon='fa-code'>
 						source
 					</Nav.item>
+					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />
 				</Nav.section>
 			</Navbar>

client/homebrew/pages/userPage/userPage.jsx

@@ -6,7 +6,7 @@ const cx    = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 
-const RecentNavItem = require('../../navbar/recent.navitem.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
 
@@ -57,7 +57,7 @@ const UserPage = createClass({
 		return <div className='userPage page'>
 			<Navbar>
 				<Nav.section>
-					<RecentNavItem.both />
+					<RecentNavItem />
 					<Account />
 				</Nav.section>
 			</Navbar>