f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-20 16:42:58 +00:00
Code Wiki Activity

base refactor

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-02 12:46:54 +02:00
parent 813e9b7754
commit 8f1c0eac92
2 changed files with 569 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/listPage.jsx
+224 -206
View File
@@ -1,9 +1,8 @@
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
import './listPage.less'; import './listPage.less';
import React from 'react'; import React, { useEffect, useState, useRef, useMemo } from 'react';
import createReactClass from 'create-react-class';
import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import _ from 'lodash';
import BrewItem from './brewItem/brewItem.jsx'; import BrewItem from './brewItem/brewItem.jsx';
@@ -14,132 +13,119 @@ const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
const DEFAULT_SORT_TYPE = 'alpha'; const DEFAULT_SORT_TYPE = 'alpha';
const DEFAULT_SORT_DIR = 'asc'; const DEFAULT_SORT_DIR = 'asc';
const ListPage = createReactClass({ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query }) => {
displayName : 'ListPage', const [filterString, setFilterString] = useState(query?.filter || '');
getDefaultProps : function() { const [filterTags, setFilterTags] = useState([]);
return { const [sortType, setSortType] = useState(query?.sort || null);
brewCollection : [ const [sortDir, setSortDir] = useState(query?.dir || null);
{ const [groupVisibility, setGroupVisibility] = useState({});
title : '',
class : '', const groupVisibilityRef = useRef(groupVisibility);
brews : [] const sortTypeRef = useRef(sortType);
} const sortDirRef = useRef(sortDir);
],
navItems : <></>, useEffect(() => {
reportError : null groupVisibilityRef.current = groupVisibility;
}, [groupVisibility]);
useEffect(() => {
sortTypeRef.current = sortType;
}, [sortType]);
useEffect(() => {
sortDirRef.current = sortDir;
}, [sortDir]);
useEffect(() => {
window.onbeforeunload = saveToLocalStorage;
if (typeof window !== 'undefined') {
const newSortType = sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE);
const newSortDir = sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR);
updateUrl(filterString, newSortType, newSortDir);
const namedBrewCollection = brewCollection.reduce((visibility, brewGroup) => {
visibility[brewGroup.class] = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true') == 'true';
return visibility;
}, {});
setGroupVisibility(namedBrewCollection);
setSortType(newSortType);
setSortDir(newSortDir);
}
return () => {
window.onbeforeunload = null;
}; };
}, }, []);
getInitialState : function() {
// HIDE ALL GROUPS UNTIL LOADED const saveToLocalStorage = () => {
const brewCollection = this.props.brewCollection.map((brewGroup)=>{ brewCollection.forEach((brewGroup) => {
brewGroup.visible = false; localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${groupVisibilityRef.current[brewGroup.class]}`);
return brewGroup;
}); });
localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current);
localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current);
};
return { const renderBrews = (brews) => {
filterString : this.props.query?.filter || '', if (!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
filterTags : [],
sortType : this.props.query?.sort || null,
sortDir : this.props.query?.dir || null,
query : this.props.query,
brewCollection : brewCollection
};
},
componentDidMount : function() { return _.map(brews, (brew, idx) => {
// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE return (
window.onbeforeunload = this.saveToLocalStorage; <BrewItem
brew={brew}
// LOAD FROM LOCAL STORAGE key={idx}
if(typeof window !== 'undefined') { reportError={reportError}
const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE)); updateListFilter={(tag) => {
const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR)); updateUrl(filterString, sortType, sortDir, tag);
this.updateUrl(this.state.filterString, newSortType, newSortDir); }}
/>
const brewCollection = this.props.brewCollection.map((brewGroup)=>{ );
brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
return brewGroup;
});
this.setState({
brewCollection : brewCollection,
sortType : newSortType,
sortDir : newSortDir
});
};
},
componentWillUnmount : function() {
window.onbeforeunload = function(){};
},
saveToLocalStorage : function() {
this.state.brewCollection.map((brewGroup)=>{
localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
}); });
localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType); };
localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
},
renderBrews : function(brews){ const sortBrewOrder = (brew) => {
if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>; const title = brew.title || 'No Title';
return _.map(brews, (brew, idx)=>{
return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
});
},
sortBrewOrder : function(brew){
if(!brew.title){brew.title = 'No Title';}
const mapping = { const mapping = {
'alpha' : _.deburr(brew.title.trim().toLowerCase()), 'alpha': _.deburr(title.trim().toLowerCase()),
'created' : moment(brew.createdAt).format(), 'created': moment(brew.createdAt).format(),
'updated' : moment(brew.updatedAt).format(), 'updated': moment(brew.updatedAt).format(),
'views' : brew.views, 'views': brew.views,
'latest' : moment(brew.lastViewed).format() 'latest': moment(brew.lastViewed).format(),
}; };
return mapping[this.state.sortType]; return mapping[sortType];
}, };
handleSortOptionChange : function(event){ const handleSortOptionChange = (event) => {
this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir); updateUrl(filterString, event.target.value, sortDir);
this.setState({ setSortType(event.target.value);
sortType : event.target.value };
});
},
handleSortDirChange : function(event){ const handleSortDirChange = (event) => {
const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc'; const newDir = sortDir == 'asc' ? 'desc' : 'asc';
this.updateUrl(this.state.filterString, this.state.sortType, newDir); updateUrl(filterString, sortType, newDir);
this.setState({ setSortDir(newDir);
sortDir : newDir };
});
},
renderSortOption : function(sortTitle, sortValue){ const renderSortOption = (sortTitle, sortValue) => {
return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}> return (
<button <div className={`sort-option ${sortType == sortValue ? 'active' : ''}`}>
value={`${sortValue}`} <button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}>
onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange} {`${sortTitle}`}
> </button>
{`${sortTitle}`} {sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>}
</button> </div>
{this.state.sortType == sortValue && );
<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i> };
}
</div>;
},
handleFilterTextChange : function(e){ const handleFilterTextChange = (e) => {
this.setState({ setFilterString(e.target.value);
filterString : e.target.value, updateUrl(e.target.value, sortType, sortDir);
});
this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
return; return;
}, };
updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){ const updateUrl = (filterTerm, sortType, sortDir, filterTag = '') => {
const url = new URL(window.location.href); const url = new URL(window.location.href);
const urlParams = new URLSearchParams(url.search); const urlParams = new URLSearchParams(url.search);
@@ -147,136 +133,168 @@ const ListPage = createReactClass({
urlParams.set('dir', sortDir); urlParams.set('dir', sortDir);
let filterTags = urlParams.getAll('tag'); let filterTags = urlParams.getAll('tag');
if(filterTag != '') { if (filterTag != '') {
if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){ if (
filterTags.findIndex((tag) => {
return tag.toLowerCase() == filterTag.toLowerCase();
}) == -1
) {
filterTags.push(filterTag); filterTags.push(filterTag);
} else { } else {
filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); }); filterTags = filterTags.filter((tag) => {
return tag.toLowerCase() != filterTag.toLowerCase();
});
} }
} }
urlParams.delete('tag'); urlParams.delete('tag');
// Add tags to URL in the order they were clicked // Add tags to URL in the order they were clicked
filterTags.forEach((tag)=>{ urlParams.append('tag', tag); }); filterTags.forEach((tag) => {
urlParams.append('tag', tag);
});
// Sort tags before updating state // Sort tags before updating state
filterTags.sort((a, b)=>{ filterTags.sort((a, b) => {
return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase()); return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
}); });
this.setState({ setFilterTags(filterTags);
filterTags
});
if(!filterTerm) if (!filterTerm) urlParams.delete('filter');
urlParams.delete('filter'); else urlParams.set('filter', filterTerm);
else
urlParams.set('filter', filterTerm);
url.search = urlParams; url.search = urlParams;
window.history.replaceState(null, null, url); window.history.replaceState(null, null, url);
}, };
renderFilterOption : function(){ const renderFilterOption = () => {
return <div className='filter-option'> return (
<label> <div className='filter-option'>
<i className='fas fa-search'></i> <label>
<input <i className='fas fa-search'></i>
type='search' <input type='search' placeholder='filter title/description' onChange={handleFilterTextChange} value={filterString} />
placeholder='filter title/description' </label>
onChange={this.handleFilterTextChange} </div>
value={this.state.filterString} );
/> };
</label>
</div>;
},
renderTagsOptions : function(){ const renderTagsOptions = () => {
if(this.state.filterTags?.length == 0) return; if (filterTags?.length == 0) return;
return <div className='tags-container'> return (
{_.map(this.state.filterTags, (tag, idx)=>{ <div className='tags-container'>
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/); {_.map(filterTags, (tag, idx) => {
return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>; const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
})} return (
</div>; <span
}, key={idx}
className={matches[1]}
onClick={() => {
updateUrl(filterString, sortType, sortDir, tag);
}}>
{matches[2]}
</span>
);
})}
</div>
);
};
renderSortOptions : function(){ const renderSortOptions = () => {
return <div className='sort-container'> return (
<h6>Sort by :</h6> <div className='sort-container'>
{this.renderSortOption('Title', 'alpha')} <h6>Sort by :</h6>
{this.renderSortOption('Created Date', 'created')} {renderSortOption('Title', 'alpha')}
{this.renderSortOption('Updated Date', 'updated')} {renderSortOption('Created Date', 'created')}
{this.renderSortOption('Views', 'views')} {renderSortOption('Updated Date', 'updated')}
{/* {this.renderSortOption('Latest', 'latest')} */} {renderSortOption('Views', 'views')}
{/* {renderSortOption('Latest', 'latest')} */}
{this.renderFilterOption()} {renderFilterOption()}
</div>; </div>
}, );
};
getSortedBrews : function(brews){ const getSortedBrews = (brews) => {
const testString = _.deburr(this.state.filterString).toLowerCase(); const testString = _.deburr(filterString).toLowerCase();
brews = _.filter(brews, (brew)=>{ brews = _.filter(brews, (brew) => {
// Filter by user entered text // Filter by user entered text
const brewStrings = _.deburr([ const brewStrings = _.deburr([brew.title, brew.description, brew.tags].join('\n').toLowerCase());
brew.title,
brew.description,
brew.tags].join('\n')
.toLowerCase());
const filterTextTest = brewStrings.includes(testString); const filterTextTest = brewStrings.includes(testString);
// Filter by user selected tags // Filter by user selected tags
let filterTagTest = true; let filterTagTest = true;
if(this.state.filterTags.length > 0){ if (filterTags.length > 0) {
filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{ filterTagTest =
return brew.tags.findIndex((brewTag)=>{ Array.isArray(brew.tags) &&
return brewTag.toLowerCase() == tag.toLowerCase(); filterTags?.every((tag) => {
}) >= 0; return (
}); brew.tags.findIndex((brewTag) => {
return brewTag.toLowerCase() == tag.toLowerCase();
}) >= 0
);
});
} }
return filterTextTest && filterTagTest; return filterTextTest && filterTagTest;
}); });
return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir); return _.orderBy(
}, brews,
(brew) => {
return sortBrewOrder(brew);
},
sortDir,
);
};
toggleBrewCollectionState : function(brewGroupClass) { const sortedBrewCollection = useMemo(() => {
this.setState((prevState)=>({ return brewCollection.map((brewGroup) => ({ ...brewGroup, brews: getSortedBrews(brewGroup.brews) }));
brewCollection : prevState.brewCollection.map( }, [brewCollection, filterString, filterTags, sortType, sortDir]);
(brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
)
}));
},
renderBrewCollection : function(brewCollection){ const toggleBrewCollectionState = (brewGroupClass) => {
if(brewCollection == []) return <div className='brewCollection'> setGroupVisibility((prevVisibility) => ({ ...prevVisibility, [brewGroupClass]: !prevVisibility[brewGroupClass] }));
<h1>No Brews</h1> };
</div>;
return _.map(brewCollection, (brewGroup, idx)=>{ const renderBrewCollection = (brewCollection) => {
return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}> if (brewCollection.length === 0)
<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1> return (
{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>} <div className='brewCollection'>
</div>; <h1>No Brews</h1>
</div>
);
return _.map(brewCollection, (brewGroup, idx) => {
const sortedBrewGroup = sortedBrewCollection[idx];
const visible = groupVisibility[brewGroup.class];
return (
<div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
<h1
className={visible ? 'active' : 'inactive'}
onClick={() => {
toggleBrewCollectionState(brewGroup.class);
}}>
{brewGroup.title || 'No Title'}
</h1>
{visible ? renderBrews(sortedBrewGroup.brews) : <></>}
</div>
);
}); });
}, };
render : function(){ return (
return <div className='listPage sitePage'> <div className='listPage sitePage'>
{/*<style>@layer V3_5ePHB, bundle;</style>*/} {/*<style>@layer V3_5ePHB, bundle;</style>*/}
<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/> <link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet' />
<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/> <link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet' />
{this.props.navItems} {navItems}
{this.renderSortOptions()} {renderSortOptions()}
{this.renderTagsOptions()} {renderTagsOptions()}
<div className='content V3'> <div className='content V3'>
<div className='page'> <div className='page'>{renderBrewCollection(brewCollection)}</div>
{this.renderBrewCollection(this.state.brewCollection)}
</div>
</div> </div>
</div>; </div>
} );
}); };
export default ListPage; export default ListPage;
package-lock.json
Generated
+345 -345
View File
File diff suppressed because it is too large Load Diff