+ {brew.tags ? <>
+
+ {brew.tags.join(', ')}
+
+
+ : <>
+ }
{brew.authors?.join(', ')}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index efd9e3f4a..7df89ae90 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -6,6 +6,8 @@ const moment = require('moment');
const BrewItem = require('./brewItem/brewItem.jsx');
+const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE-VISIBILITY';
+
const ListPage = createClass({
displayName : 'ListPage',
getDefaultProps : function() {
@@ -21,14 +23,47 @@ const ListPage = createClass({
};
},
getInitialState : function() {
+ // HIDE ALL GROUPS UNTIL LOADED
+ const brewCollection = this.props.brewCollection.map((brewGroup)=>{
+ brewGroup.visible = false;
+ return brewGroup;
+ });
+
return {
- sortType : 'alpha',
- sortDir : 'asc',
filterString : this.props.query?.filter || '',
- query : this.props.query
+ sortType : this.props.query?.sort || 'alpha',
+ sortDir : this.props.query?.dir || 'asc',
+ query : this.props.query,
+ brewCollection : brewCollection
};
},
+ componentDidMount : function() {
+ // SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
+ window.onbeforeunload = this.saveToLocalStorage;
+
+ // LOAD FROM LOCAL STORAGE
+ if(typeof window !== 'undefined') {
+ const brewCollection = this.props.brewCollection.map((brewGroup)=>{
+ brewGroup.visible = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`) ?? 'true')=='true';
+ return brewGroup;
+ });
+ this.setState({
+ brewCollection : brewCollection
+ });
+ };
+ },
+
+ componentWillUnmount : function() {
+ window.onbeforeunload = function(){};
+ },
+
+ saveToLocalStorage : function() {
+ this.state.brewCollection.map((brewGroup)=>{
+ localStorage.setItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`, `${brewGroup.visible}`);
+ });
+ },
+
renderBrews : function(brews){
if(!brews || !brews.length) return
No Brews.
;
@@ -50,14 +85,18 @@ const ListPage = createClass({
},
handleSortOptionChange : function(event){
+ this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
this.setState({
sortType : event.target.value
});
},
handleSortDirChange : function(event){
+ const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
+
+ this.updateUrl(this.state.filterString, this.state.sortType, newDir);
this.setState({
- sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
+ sortDir : newDir
});
},
@@ -77,19 +116,22 @@ const ListPage = createClass({
this.setState({
filterString : e.target.value,
});
- this.updateUrl(e.target.value);
+ this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
return;
},
- updateUrl : function(filterTerm){
+ updateUrl : function(filterTerm, sortType, sortDir){
const url = new URL(window.location.href);
const urlParams = new URLSearchParams(url.search);
- if(urlParams.get('filter') == filterTerm)
- return;
+
+ urlParams.set('sort', sortType);
+ urlParams.set('dir', sortDir);
+
if(!filterTerm)
urlParams.delete('filter');
else
urlParams.set('filter', filterTerm);
+
url.search = urlParams;
window.history.replaceState(null, null, url);
},
@@ -149,11 +191,22 @@ const ListPage = createClass({
return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
},
+ toggleBrewCollectionState : function(brewGroupClass) {
+ this.setState((prevState)=>({
+ brewCollection : prevState.brewCollection.map(
+ (brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
+ )
+ }));
+ },
+
renderBrewCollection : function(brewCollection){
+ if(brewCollection == []) return
+
No Brews
+ ;
return _.map(brewCollection, (brewGroup, idx)=>{
return
-
{brewGroup.title || 'No Title'}
- {this.renderBrews(this.getSortedBrews(brewGroup.brews))}
+ {this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}
+ {brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <>}
;
});
},
@@ -166,7 +219,7 @@ const ListPage = createClass({
{this.renderSortOptions()}
- {this.renderBrewCollection(this.props.brewCollection)}
+ {this.renderBrewCollection(this.state.brewCollection)}