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;