diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index b360adc6e..0fcef8d9c 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 { filterString : this.props.query?.filter || '', sortType : this.props.query?.sort || 'alpha', sortDir : this.props.query?.dir || 'asc', - query : this.props.query + 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