diff --git a/frontend/src/Artist/Details/ArtistTagsConnector.js b/frontend/src/Artist/Details/ArtistTagsConnector.js index 1ecde26cd..33ced5f0d 100644 --- a/frontend/src/Artist/Details/ArtistTagsConnector.js +++ b/frontend/src/Artist/Details/ArtistTagsConnector.js @@ -1,4 +1,3 @@ -import _ from 'lodash'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import createArtistSelector from 'Store/Selectors/createArtistSelector'; @@ -10,15 +9,11 @@ function createMapStateToProps() { createArtistSelector(), createTagsSelector(), (artist, tagList) => { - const tags = _.reduce(artist.tags, (acc, tag) => { - const matchingTag = _.find(tagList, { id: tag }); - - if (matchingTag) { - acc.push(matchingTag.label); - } - - return acc; - }, []); + const tags = artist.tags + .map((tagId) => tagList.find((tag) => tag.id === tagId)) + .filter((tag) => !!tag) + .map((tag) => tag.label) + .sort((a, b) => a.localeCompare(b)); return { tags diff --git a/frontend/src/Components/TagList.js b/frontend/src/Components/TagList.js index 485651bdc..6da96849c 100644 --- a/frontend/src/Components/TagList.js +++ b/frontend/src/Components/TagList.js @@ -1,4 +1,3 @@ -import _ from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; import { kinds } from 'Helpers/Props'; @@ -6,16 +5,15 @@ import Label from './Label'; import styles from './TagList.css'; function TagList({ tags, tagList }) { + const sortedTags = tags + .map((tagId) => tagList.find((tag) => tag.id === tagId)) + .filter((tag) => !!tag) + .sort((a, b) => a.label.localeCompare(b.label)); + return (
{ - tags.map((t) => { - const tag = _.find(tagList, { id: t }); - - if (!tag) { - return null; - } - + sortedTags.map((tag) => { return (