From 4b5b6e3b02ebd3425b0230a1f282e67de93866c6 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 28 Aug 2022 23:46:19 +1200
Subject: [PATCH 1/3] Initial pass at visibility functionality

---
 .../pages/basePages/listPage/listPage.jsx     | 61 ++++++++++++++++---
 .../pages/basePages/listPage/listPage.less    | 23 +++++++
 client/homebrew/pages/userPage/userPage.jsx   | 14 +++--
 3 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 934d147be..a2a063a37 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -6,28 +6,58 @@ const moment      = require('moment');
 
 const BrewItem    = require('./brewItem/brewItem.jsx');
 
+const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE-VISIBILITY';
+
 const ListPage = createClass({
 	displayName     : 'ListPage',
 	getDefaultProps : function() {
 		return {
 			brewCollection : [
 				{
-					title : '',
-					class : '',
-					brews : []
+					title   : '',
+					class   : '',
+					brews   : [],
+					visible : true
 				}
 			],
 			navItems : <></>
 		};
 	},
 	getInitialState : function() {
+		let brewCollection = [];
+
+		if(typeof window !== 'undefined') {
+			brewCollection = this.props.brewCollection.map((brewGroup)=>{
+				const localVisibility = localStorage.getItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`) ?? 'true';
+				if(brewGroup.visible != (localVisibility=='true')) {
+					brewGroup.visible = (localVisibility=='true');
+				};
+				return brewGroup;
+			});
+		}
+
 		return {
-			sortType     : 'alpha',
-			sortDir      : 'asc',
-			filterString : this.props.query?.filter || '',
-			query        : this.props.query
+			sortType       : 'alpha',
+			sortDir        : 'asc',
+			filterString   : this.props.query?.filter || '',
+			query          : this.props.query,
+			brewCollection : brewCollection
 		};
 	},
+	componentDidMount : function() {
+		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
+		window.onbeforeunload = this.saveToLocalStorage;
+	},
+
+	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 <div className='noBrews'>No Brews.</div>;
@@ -150,11 +180,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 <div className='brewCollection'>
+			<h1>No Brews</h1>
+		</div>;
 		return _.map(brewCollection, (brewGroup, idx)=>{
 			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
-				<h1>{brewGroup.title || 'No Title'}</h1>
-				{this.renderBrews(this.getSortedBrews(brewGroup.brews))}
+				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
+				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
 			</div>;
 		});
 	},
@@ -167,7 +208,7 @@ const ListPage = createClass({
 			<div className='content V3'>
 				<div className='phb'>
 					{this.renderSortOptions()}
-					{this.renderBrewCollection(this.props.brewCollection)}
+					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>
 		</div>;
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 6be946404..5c86040a7 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -74,4 +74,27 @@
 			}
 		}
 	}
+	h1 {
+		cursor: pointer;
+		&.active {
+			color: #58180D;
+		}
+		&.active::before {
+			content: '\f107';
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+			font-size: 0.6cm;
+    		padding-right: 0.5em;
+		}
+		&.inactive {
+			color: #707070;
+		}
+		&.inactive::before {
+			content: '\f105';
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+			font-size: 0.6cm;
+    		padding-right: 0.5em;
+		}
+	}
 }
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 6c3af7907..861351c6f 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -31,17 +31,19 @@ const UserPage = createClass({
 
 		const brewCollection = [
 			{
-				title : `${usernameWithS} published brews`,
-				class : 'published',
-				brews : brews.published
+				title   : `${usernameWithS} published brews`,
+				class   : 'published',
+				brews   : brews.published,
+				visible : true
 			}
 		];
 		if(this.props.username == global.account?.username){
 			brewCollection.push(
 				{
-					title : `${usernameWithS} unpublished brews`,
-					class : 'unpublished',
-					brews : brews.private
+					title   : `${usernameWithS} unpublished brews`,
+					class   : 'unpublished',
+					brews   : brews.private,
+					visible : true
 				}
 			);
 		}

From 4bb5e96c4224bb4669af7926f4f587a7bee89dcf Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 28 Aug 2022 23:46:19 +1200
Subject: [PATCH 2/3] Initial pass at visibility functionality

---
 .../pages/basePages/listPage/listPage.jsx     | 61 ++++++++++++++++---
 .../pages/basePages/listPage/listPage.less    | 23 +++++++
 client/homebrew/pages/userPage/userPage.jsx   | 14 +++--
 3 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 934d147be..a2a063a37 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -6,28 +6,58 @@ const moment      = require('moment');
 
 const BrewItem    = require('./brewItem/brewItem.jsx');
 
+const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE-VISIBILITY';
+
 const ListPage = createClass({
 	displayName     : 'ListPage',
 	getDefaultProps : function() {
 		return {
 			brewCollection : [
 				{
-					title : '',
-					class : '',
-					brews : []
+					title   : '',
+					class   : '',
+					brews   : [],
+					visible : true
 				}
 			],
 			navItems : <></>
 		};
 	},
 	getInitialState : function() {
+		let brewCollection = [];
+
+		if(typeof window !== 'undefined') {
+			brewCollection = this.props.brewCollection.map((brewGroup)=>{
+				const localVisibility = localStorage.getItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`) ?? 'true';
+				if(brewGroup.visible != (localVisibility=='true')) {
+					brewGroup.visible = (localVisibility=='true');
+				};
+				return brewGroup;
+			});
+		}
+
 		return {
-			sortType     : 'alpha',
-			sortDir      : 'asc',
-			filterString : this.props.query?.filter || '',
-			query        : this.props.query
+			sortType       : 'alpha',
+			sortDir        : 'asc',
+			filterString   : this.props.query?.filter || '',
+			query          : this.props.query,
+			brewCollection : brewCollection
 		};
 	},
+	componentDidMount : function() {
+		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
+		window.onbeforeunload = this.saveToLocalStorage;
+	},
+
+	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 <div className='noBrews'>No Brews.</div>;
@@ -150,11 +180,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 <div className='brewCollection'>
+			<h1>No Brews</h1>
+		</div>;
 		return _.map(brewCollection, (brewGroup, idx)=>{
 			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
-				<h1>{brewGroup.title || 'No Title'}</h1>
-				{this.renderBrews(this.getSortedBrews(brewGroup.brews))}
+				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
+				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
 			</div>;
 		});
 	},
@@ -167,7 +208,7 @@ const ListPage = createClass({
 			<div className='content V3'>
 				<div className='phb'>
 					{this.renderSortOptions()}
-					{this.renderBrewCollection(this.props.brewCollection)}
+					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>
 		</div>;
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 6be946404..5c86040a7 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -74,4 +74,27 @@
 			}
 		}
 	}
+	h1 {
+		cursor: pointer;
+		&.active {
+			color: #58180D;
+		}
+		&.active::before {
+			content: '\f107';
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+			font-size: 0.6cm;
+    		padding-right: 0.5em;
+		}
+		&.inactive {
+			color: #707070;
+		}
+		&.inactive::before {
+			content: '\f105';
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+			font-size: 0.6cm;
+    		padding-right: 0.5em;
+		}
+	}
 }
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 6c3af7907..861351c6f 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -31,17 +31,19 @@ const UserPage = createClass({
 
 		const brewCollection = [
 			{
-				title : `${usernameWithS} published brews`,
-				class : 'published',
-				brews : brews.published
+				title   : `${usernameWithS} published brews`,
+				class   : 'published',
+				brews   : brews.published,
+				visible : true
 			}
 		];
 		if(this.props.username == global.account?.username){
 			brewCollection.push(
 				{
-					title : `${usernameWithS} unpublished brews`,
-					class : 'unpublished',
-					brews : brews.private
+					title   : `${usernameWithS} unpublished brews`,
+					class   : 'unpublished',
+					brews   : brews.private,
+					visible : true
 				}
 			);
 		}

From a25c7a5ccdb25af32add47ebd7d99d7b29b1d8a6 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 29 Aug 2022 20:39:16 +1200
Subject: [PATCH 3/3] Load from local storage working without errors

---
 .../pages/basePages/listPage/listPage.jsx     | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index a2a063a37..e8042cbd0 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -24,17 +24,11 @@ const ListPage = createClass({
 		};
 	},
 	getInitialState : function() {
-		let brewCollection = [];
-
-		if(typeof window !== 'undefined') {
-			brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				const localVisibility = localStorage.getItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`) ?? 'true';
-				if(brewGroup.visible != (localVisibility=='true')) {
-					brewGroup.visible = (localVisibility=='true');
-				};
-				return brewGroup;
-			});
-		}
+		// HIDE ALL GROUPS UNTIL LOADED
+		const brewCollection = this.props.brewCollection.map((brewGroup)=>{
+			brewGroup.visible = false;
+			return brewGroup;
+		});
 
 		return {
 			sortType       : 'alpha',
@@ -44,9 +38,22 @@ const ListPage = createClass({
 			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)=>{
+				const localVisibility = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-${brewGroup.class}`) ?? 'true')=='true';
+				brewGroup.visible = (brewGroup.visible != localVisibility ? localVisibility : brewGroup.visible);
+				return brewGroup;
+			});
+			this.setState({
+				brewCollection : brewCollection
+			});
+		};
 	},
 
 	componentWillUnmount : function() {