From fd8020dcc4c6ecd7881d718c0b99939f9e1bb7e6 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sat, 7 Aug 2021 14:41:11 +1200
Subject: [PATCH] Add tooltip and classNames to UserPage and BrewItem

---
 client/homebrew/pages/userPage/brewItem/brewItem.jsx | 11 +++++++++--
 client/homebrew/pages/userPage/userPage.jsx          |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/homebrew/pages/userPage/brewItem/brewItem.jsx b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
index b24bad363..f0557c47e 100644
--- a/client/homebrew/pages/userPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
@@ -99,11 +99,18 @@ const BrewItem = createClass({
 		</span>;
 	},
 
+	getTooltipData : function(){
+		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
+		let outputString = `Created: ${this.props.brew.createdAt ? moment(this.props.brew.createdAt).local().format(dateFormatString) : 'UNKNOWN'}\n`;
+		outputString +=    `Last updated: ${this.props.brew.updatedAt ? moment(this.props.brew.updatedAt).local().format(dateFormatString) : 'UNKNOWN'}`;
+		return  outputString;
+	},
+
 	render : function(){
 		const brew = this.props.brew;
-		return <div className='brewItem'>
+		return <div className='brewItem' title={this.getTooltipData()}>
 			<h2>{brew.title}</h2>
-			<p className='description' >{brew.description}</p>
+			<p className='description'>{brew.description}</p>
 			<hr />
 
 			<div className='info'>
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 837da4359..be3c04a5b 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -140,11 +140,11 @@ const UserPage = createClass({
 			<div className='content V3'>
 				<div className='phb'>
 					{this.renderSortOptions()}
-					<div>
+					<div className='published'>
 						<h1>{this.getUsernameWithS()} brews</h1>
 						{this.renderBrews(brews.published)}
 					</div>
-					<div>
+					<div className='unpublished'>
 						<h1>{this.getUsernameWithS()} unpublished brews</h1>
 						{this.renderBrews(brews.private)}
 					</div>