Merge pull request #4836 from 5e-Cleric/add-cleaning-tool-to-admin

brewCleanup to functional component

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,71 +1,72 @@
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React, { useState } from 'react';
 import request from 'superagent';
 
-const BrewCleanup = createReactClass({
-	displayName : 'BrewCleanup',
-	getDefaultProps(){
-		return {};
-	},
-	getInitialState() {
-		return {
-			count : 0,
+const BrewCleanup = ({})=>{
+	const [count, setCount] = useState(0);
+	const [pending, setPending] = useState(false);
+	const [primed, setPrimed] = useState(false);
+	const [error, setError] = useState(null);
 
-			pending : false,
-			primed  : false,
-			err     : null
-		};
-	},
-	prime(){
-		this.setState({ pending: true });
+	const prime = async ()=>{
+		setPending(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 });
+		try {
+			const res = await request.get('/admin/cleanup');
 
-		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='result noBrews'>No Matching Brews found.</div>;
+			setCount(res.body.count);
+			setPrimed(true);
+		} catch (err) {
+			setError(err);
+		} finally {
+			setPending(false);
 		}
+	};
+
+	const cleanup = async ()=>{
+		setPending(true);
+
+		try {
+			const res = await request.post('/admin/cleanup');
+
+			setCount(res.body.count);
+		} catch (err) {
+			setError(err);
+		} finally {
+			setPending(false);
+			setPrimed(false);
+		}
+	};
+	const renderPrimed = ()=>{
+		if(!primed) return;
+
+		if(!count) return <div className='result noBrews'>No Matching Brews found.</div>;
+
 		return <div className='result'>
-			<button onClick={this.cleanup} className='remove'>
-				{this.state.pending
+			<button onClick={()=>cleanup()} className='remove'>
+				{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>
+			<span>Found {count} Brews that could be removed. </span>
 		</div>;
-	},
-	render(){
+	};
+
 	return <div className='brewUtil 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
+		<button onClick={()=>prime()} className='query'>
+			{pending
 				? <i className='fas fa-spin fa-spinner' />
 				: 'Query Brews'
 			}
 		</button>
-			{this.renderPrimed()}
+		{renderPrimed()}
 
-			{this.state.error
-				&& <div className='error noBrews'>{this.state.error.toString()}</div>
-			}
+		{error && <div className='error noBrews'>{error.toString()}</div>}
 	</div>;
-	}
-});
+
+};
 
 export default BrewCleanup;