Merge branch 'master' of https://github.com/naturalcrit/homebrewery into refactor-combobox

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -145,8 +145,8 @@
 	box-shadow       : 0 4px 5px 0 #333333;
 	.text {
 		min-height : 54px;
+		padding-left : 5px;
 		h2 { margin-bottom : 5px; }
-		.description { padding-left : 5px; }
 	}
 	.info { padding-left : 5px; }
 	.links {
@@ -398,7 +398,7 @@
 			}
 			.storage { display : none; }
 		}
-		.brewItem { 
+		.brewItem {
 			h2 {
 				width     : 200px;
 				font-size : 1em;
@@ -426,7 +426,7 @@
 			}
 			.info {
 				display               : grid;
-				grid-template-areas   : 
+				grid-template-areas   :
 					'tags pages views views'
 					'authors update update storage';
 				grid-template-columns : 2fr 1fr 1fr 20px;
@@ -440,7 +440,7 @@
 				a,
 				button { margin : 0; }
 			}
-		}	
+		}
 	}
 }
 @container (max-width : 650px) {

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -1,6 +1,6 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 import './listPage.less';
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
 
@@ -26,24 +26,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
 	const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
 
-	const groupVisibilityRef = useRef(groupVisibility);
-	const sortTypeRef = useRef(sortType);
-	const sortDirRef = useRef(sortDir);
-
 	useEffect(()=>{
-		groupVisibilityRef.current = groupVisibility;
-	}, [groupVisibility]);
-
-	useEffect(()=>{
-		sortTypeRef.current = sortType;
-	}, [sortType]);
-
-	useEffect(()=>{
-		sortDirRef.current = sortDir;
-	}, [sortDir]);
-
-	useEffect(()=>{
-		window.onbeforeunload = saveToLocalStorage;
 		if(typeof window === 'undefined') return;
 
 		const newSortType = sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE);
@@ -63,20 +46,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		setSortDir(newSortDir);
 		setLayoutMode(newLayoutMode);
 		setThemeMode(newThemeMode);
-
-		return ()=>{
-			window.onbeforeunload = null;
-		};
 	}, []);
 
-	const saveToLocalStorage = ()=>{
-		brewCollection.forEach((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${groupVisibilityRef.current[brewGroup.class]}`);
-		});
-		localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current);
-		localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current);
-	};
-
 	const renderBrews = (brews)=>{
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
@@ -108,6 +79,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const handleSortOptionChange = (event)=>{
 		updateUrl(filterString, event.target.value, sortDir);
 		setSortType(event.target.value);
+		localStorage.setItem(USERPAGE_SORT_TYPE, event.target.value);
+		return;
 	};
 
 	const handleSortDirChange = (event)=>{
@@ -115,6 +88,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 		updateUrl(filterString, sortType, newDir);
 		setSortDir(newDir);
+		localStorage.setItem(USERPAGE_SORT_DIR, newDir);
+		return;
 	};
 
 	const renderSortOption = (sortTitle, sortValue)=>{
@@ -187,7 +162,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		if(filterTags?.length == 0) return;
 		return (
 			<div className='tags-container'>
-				Tags: 
+				Tags:
 				{_.map(filterTags, (tag, idx)=>{
 					const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
 					return (
@@ -198,7 +173,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 								updateUrl(filterString, sortType, sortDir, tag);
 							}}>
 							{matches[2]}
-						</span>						
+						</span>
 					);
 				})}
 			</div>
@@ -257,7 +232,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	}, [brewCollection, filterString, filterTags, sortType, sortDir]);
 
 	const toggleBrewCollectionState = (brewGroupClass)=>{
-		setGroupVisibility((prevVisibility)=>({ ...prevVisibility, [brewGroupClass]: !prevVisibility[brewGroupClass] }));
+		setGroupVisibility((prevVisibility)=>{
+			const visible = !prevVisibility[brewGroupClass];
+
+			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroupClass}`, visible);
+
+			return {...prevVisibility, [brewGroupClass]: visible};
+		});
 	};
 
 	const renderBrewCollection = (brewCollection)=>{
@@ -298,8 +279,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 			<div className='radio-toggle layout-container'>
 				<h6>View:</h6>
 				<label className='option' title='grid'>
-						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
+					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
-						<i className='fac compressed-grid'></i>
+					<i className='fac compressed-grid'></i>
 				</label>
 				<label className='option' title='list'>
 					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
@@ -320,24 +301,24 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	};
 	const renderThemePicker = ()=>{
 		return (
-			<div className="radio-toggle theme-container">
+			<div className='radio-toggle theme-container'>
 				<h6>Theme:</h6>
-				<label className="option">
+				<label className='option'>
-					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
+					<input type='radio' name='theme' onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
-					<i className="fas fa-sun"/>
+					<i className='fas fa-sun'/>
 				</label>
-				<label className="option">
+				<label className='option'>
-					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')}  checked={themeMode === 'dark'}/>
+					<input type='radio' name='theme' onChange={(e)=>handleThemeChange(e, 'dark')}  checked={themeMode === 'dark'}/>
-					<i className="fas fa-moon"/>
+					<i className='fas fa-moon'/>
 				</label>
 			</div>
-		)
+		);
 	};
 
-	const renderNav = () =>{
+	const renderNav = ()=>{
 
 		return (
-			<div className="listPageNav">
+			<div className='listPageNav'>
 				{renderLayoutModeOptions()}
 				{renderThemePicker()}
 				{renderSortOptions()}
@@ -345,8 +326,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				{renderTagsOptions()}
 			</div>
 		);
-			
+
-	} 
+	};
 
 	return (
 		<div className='sitePage listPage'>
@@ -354,7 +335,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 			{renderNav()}
 
-			<div className={`content V3 ${themeMode + 'Mode'}`}>
+			<div className={`content V3 ${`${themeMode}Mode`}`}>
 				<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
 			</div>
 		</div>

package-lock.json

@@ -7660,9 +7660,9 @@
       "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.1.8",
+      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.9.tgz",
-      "integrity": "sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==",
+      "integrity": "sha512-hS/0Wt3Ya043oKXs0sIxrMpKQITXhMLIrVAKKXi4gozGC9v7YRWVnXIZzjNPTO02M9BdxLCWqK1yRXgNziVyJQ==",
       "dev": true,
       "funding": [
         {