Merge branch 'master' into erase-unnecessary-divs

client/homebrew/pages/userPage/userPage.jsx

@@ -1,12 +1,11 @@
 const React = require('react');
-const createClass = require('create-react-class');
+const { useState } = React;
 const _ = require('lodash');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
-
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
@@ -14,69 +13,48 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
-const UserPage = createClass({
+const UserPage = (props)=>{
-	displayName     : 'UserPage',
+	props = {
-	getDefaultProps : function() {
-		return {
 		username : '',
 		brews    : [],
 		query    : '',
-			error    : null
+		...props
 	};
-	},
-	getInitialState : function() {
-		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `’` : `’s`);
 
-		const brews = _.groupBy(this.props.brews, (brew)=>{
+	const [error, setError] = useState(null);
-			return (brew.published ? 'published' : 'private');
+
-		});
+	const usernameWithS = props.username + (props.username.endsWith('s') ? `’` : `’s`);
+	const groupedBrews = _.groupBy(props.brews, (brew)=>brew.published ? 'published' : 'private');
 
 	const brewCollection = [
 		{
 			title : `${usernameWithS} published brews`,
 			class : 'published',
-				brews : brews.published
+			brews : groupedBrews.published || []
-			}
+		},
-		];
+		...(props.username === global.account?.username ? [{
-		if(this.props.username == global.account?.username){
-			brewCollection.push(
-				{
 			title : `${usernameWithS} unpublished brews`,
 			class : 'unpublished',
-					brews : brews.private
+			brews : groupedBrews.private || []
-				}
+		}] : [])
-			);
+	];
-		}
 
-		return {
+	const navItems = (
-			brewCollection : brewCollection
+		<Navbar>
-		};
-	},
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	navItems : function() {
-		return <Navbar>
 			<Nav.section>
-				{this.state.error ?
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />
 				<RecentNavItem />
 				<Account />
 			</Nav.section>
-		</Navbar>;
+		</Navbar>
-	},
+	);
 
-	render : function(){
+	return (
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
+		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
-	}
+	);
-});
+};
 
 module.exports = UserPage;