From b3376435b9447378dabb1960ebb5c8036ad3017b Mon Sep 17 00:00:00 2001
From: Eric Scheid <eric.scheid@ironclad.com.au>
Date: Thu, 19 Dec 2019 04:49:09 +1100
Subject: [PATCH] purty apostrophes; containerise brew collections

NB: .brewItem:nth-child(2n+1) {...} counts all children of the contain, not just the .brewItem elements.
This meant if there were an even number of published brews, the style rule got applied to the wrong unpublished brews because there's an <h1> jigging the count.
---
 client/homebrew/pages/userPage/userPage.jsx | 27 ++++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index fd48007c2..45d6aadb3 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -42,17 +42,17 @@ const UserPage = createClass({
 		});
 	},
 
-	renderPrivateBrews : function(privateBrews){
-		if(!privateBrews || !privateBrews.length) return;
-
-		return [
-			<h1>{this.props.username}'s unpublished brews</h1>,
-			this.renderBrews(privateBrews)
-		];
-	},
-
 	render : function(){
 		const brews = this.getSortedBrews();
+		const publishedBrews = 
+					<h1>{this.props.username}&rsquo;s brews</h1>
+					{this.renderBrews(brews.published)};
+		let privateBrews = '';
+		if(privateBrews && privateBrews.length) {
+			privateBrews = 
+					<h1>{this.props.username}&rsquo;s unpublished brews</h1>
+					{this.renderBrews(brews.private)};
+		}
 
 		return <div className='userPage page'>
 			<Navbar>
@@ -64,9 +64,12 @@ const UserPage = createClass({
 
 			<div className='content'>
 				<div className='phb'>
-					<h1>{this.props.username}'s brews</h1>
-					{this.renderBrews(brews.published)}
-					{this.renderPrivateBrews(brews.private)}
+					<div className='published'>
+						{publishedBrews}
+					</div>
+					<div className='private'>
+						{privateBrews}
+					</div>
 				</div>
 			</div>
 		</div>;