a few touches as gazook requested

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -5,71 +5,89 @@ import Moment from 'moment';
 const BrewCleanup = ({})=>{
 	const [junkBrewCollection, setJunkBrewCollection] = useState([]);
 	const [lostBrewCollection, setLostBrewCollection] = useState([]);
-	const [pending, setPending] = useState(false);
+	const [pendingJunk, setPendingJunk] = useState(false);
+	const [pendingLost, setPendingLost] = useState(false);
 	const [error, setError] = useState(null);
 
 	const find = async (type)=>{
-		setPending(true);
+		
 
 		if(type === 'junk') try {
+			setPendingJunk(true);
 			const res = await request.get('/admin/cleanupJunk');
 
 			setJunkBrewCollection(res.body.brewCollection);
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
+			setPendingJunk(false);
 		}
 
 		if(type === 'lost') try {
-
+			setPendingLost(true);
 			const res = await request.get('/admin/cleanupLost');
 
 			setLostBrewCollection(res.body.brewCollection);
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
+			setPendingLost(false);
 		}
 	};
 
 	const cleanup = async (type)=>{
-		setPending(true);
 
 		if(type === 'junk') try {
-			console.log('deleting junk')
+			setPendingJunk(true);
+			console.log('deleting junk');
 			const res = await request.post('/admin/cleanupJunk');
 
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
+			setPendingJunk(false);
 			setJunkBrewCollection([]);
 		}
 
 		if(type === 'lost') try {
+			setPendingLost(true);
 			const res = await request.post('/admin/cleanupLost');
 
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
+			setPendingLost(false);
 			setLostBrewCollection([]);
 		}
 	};
 
 	const renderBrewList = (type)=>{
-
 		const brewList = type === 'lost' ? lostBrewCollection : junkBrewCollection;
 
 		if(!brewList || brewList.length === 0) {
-			console.log(brewList);
-			return null;
-		}
-
-		
 			return <>
-			<h2>{`Results - ${brewList.length} brews` }</h2>
+				<h3>{`Results - No brews found` }</h3>
+				<table className='resultsTable'>
+					<thead>
+						<tr>
+							<th>Title</th>
+							<th>Last Update</th>
+							<th>last viewed</th>
+							<th>Storage</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td colSpan={4}><strong>"No brews found"</strong></td>
+						</tr>
+					</tbody>
+				</table>
+			</>;
+		}
+		console.log(type);
+		console.log(brewList);
+		return <>
+			<h3>{`Results - ${brewList.length} brews` }</h3>
 			<table className='resultsTable'>
 				<thead>
 					<tr>
@@ -91,35 +109,33 @@ const BrewCleanup = ({})=>{
 								<td style={{ width: '200px' }}>{Moment(brew.updatedAt).fromNow()}</td>
 								<td>{brew.lastViewed ? Moment(brew.lastViewed).fromNow() : 'No last viewed date'}</td>
 								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
-							</tr>;
+							</tr>
 						})}
 				</tbody>
 			</table>
 		</>;
 	};
 	const renderFound = (type)=>{
-
+		const deleteButton = !(type === 'junk' && junkBrewCollection.length === 0 || type === 'lost' && lostBrewCollection.length === 0); 
-		if(type === 'junk' && junkBrewCollection.length === 0 || type === 'lost' && lostBrewCollection.length === 0) return <div className='result noBrews'>No Matching Brews found.</div>;
 
 		return <div className='result'>
-			
+			{deleteButton && <button onClick={()=>cleanup(type)} className='remove'>
-			<button onClick={()=>cleanup(type)} className='remove'>
+				{pendingLost && type === "lost" || pendingJunk && type === "junk"
-				{pending
 					? <i className='fas fa-spin fa-spinner' />
 					: <span><i className='fas fa-times' /> Remove</span>
 				}
 			</button>
-			<span>Found {type === 'junk' ? junkBrewCollection.length : lostBrewCollection.length} Brews that could be removed. </span>
+			}
 			{renderBrewList(type)}
 		</div>;
 	};
 	const renderJunkBrewCleanup = ()=>{
 		return <div className='junk'>
 			<h3> Junk brews</h3>
-			<p>Removes very short brews to tidy up the database</p>
+			<p>Queries unauthored brews that have not been viewed or <br/>updated in 30 days and are shorter than 140 bytes (up to 300)</p>
 
 			<button onClick={()=>find('junk')} className='query'>
-				{pending
+				{pendingJunk
 					? <i className='fas fa-spin fa-spinner' />
 					: 'Query Brews'
 				}
@@ -132,10 +148,10 @@ const BrewCleanup = ({})=>{
 	const renderLostBrewCleanup = ()=>{
 		return <div className='lost'>
 			<h3> Lost brews</h3>
-			<p>Removes very short brews to tidy up the database</p>
+			<p>Queries unauthored brews that have not been <br/>updated or viewed for 2 years (up to 500)</p>
 
 			<button onClick={()=>find('lost')} className='query'>
-				{pending
+				{pendingLost
 					? <i className='fas fa-spin fa-spinner' />
 					: 'Query Brews'
 				}
@@ -149,6 +165,8 @@ const BrewCleanup = ({})=>{
 	return <div className='brewUtil brewCleanup'>
 		<h2> Brew Cleanup </h2>
 		{renderJunkBrewCleanup()}
+		<br/>
+		<br/>
 		{renderLostBrewCleanup()}
 
 	</div>;