No Brews.
;
-
- return _.map(brews, (brew, idx)=>{
- return { this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
- });
- },
-
- sortBrewOrder : function(brew){
- if(!brew.title){brew.title = 'No Title';}
+ const sortBrewOrder = (brew) => {
+ const title = brew.title || 'No Title';
const mapping = {
- 'alpha' : _.deburr(brew.title.trim().toLowerCase()),
- 'created' : moment(brew.createdAt).format(),
- 'updated' : moment(brew.updatedAt).format(),
- 'views' : brew.views,
- 'latest' : moment(brew.lastViewed).format()
+ 'alpha': _.deburr(title.trim().toLowerCase()),
+ 'created': moment(brew.createdAt).format(),
+ 'updated': moment(brew.updatedAt).format(),
+ 'views': brew.views,
+ 'latest': moment(brew.lastViewed).format(),
};
- return mapping[this.state.sortType];
- },
+ return mapping[sortType];
+ };
- handleSortOptionChange : function(event){
- this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
- this.setState({
- sortType : event.target.value
- });
- },
+ const handleSortOptionChange = (event) => {
+ updateUrl(filterString, event.target.value, sortDir);
+ setSortType(event.target.value);
+ };
- handleSortDirChange : function(event){
- const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
+ const handleSortDirChange = (event) => {
+ const newDir = sortDir == 'asc' ? 'desc' : 'asc';
- this.updateUrl(this.state.filterString, this.state.sortType, newDir);
- this.setState({
- sortDir : newDir
- });
- },
+ updateUrl(filterString, sortType, newDir);
+ setSortDir(newDir);
+ };
- renderSortOption : function(sortTitle, sortValue){
- return
-
- {this.state.sortType == sortValue &&
-
- }
-
;
- },
+ const renderSortOption = (sortTitle, sortValue) => {
+ return (
+
+
+ {sortType == sortValue && }
+
+ );
+ };
- handleFilterTextChange : function(e){
- this.setState({
- filterString : e.target.value,
- });
- this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
+ const handleFilterTextChange = (e) => {
+ setFilterString(e.target.value);
+ updateUrl(e.target.value, sortType, sortDir);
return;
- },
+ };
- updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
+ const updateUrl = (filterTerm, sortType, sortDir, filterTag = '') => {
const url = new URL(window.location.href);
const urlParams = new URLSearchParams(url.search);
@@ -147,136 +133,168 @@ const ListPage = createReactClass({
urlParams.set('dir', sortDir);
let filterTags = urlParams.getAll('tag');
- if(filterTag != '') {
- if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+ if (filterTag != '') {
+ if (
+ filterTags.findIndex((tag) => {
+ return tag.toLowerCase() == filterTag.toLowerCase();
+ }) == -1
+ ) {
filterTags.push(filterTag);
} else {
- filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+ filterTags = filterTags.filter((tag) => {
+ return tag.toLowerCase() != filterTag.toLowerCase();
+ });
}
}
urlParams.delete('tag');
// 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
- filterTags.sort((a, b)=>{
+ filterTags.sort((a, b) => {
return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
});
- this.setState({
- filterTags
- });
+ setFilterTags(filterTags);
- if(!filterTerm)
- urlParams.delete('filter');
- else
- urlParams.set('filter', filterTerm);
+ if (!filterTerm) urlParams.delete('filter');
+ else urlParams.set('filter', filterTerm);
url.search = urlParams;
window.history.replaceState(null, null, url);
- },
+ };
- renderFilterOption : function(){
- return
-
-
;
- },
+ const renderFilterOption = () => {
+ return (
+
+
+
+ );
+ };
- renderTagsOptions : function(){
- if(this.state.filterTags?.length == 0) return;
- return
- {_.map(this.state.filterTags, (tag, idx)=>{
- const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
- return { this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]};
- })}
-
;
- },
+ const renderTagsOptions = () => {
+ if (filterTags?.length == 0) return;
+ return (
+
+ {_.map(filterTags, (tag, idx) => {
+ const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+ return (
+ {
+ updateUrl(filterString, sortType, sortDir, tag);
+ }}>
+ {matches[2]}
+
+ );
+ })}
+
+ );
+ };
- renderSortOptions : function(){
- return
-
Sort by :
- {this.renderSortOption('Title', 'alpha')}
- {this.renderSortOption('Created Date', 'created')}
- {this.renderSortOption('Updated Date', 'updated')}
- {this.renderSortOption('Views', 'views')}
- {/* {this.renderSortOption('Latest', 'latest')} */}
+ const renderSortOptions = () => {
+ return (
+
+
Sort by :
+ {renderSortOption('Title', 'alpha')}
+ {renderSortOption('Created Date', 'created')}
+ {renderSortOption('Updated Date', 'updated')}
+ {renderSortOption('Views', 'views')}
+ {/* {renderSortOption('Latest', 'latest')} */}
- {this.renderFilterOption()}
- ;
- },
+ {renderFilterOption()}
+
-
No Brews
- ;
- return _.map(brewCollection, (brewGroup, idx)=>{
- return
-
{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}
- {brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <>}
- ;
+ const toggleBrewCollectionState = (brewGroupClass) => {
+ setGroupVisibility((prevVisibility) => ({ ...prevVisibility, [brewGroupClass]: !prevVisibility[brewGroupClass] }));
+ };
+
+ const renderBrewCollection = (brewCollection) => {
+ if (brewCollection.length === 0)
+ return (
+
+
No Brews
+
+ );
+ return _.map(brewCollection, (brewGroup, idx) => {
+ const sortedBrewGroup = sortedBrewCollection[idx];
+ const visible = groupVisibility[brewGroup.class];
+
+ return (
+
+
{
+ toggleBrewCollectionState(brewGroup.class);
+ }}>
+ {brewGroup.title || 'No Title'}
+
+ {visible ? renderBrews(sortedBrewGroup.brews) : <>}
+
+ );
});
- },
+ };
- render : function(){
- return
+ return (
+
{/**/}
-
-
- {this.props.navItems}
- {this.renderSortOptions()}
- {this.renderTagsOptions()}
+
+
+ {navItems}
+ {renderSortOptions()}
+ {renderTagsOptions()}
-
- {this.renderBrewCollection(this.state.brewCollection)}
-
+
{renderBrewCollection(brewCollection)}
-
;
- }
-});
+