brewCleanup to functional component

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,71 +1,59 @@
-import React from 'react';
+import React, { useState } from 'react';
-import createReactClass from 'create-react-class';
 import request from 'superagent';
 
-const BrewCleanup = createReactClass({
+const BrewCleanup = ({})=>{
-	displayName : 'BrewCleanup',
+	const [count, setCount] = useState(0);
-	getDefaultProps(){
+	const [pending, setPending] = useState(false);
-		return {};
+	const [primed, setPrimed] = useState(false);
-	},
+	const [error, setError] = useState(null);
-	getInitialState() {
-		return {
-			count : 0,
 
-			pending : false,
+	const prime = ()=>{
-			primed  : false,
+		setPending(true);
-			err     : null
-		};
-	},
-	prime(){
-		this.setState({ pending: true });
 
 		request.get('/admin/cleanup')
-			.then((res)=>this.setState({ count: res.body.count, primed: true }))
+			.then((res)=>{setCount(res.body.count);setPrimed(true);})
-			.catch((err)=>this.setState({ error: err }))
+			.catch((err)=>setError(err))
-			.finally(()=>this.setState({ pending: false }));
+			.finally(()=>setPending(false));
-	},
+	};
-	cleanup(){
+	const cleanup = ()=>{
-		this.setState({ pending: true });
+		setPending(true);
 
 		request.post('/admin/cleanup')
-			.then((res)=>this.setState({ count: res.body.count }))
+			.then((res)=>setCount(res.body.count))
-			.catch((err)=>this.setState({ error: err }))
+			.catch((err)=>setError(err))
-			.finally(()=>this.setState({ pending: false, primed: false }));
+			.finally(()=>{setPending(false);setPrimed(false);});
-	},
+	};
-	renderPrimed(){
+	const renderPrimed = ()=>{
-		if(!this.state.primed) return;
+		if(!primed) return;
+
+		if(!count) return <div className='result noBrews'>No Matching Brews found.</div>;
 
-		if(!this.state.count){
-			return <div className='result noBrews'>No Matching Brews found.</div>;
-		}
 		return <div className='result'>
-			<button onClick={this.cleanup} className='remove'>
+			<button onClick={()=>cleanup()} className='remove'>
-				{this.state.pending
+				{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'>
+	return <div className='brewUtil brewCleanup'>
-				{this.state.pending
+		<h2> Brew Cleanup </h2>
-					? <i className='fas fa-spin fa-spinner' />
+		<p>Removes very short brews to tidy up the database</p>
-					: 'Query Brews'
-				}
-			</button>
-			{this.renderPrimed()}
 
-			{this.state.error
+		<button onClick={()=>prime()} className='query'>
-				&& <div className='error noBrews'>{this.state.error.toString()}</div>
+			{pending
+				? <i className='fas fa-spin fa-spinner' />
+				: 'Query Brews'
 			}
-		</div>;
+		</button>
-	}
+		{renderPrimed()}
-});
+
+		{error && <div className='error noBrews'>{error.toString()}</div>}
+	</div>;
+
+};
 
 export default BrewCleanup;