f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 11:32:39 +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)}