Finished stats and brew lookup on admin panel

client/admin/brewLookup/brewLookup.jsx

@@ -0,0 +1,86 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+const request = require('superagent');
+const Moment = require('moment');
+
+
+const BrewLookup = createClass({
+	getDefaultProps() {
+		return {
+			adminKey : '',
+		};
+	},
+	getInitialState() {
+		return {
+			query      : '',
+			foundBrew  : null,
+			searching  : false,
+			error      : null
+		};
+	},
+
+	handleChange(e){
+		this.setState({ query : e.target.value });
+	},
+	lookup(){
+		this.setState({ searching: true, error: null });
+
+		request.get(`/admin/lookup/${this.state.query}`)
+			.query({ admin_key: this.props.adminKey })
+			.then((res)=> this.setState({foundBrew : res.body}))
+			.catch((err)=>this.setState({ error : err }))
+			.finally(()=>this.setState({ searching : false }))
+	},
+
+	renderFoundBrew(){
+		const brew = this.state.foundBrew;
+		return <div className='foundBrew'>
+			<dl>
+				<dt>Title</dt>
+				<dd>{brew.title}</dd>
+
+				<dt>Authors</dt>
+				<dd>{brew.authors.join(', ')}</dd>
+
+				<dt>Edit Link</dt>
+				<dd><a href={`/edit/${brew.editId}`} target='_blank' rel='noopener noreferrer'>/edit/{brew.editId}</a></dd>
+
+				<dt>Share Link</dt>
+				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
+
+				<dt>Last Updated</dt>
+				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
+
+				<dt>Num of Views</dt>
+				<dd>{brew.views}</dd>
+			</dl>
+		</div>;
+	},
+
+	render(){
+		return <div className='brewLookup'>
+			<h2>Brew Lookup</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
+			<button onClick={this.lookup}>
+				<i className={cx('fa', {
+					'fa-search' : !this.state.searching,
+					'fa-spin fa-spinner' : this.state.searching,
+				})} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error}</div>
+			}
+
+			{this.state.foundBrew
+				? this.renderFoundBrew()
+				: <div className='noBrew'>No brew found.</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = BrewLookup;

client/admin/brewLookup/brewLookup.less

@@ -0,0 +1,30 @@
+
+.brewLookup{
+	input{
+		height        : 33px;
+		margin-bottom : 20px;
+		padding       : 0px 10px;
+		font-family   : monospace;
+	}
+	button{
+		vertical-align : middle;
+		height         : 37px;
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			height      : 1em;
+			margin-left : @maxItemWidth + 6px;
+			padding     : 0 0 0.5em 0;
+		}
+	}
+}