f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 20:33:51 +00:00
Code Wiki Activity

Initial pass at sorting User brews

Browse Source
This commit is contained in:
G.Ambatte
2021-07-26 20:52:23 +12:00
parent 3948e17da2
commit 495a68893d
2 changed files with 157 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
client/homebrew/pages/userPage/userPage.jsx
View File

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

27
client/homebrew/pages/userPage/userPage.less
View File

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