From 495a68893dc4d3abc9f47bdd0cf27010ca61fac7 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 20:52:23 +1200
Subject: [PATCH 1/6] Initial pass at sorting User brews

---
 client/homebrew/pages/userPage/userPage.jsx  | 132 ++++++++++++++++++-
 client/homebrew/pages/userPage/userPage.less |  27 ++++
 2 files changed, 157 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index e6b7530b8..3dd7cbef2 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -24,7 +24,15 @@ const UserPage = createClass({
 	getDefaultProps : function() {
 		return {
 			username : '',
-			brews    : []
+			brews    : [],
+			sortType : 'alpha',
+			sortDir  : 'desc'
+		};
+	},
+	getInitialState : function() {
+		return {
+			sortType : 'alpha',
+			sortDir  : 'desc'
 		};
 	},
 	getUsernameWithS : function() {
@@ -36,13 +44,132 @@ const UserPage = createClass({
 	renderBrews : function(brews){
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
-		const sortedBrews = _.sortBy(brews, (brew)=>{ return brew.title; });
+		const sortedBrews = this.sortBrews(brews, this.state.sortType);
 
 		return _.map(sortedBrews, (brew, idx)=>{
 			return <BrewItem brew={brew} key={idx}/>;
 		});
 	},
 
+	sortBrews : function(brews, sortType){
+		if(sortType == 'alpha') {
+			return _.orderBy(brews, (brew)=>{ return brew.title; }, this.state.sortDir);
+		}
+		if(sortType == 'created'){
+			return _.orderBy(brews, (brew)=>{ return brew.createdAt; }, this.state.sortDir);
+		}
+		if(sortType == 'updated'){
+			return _.orderBy(brews, (brew)=>{ return brew.updatedAt; }, this.state.sortDir);
+		}
+		if(sortType == 'views'){
+			return _.orderBy(brews, (brew)=>{ return brew.views; }, this.state.sortDir);
+		}
+		if(sortType == 'latest'){
+			return _.orderBy(brews, (brew)=>{ return brew.lastViewed; }, this.state.sortDir);
+		}
+		return _.orderBy(brews, (brew)=>{ return brew.title; }, this.state.sortDir);
+	},
+
+	handleSortOptionChange : function(event){
+		this.setState({
+			sortType : event.target.value
+		});
+	},
+
+	handleSortDirChange : function(event){
+		const newDir = (this.state.sortDir == 'asc' ? 'desc' : 'asc');
+		this.setState({
+			sortDir : `${newDir}`
+		});
+	},
+
+	renderSortOptions : function(){
+		return <div className='sort-container'>
+			<table>
+				<tr>
+					<td>
+						<h6>Sort Type :</h6>
+					</td>
+					<td>
+		  		<label>
+							<input
+								type='radio'
+								name='sortType'
+								value='alpha'
+								checked={this.state.sortType == 'alpha'}
+								className='sort-radio'
+								onChange={this.handleSortOptionChange}
+							/>
+			Title
+						</label>
+					</td>
+					<td>
+						<label>
+							<input
+								type='radio'
+								name='sortType'
+								value='created'
+								checked={this.state.sortType == 'created'}
+								className='sort-radio'
+								onChange={this.handleSortOptionChange}
+							/>
+			Created Date
+						</label>
+					</td>
+					<td>
+						<label>
+							<input
+								type='radio'
+								name='sortType'
+								value='updated'
+								checked={this.state.sortType == 'updated'}
+								className='sort-radio'
+								onChange={this.handleSortOptionChange}
+							/>
+			Updated Date
+		  		</label>
+				  </td>
+				  <td>
+				  <label>
+							<input
+								type='radio'
+								name='sortType'
+								value='views'
+								checked={this.state.sortType == 'views'}
+								className='sort-radio'
+								onChange={this.handleSortOptionChange}
+							/>
+			Views
+		  		</label>
+				  </td>
+				  <td>
+				  <label>
+							<input
+								type='radio'
+								name='sortType'
+								value='latest'
+								checked={this.state.sortType == 'latest'}
+								className='sort-radio'
+								onChange={this.handleSortOptionChange}
+							/>
+			Latest
+		  		</label>
+				  </td>
+				  <td>
+						<h6>Direction :</h6>
+					</td>
+					<td>
+						<button
+							onClick={this.handleSortDirChange}
+						>
+							{`${(this.state.sortDir == 'asc' ? '⮝ ASC' : '⮟ DESC')}`}
+						</button>
+					</td>
+				</tr>
+			</table>
+		</div>;
+	},
+
 	getSortedBrews : function(){
 		return _.groupBy(this.props.brews, (brew)=>{
 			return (brew.published ? 'published' : 'private');
@@ -63,6 +190,7 @@ const UserPage = createClass({
 
 			<div className='content V3'>
 				<div className='phb'>
+					{this.renderSortOptions()}
 					<div>
 						<h1>{this.getUsernameWithS()} brews</h1>
 						{this.renderBrews(brews.published)}
diff --git a/client/homebrew/pages/userPage/userPage.less b/client/homebrew/pages/userPage/userPage.less
index d002966de..77f11e564 100644
--- a/client/homebrew/pages/userPage/userPage.less
+++ b/client/homebrew/pages/userPage/userPage.less
@@ -30,4 +30,31 @@
 
 		}
 	}
+	.sort-container{
+		font-family        : 'Open Sans', sans-serif;
+		position           : fixed;
+		top                : 35px;
+		border             : 2px solid #58180D;
+		width              : 675px;
+		background-color   : #EEE5CE;
+		padding            : 2px;
+		text-align         : center;
+		z-index            : 15;
+		h6{
+			text-transform : uppercase;
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			color          : #58180D;
+		}
+		button{
+			background-color : #58180D;
+			border           : 5px double white;
+			width            : 75px;
+		}
+		table{
+			margin-top    : 1px;
+			margin-bottom : 0;
+		}
+	}
 }

From 48e80803f7be45decdeb63cb9939407150c9e73d Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 21:33:20 +1200
Subject: [PATCH 2/6] Ignore case when ordering by title ( a > B )

---
 client/homebrew/pages/userPage/userPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 3dd7cbef2..2b1726dbc 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -53,7 +53,7 @@ const UserPage = createClass({
 
 	sortBrews : function(brews, sortType){
 		if(sortType == 'alpha') {
-			return _.orderBy(brews, (brew)=>{ return brew.title; }, this.state.sortDir);
+			return _.orderBy(brews, (brew)=>{ return brew.title.toLowerCase(); }, this.state.sortDir);
 		}
 		if(sortType == 'created'){
 			return _.orderBy(brews, (brew)=>{ return brew.createdAt; }, this.state.sortDir);
@@ -67,7 +67,7 @@ const UserPage = createClass({
 		if(sortType == 'latest'){
 			return _.orderBy(brews, (brew)=>{ return brew.lastViewed; }, this.state.sortDir);
 		}
-		return _.orderBy(brews, (brew)=>{ return brew.title; }, this.state.sortDir);
+		return _.orderBy(brews, (brew)=>{ return brew.title.toLowerCase(); }, this.state.sortDir);
 	},
 
 	handleSortOptionChange : function(event){

From c91e5784acb33c833d110e9b59fe11763a353bba Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 21:38:22 +1200
Subject: [PATCH 3/6] Change to Unicode characters for asc/desc arrows

---
 client/homebrew/pages/userPage/userPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 2b1726dbc..ff3ea9121 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -162,7 +162,7 @@ const UserPage = createClass({
 						<button
 							onClick={this.handleSortDirChange}
 						>
-							{`${(this.state.sortDir == 'asc' ? '⮝ ASC' : '⮟ DESC')}`}
+							{`${(this.state.sortDir == 'asc' ? '\u2B9D ASC' : '\u2B9F DESC')}`}
 						</button>
 					</td>
 				</tr>

From 54d0e2c483648d5c90e2eb7730a16f9e29da060a Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 22:08:54 +1200
Subject: [PATCH 4/6] Add Lodash deburr to sorting by title

---
 client/homebrew/pages/userPage/userPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index ff3ea9121..9dd72c2ca 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -53,7 +53,7 @@ const UserPage = createClass({
 
 	sortBrews : function(brews, sortType){
 		if(sortType == 'alpha') {
-			return _.orderBy(brews, (brew)=>{ return brew.title.toLowerCase(); }, this.state.sortDir);
+			return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir);
 		}
 		if(sortType == 'created'){
 			return _.orderBy(brews, (brew)=>{ return brew.createdAt; }, this.state.sortDir);
@@ -67,7 +67,7 @@ const UserPage = createClass({
 		if(sortType == 'latest'){
 			return _.orderBy(brews, (brew)=>{ return brew.lastViewed; }, this.state.sortDir);
 		}
-		return _.orderBy(brews, (brew)=>{ return brew.title.toLowerCase(); }, this.state.sortDir);
+		return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir);
 	},
 
 	handleSortOptionChange : function(event){

From b80a249cf7cd193e0d8d3761dd9db35aef9dd426 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 22:40:01 +1200
Subject: [PATCH 5/6] Reduce code duplication in sorting radio options

---
 client/homebrew/pages/userPage/userPage.jsx | 88 ++++++---------------
 1 file changed, 22 insertions(+), 66 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 9dd72c2ca..b32e09f79 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -83,6 +83,22 @@ const UserPage = createClass({
 		});
 	},
 
+	renderSortRadioOption : function(sortTitle, sortValue){
+		return <td>
+			<label>
+				  <input
+					  type='radio'
+					  name='sortType'
+					  value={`${sortValue}`}
+					  checked={this.state.sortType == `${sortValue}`}
+					  className='sort-radio'
+					  onChange={this.handleSortOptionChange}
+				  />
+  		{`${sortTitle}`}
+			  </label>
+		  </td>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<table>
@@ -90,72 +106,12 @@ const UserPage = createClass({
 					<td>
 						<h6>Sort Type :</h6>
 					</td>
-					<td>
-		  		<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='alpha'
-								checked={this.state.sortType == 'alpha'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Title
-						</label>
-					</td>
-					<td>
-						<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='created'
-								checked={this.state.sortType == 'created'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Created Date
-						</label>
-					</td>
-					<td>
-						<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='updated'
-								checked={this.state.sortType == 'updated'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Updated Date
-		  		</label>
-				  </td>
-				  <td>
-				  <label>
-							<input
-								type='radio'
-								name='sortType'
-								value='views'
-								checked={this.state.sortType == 'views'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Views
-		  		</label>
-				  </td>
-				  <td>
-				  <label>
-							<input
-								type='radio'
-								name='sortType'
-								value='latest'
-								checked={this.state.sortType == 'latest'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Latest
-		  		</label>
-				  </td>
-				  <td>
+					{this.renderSortRadioOption('Title', 'alpha')}
+					{this.renderSortRadioOption('Created Date', 'created')}
+					{this.renderSortRadioOption('Updated Date', 'updated')}
+					{this.renderSortRadioOption('Views', 'views')}
+					{/* {this.renderSortRadioOption('Latest', 'latest')} */}
+				    <td>
 						<h6>Direction :</h6>
 					</td>
 					<td>

From 1031e8a55a4e2147aa3c49092a2938556583a46b Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 27 Jul 2021 23:14:05 +1200
Subject: [PATCH 6/6] Changed from Radios to Buttons

---
 client/homebrew/pages/userPage/userPage.jsx  | 98 +++++++++-----------
 client/homebrew/pages/userPage/userPage.less | 27 ++++--
 2 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index b32e09f79..f9a761bab 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -25,14 +25,12 @@ const UserPage = createClass({
 		return {
 			username : '',
 			brews    : [],
-			sortType : 'alpha',
-			sortDir  : 'desc'
 		};
 	},
 	getInitialState : function() {
 		return {
 			sortType : 'alpha',
-			sortDir  : 'desc'
+			sortDir  : 'asc'
 		};
 	},
 	getUsernameWithS : function() {
@@ -51,23 +49,19 @@ const UserPage = createClass({
 		});
 	},
 
-	sortBrews : function(brews, sortType){
-		if(sortType == 'alpha') {
-			return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir);
-		}
-		if(sortType == 'created'){
-			return _.orderBy(brews, (brew)=>{ return brew.createdAt; }, this.state.sortDir);
-		}
-		if(sortType == 'updated'){
-			return _.orderBy(brews, (brew)=>{ return brew.updatedAt; }, this.state.sortDir);
-		}
-		if(sortType == 'views'){
-			return _.orderBy(brews, (brew)=>{ return brew.views; }, this.state.sortDir);
-		}
-		if(sortType == 'latest'){
-			return _.orderBy(brews, (brew)=>{ return brew.lastViewed; }, this.state.sortDir);
-		}
-		return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir);
+	sortBrewOrder : function(brew){
+		const mapping = {
+			'alpha'   : _.deburr(brew.title.toLowerCase()),
+			'created' : brew.createdAt,
+			'updated' : brew.updatedAt,
+			'views'   : brew.views,
+			'latest'  : brew.lastViewed
+		};
+		return mapping[this.state.sortType];
+	},
+
+	sortBrews : function(brews){
+		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
 	handleSortOptionChange : function(event){
@@ -77,51 +71,49 @@ const UserPage = createClass({
 	},
 
 	handleSortDirChange : function(event){
-		const newDir = (this.state.sortDir == 'asc' ? 'desc' : 'asc');
 		this.setState({
-			sortDir : `${newDir}`
+			sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
 		});
 	},
 
-	renderSortRadioOption : function(sortTitle, sortValue){
+	renderSortOption : function(sortTitle, sortValue){
 		return <td>
-			<label>
-				  <input
-					  type='radio'
-					  name='sortType'
+				  <button
 					  value={`${sortValue}`}
-					  checked={this.state.sortType == `${sortValue}`}
-					  className='sort-radio'
-					  onChange={this.handleSortOptionChange}
-				  />
-  		{`${sortTitle}`}
-			  </label>
+					  onClick={this.handleSortOptionChange}
+					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+				  >
+  					{`${sortTitle}`}
+		 		  </button>
 		  </td>;
 	},
 
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<table>
-				<tr>
-					<td>
-						<h6>Sort Type :</h6>
-					</td>
-					{this.renderSortRadioOption('Title', 'alpha')}
-					{this.renderSortRadioOption('Created Date', 'created')}
-					{this.renderSortRadioOption('Updated Date', 'updated')}
-					{this.renderSortRadioOption('Views', 'views')}
-					{/* {this.renderSortRadioOption('Latest', 'latest')} */}
-				    <td>
-						<h6>Direction :</h6>
-					</td>
-					<td>
-						<button
-							onClick={this.handleSortDirChange}
-						>
-							{`${(this.state.sortDir == 'asc' ? '\u2B9D ASC' : '\u2B9F DESC')}`}
-						</button>
-					</td>
-				</tr>
+				<tbody>
+					<tr>
+						<td>
+							<h6>Sort by :</h6>
+						</td>
+						{this.renderSortOption('Title', 'alpha')}
+						{this.renderSortOption('Created Date', 'created')}
+						{this.renderSortOption('Updated Date', 'updated')}
+						{this.renderSortOption('Views', 'views')}
+						{/* {this.renderSortOption('Latest', 'latest')} */}
+				    	<td>
+							<h6>Direction :</h6>
+						</td>
+						<td>
+							<button
+								onClick={this.handleSortDirChange}
+								className='sortDir'
+							>
+								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
+							</button>
+						</td>
+					</tr>
+				</tbody>
 			</table>
 		</div>;
 	},
diff --git a/client/homebrew/pages/userPage/userPage.less b/client/homebrew/pages/userPage/userPage.less
index 77f11e564..c7e8621e3 100644
--- a/client/homebrew/pages/userPage/userPage.less
+++ b/client/homebrew/pages/userPage/userPage.less
@@ -47,14 +47,27 @@
 			font-weight    : bold;
 			color          : #58180D;
 		}
-		button{
-			background-color : #58180D;
-			border           : 5px double white;
-			width            : 75px;
-		}
 		table{
-			margin-top    : 1px;
-			margin-bottom : 0;
+			margin : 0px;
+			vertical-align : middle;
+			tbody tr{
+				background-color: transparent !important;
+			button{
+					background-color : transparent;
+					color            : #58180D;
+					font-family    : 'Open Sans', sans-serif;
+					font-size      : 11px;
+					text-transform : uppercase;
+					font-weight      : normal;
+					&.active{
+						font-weight : bold;
+						border      : 2px solid #58180D;
+					}
+					&.sortDir{
+						width : 75px;
+					}
+				}
+			}
 		}
 	}
 }