Update Admin pages

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -0,0 +1,75 @@
+require('./brewCleanup.less');
+const React       = require('react');
+const createClass = require('create-react-class');
+const cx          = require('classnames');
+
+const request = require('superagent');
+
+
+const BrewCleanup = createClass({
+	displayName : 'BrewCleanup',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState() {
+		return {
+			count : 0,
+
+			pending : false,
+			primed  : false,
+			err     : null
+		};
+	},
+	prime(){
+		this.setState({ pending: true });
+
+		request.get('/admin/cleanup')
+			.then((res)=>this.setState({ count: res.body.count, primed: true }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false }));
+	},
+	cleanup(){
+		this.setState({ pending: true });
+
+		request.post('/admin/cleanup')
+			.then((res)=>this.setState({ count: res.body.count }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false, primed: false }));
+	},
+	renderPrimed(){
+		if(!this.state.primed) return;
+
+		if(!this.state.count){
+			return <div className='removeBox'>No Matching Brews found.</div>;
+		}
+		return <div className='removeBox'>
+			<button onClick={this.cleanup} className='remove'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-times' /> Remove</span>
+				}
+			</button>
+			<span>Found {this.state.count} Brews that could be removed. </span>
+		</div>;
+	},
+	render(){
+		return <div className='BrewCleanup'>
+			<h2> Brew Cleanup </h2>
+			<p>Removes very short brews to tidy up the database</p>
+
+			<button onClick={this.prime} className='query'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{this.renderPrimed()}
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = BrewCleanup;

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -0,0 +1,10 @@
+.BrewCleanup{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -0,0 +1,92 @@
+require('./brewCompress.less');
+const React       = require('react');
+const createClass = require('create-react-class');
+const cx          = require('classnames');
+
+const request = require('superagent');
+
+
+const BrewCompress = createClass({
+	displayName : 'BrewCompress',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState() {
+		return {
+			count      : 0,
+			batchRange : 0,
+
+			pending : false,
+			primed  : false,
+			err     : null,
+			ids     : null
+		};
+	},
+	prime(){
+		this.setState({ pending: true });
+
+		request.get('/admin/finduncompressed')
+			.then((res)=>this.setState({ count: res.body.count, primed: true, ids: res.body.ids }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false }));
+	},
+	cleanup(){
+		const brews = this.state.ids;
+		const compressBatches = ()=>{
+			if(brews.length == 0){
+				this.setState({ pending: false, primed: false });
+				return;
+			}
+			const batch = brews.splice(0, 1000);	// Process brews in batches of 1000
+			this.setState({ batchRange: this.state.count - brews.length });
+			batch.forEach((id, idx)=>{
+				request.put(`/admin/compress/${id}`)
+					.catch((err)=>this.setState({ error: err }));
+			});
+			setTimeout(compressBatches, 10000);		//Wait 10 seconds between batches
+		};
+
+		this.setState({ pending: true });
+
+		compressBatches();
+	},
+	renderPrimed(){
+		if(!this.state.primed) return;
+
+		if(!this.state.count){
+			return <div className='removeBox'>No Matching Brews found.</div>;
+		}
+		return <div className='removeBox'>
+			<button onClick={this.cleanup} className='remove'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-compress' /> compress </span>
+				}
+			</button>
+			{this.state.pending
+				? <span>Compressing {this.state.batchRange} brews. </span>
+				: <span>Found {this.state.count} Brews that could be compressed. </span>
+			}
+		</div>;
+	},
+	render(){
+		return <div className='BrewCompress'>
+			<h2> Brew Compression </h2>
+			<p>Compresses the text in brews to binary</p>
+
+			<button onClick={this.prime} className='query'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{this.renderPrimed()}
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = BrewCompress;

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -0,0 +1,10 @@
+.BrewCompress{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -0,0 +1,82 @@
+require('./brewLookup.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const cx    = require('classnames');
+
+const request = require('superagent');
+const Moment = require('moment');
+
+
+const BrewLookup = createClass({
+	getDefaultProps() {
+		return {};
+	},
+	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}`)
+			.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('fas', {
+					'fa-search'          : !this.state.searching,
+					'fa-spin fa-spinner' : this.state.searching,
+				})} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.foundBrew
+				? this.renderFoundBrew()
+				: <div className='noBrew'>No brew found.</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = BrewLookup;

client/admin/brewUtils/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;
+		}
+	}
+}

client/admin/brewUtils/brewUtils.jsx

@@ -0,0 +1,24 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+
+const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+const BrewCompress = require ('./brewCompress/brewCompress.jsx');
+const Stats = require('./stats/stats.jsx');
+
+const BrewUtils = createClass({
+	render : function(){
+		return <>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>;
+	}
+});
+
+module.exports = BrewUtils;

client/admin/brewUtils/stats/stats.jsx

@@ -0,0 +1,46 @@
+require('./stats.less');
+const React       = require('react');
+const createClass = require('create-react-class');
+const cx          = require('classnames');
+
+const request = require('superagent');
+
+
+const Stats = createClass({
+	displayName : 'Stats',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState(){
+		return {
+			stats : {
+				totalBrews : 0
+			},
+			fetching : false
+		};
+	},
+	componentDidMount(){
+		this.fetchStats();
+	},
+	fetchStats(){
+		this.setState({ fetching: true });
+		request.get('/admin/stats')
+			.then((res)=>this.setState({ stats: res.body }))
+			.finally(()=>this.setState({ fetching: false }));
+	},
+	render(){
+		return <div className='Stats'>
+			<h2> Stats </h2>
+			<dl>
+				<dt>Total Brew Count</dt>
+				<dd>{this.state.stats.totalBrews}</dd>
+			</dl>
+
+			{this.state.fetching
+				&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
+			}
+		</div>;
+	}
+});
+
+module.exports = Stats;

client/admin/brewUtils/stats/stats.less

@@ -0,0 +1,28 @@
+
+.Stats{
+	position : relative;
+	.pending{
+		position         : absolute;
+		top              : 0px;
+		left             : 0px;
+		height           : 100%;
+		width            : 100%;
+		background-color : rgba(238,238,238, 0.5);
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			margin  : 0 0 0 @maxItemWidth + 10px;
+			padding : 0 0 0.5em 0;
+		}
+	}
+}