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
No Brews.
; @@ -156,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)) : <>}
; }); }, @@ -173,7 +219,7 @@ const ListPage = createClass({
{this.renderSortOptions()} - {this.renderBrewCollection(this.props.brewCollection)} + {this.renderBrewCollection(this.state.brewCollection)}
; diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 64131e35b..d4efbe445 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -74,4 +74,26 @@ } } } + h1 { + cursor: pointer; + &.active { + color: #58180D; + } + &.inactive { + color: #707070; + + } + &.active::before, &.inactive::before { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + font-size: 0.6cm; + padding-right: 0.5em; + } + &.active::before { + content: '\f107'; + } + &.inactive::before { + content: '\f105'; + } + } }