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] 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;
+					}
+				}
+			}
 		}
 	}
 }