diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 206e58fc7..df96b9804 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -31,8 +31,9 @@ const UserPage = createClass({
},
getInitialState : function() {
return {
- sortType : 'alpha',
- sortDir : 'asc'
+ sortType : 'alpha',
+ sortDir : 'asc',
+ filterString : ''
};
},
getUsernameWithS : function() {
@@ -52,7 +53,7 @@ const UserPage = createClass({
},
sortBrewOrder : function(brew){
- if(!brew.title){brew.title = 'No Title';};
+ if(!brew.title){brew.title = 'No Title';}
const mapping = {
'alpha' : _.deburr(brew.title.toLowerCase()),
'created' : moment(brew.createdAt).format(),
@@ -91,6 +92,26 @@ const UserPage = createClass({
;
},
+ handleFilterTextChange : function(e){
+ this.setState({
+ filterString : e.target.value
+ });
+ return;
+ },
+
+ renderFilterOption : function(){
+ return
+
+ | ;
+ },
+
renderSortOptions : function(){
return
@@ -115,6 +136,7 @@ const UserPage = createClass({
{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
+ {this.renderFilterOption()}
@@ -122,7 +144,12 @@ const UserPage = createClass({
},
getSortedBrews : function(){
- return _.groupBy(this.props.brews, (brew)=>{
+ const testString = _.deburr(this.state.filterString).toLowerCase();
+ const brewCollection = this.state.filterString ? _.filter(this.props.brews, (brew)=>{
+ return (_.deburr(brew.title).toLowerCase().includes(testString)) ||
+ (_.deburr(brew.description).toLowerCase().includes(testString));
+ }) : this.props.brews;
+ return _.groupBy(brewCollection, (brew)=>{
return (brew.published ? 'published' : 'private');
});
},
diff --git a/client/homebrew/pages/userPage/userPage.less b/client/homebrew/pages/userPage/userPage.less
index c7e8621e3..d968aab9a 100644
--- a/client/homebrew/pages/userPage/userPage.less
+++ b/client/homebrew/pages/userPage/userPage.less
@@ -34,8 +34,9 @@
font-family : 'Open Sans', sans-serif;
position : fixed;
top : 35px;
+ left : calc(50vw - 408px);
border : 2px solid #58180D;
- width : 675px;
+ width : 800px;
background-color : #EEE5CE;
padding : 2px;
text-align : center;
@@ -52,6 +53,9 @@
vertical-align : middle;
tbody tr{
background-color: transparent !important;
+ i{
+ padding-right : 5px
+ }
button{
background-color : transparent;
color : #58180D;