diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 9e78ee6ea..58bce39b6 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,6 +53,7 @@ const UserPage = createClass({
},
sortBrewOrder : function(brew){
+ if(!brew.title){brew.title='No Title';};
const mapping = {
'alpha' : _.deburr(brew.title.toLowerCase()),
'created' : moment(brew.createdAt).format(),
@@ -90,6 +92,25 @@ const UserPage = createClass({
;
},
+ handleFilterTextChange : function(e){
+ this.setState({
+ filterString : e.target.value
+ });
+ return;
+ },
+
+ renderFilterOption : function(){
+ return
+
+ | ;
+ },
+
renderSortOptions : function(){
return
@@ -114,6 +135,7 @@ const UserPage = createClass({
{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
+ {this.renderFilterOption()}
@@ -121,7 +143,11 @@ 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));
+ }) : 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..3b1fa0260 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;