diff --git a/frontend/src/Artist/Index/ArtistIndex.js b/frontend/src/Artist/Index/ArtistIndex.js index 439d18800..e6159571e 100644 --- a/frontend/src/Artist/Index/ArtistIndex.js +++ b/frontend/src/Artist/Index/ArtistIndex.js @@ -54,7 +54,7 @@ class ArtistIndex extends Component { this.state = { contentBody: null, - jumpBarItems: [], + jumpBarItems: { order: [] }, jumpToCharacter: null, isPosterOptionsModalOpen: false, isBannerOptionsModalOpen: false, @@ -103,28 +103,39 @@ class ArtistIndex extends Component { // Reset if not sorting by sortName if (sortKey !== 'sortName') { - this.setState({ jumpBarItems: [] }); + this.setState({ jumpBarItems: { order: [] } }); return; } const characters = _.reduce(items, (acc, item) => { - const firstCharacter = item.sortName.charAt(0); + let char = item.sortName.charAt(0); - if (isNaN(firstCharacter)) { - acc.push(firstCharacter); + if (!isNaN(char)) { + char = '#'; + } + + if (char in acc) { + acc[char] = acc[char] + 1; } else { - acc.push('#'); + acc[char] = 1; } return acc; - }, []).sort(); + }, {}); + + const order = Object.keys(characters).sort(); // Reverse if sorting descending if (sortDirection === sortDirections.DESCENDING) { - characters.reverse(); + order.reverse(); } - this.setState({ jumpBarItems: _.sortedUniq(characters) }); + const jumpBarItems = { + characters, + order + }; + + this.setState({ jumpBarItems }); } // @@ -371,7 +382,7 @@ class ArtistIndex extends Component { { - isLoaded && !!jumpBarItems.length && + isLoaded && !!jumpBarItems.order.length && characters[x]).sort((a, b) => b - a); + const minCount = sorted[maximumItems - 3]; + const greater = sorted.reduce((acc, value) => acc + (value > minCount ? 1 : 0), 0); + let minAllowed = maximumItems - 2 - greater; - const visibleItems = _.reduce(items, (acc, item, index) => { - if (index % removeDiff === 0) { - acc.push(item); + for (let i = 1; i < order.length - 1; i++) { + if (characters[order[i]] > minCount) { + visibleItems.push(order[i]); + } else if (characters[order[i]] === minCount && minAllowed > 0) { + visibleItems.push(order[i]); + minAllowed--; } + } - return acc; - }, []); + visibleItems.push(order[order.length - 1]); this.setState({ visibleItems }); } @@ -129,7 +146,7 @@ class PageJumpBar extends Component { } PageJumpBar.propTypes = { - items: PropTypes.arrayOf(PropTypes.string).isRequired, + items: PropTypes.object.isRequired, minimumItems: PropTypes.number.isRequired, onItemPress: PropTypes.func.isRequired }; diff --git a/frontend/src/Components/Page/PageJumpBarItem.css b/frontend/src/Components/Page/PageJumpBarItem.css index e829dd31a..f1a0c3699 100644 --- a/frontend/src/Components/Page/PageJumpBarItem.css +++ b/frontend/src/Components/Page/PageJumpBarItem.css @@ -1,5 +1,5 @@ .jumpBarItem { - flex: 1 0 $jumpBarItemHeight; + flex: 1 1 $jumpBarItemHeight; border-bottom: 1px solid $borderColor; text-align: center; font-weight: bold;