f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 20:29:01 +00:00
Code Wiki Activity

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

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-29 23:04:48 +01:00
parent 9b02d74fb1 46f8594201
commit 6d8418880d
3 changed files with 36 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+1 -1
View File
@@ -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 {
client/homebrew/pages/basePages/listPage/listPage.jsx
+23 -42
View File
@@ -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)=>{
@@ -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)=>{
@@ -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">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
<i className="fas fa-sun"/>
<label className='option'>
<input type='radio' name='theme' onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
<i className='fas fa-sun'/>
</label>
<label className="option">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')} checked={themeMode === 'dark'}/>
<i className="fas fa-moon"/>
<label className='option'>
<input type='radio' name='theme' onChange={(e)=>handleThemeChange(e, 'dark')} checked={themeMode === 'dark'}/>
<i className='fas fa-moon'/>
</label>
</div>
)
);
};
const renderNav = ()=>{
return (
<div className="listPageNav">
<div className='listPageNav'>
{renderLayoutModeOptions()}
{renderThemePicker()}
{renderSortOptions()}
@@ -346,7 +327,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
</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
Generated
+3 -3
View File
@@ -7660,9 +7660,9 @@
"license": "MIT"
},
"node_modules/fast-uri": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.8.tgz",
"integrity": "sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==",
"version": "3.1.9",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.9.tgz",
"integrity": "sha512-hS/0Wt3Ya043oKXs0sIxrMpKQITXhMLIrVAKKXi4gozGC9v7YRWVnXIZzjNPTO02M9BdxLCWqK1yRXgNziVyJQ==",
"dev": true,
"funding": [
{