Initial pass at sorting User brews

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)}

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