From 1ba1dbea0960788f61743dfa624419e006469b8f Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Tue, 28 Feb 2023 02:47:01 +0200
Subject: [PATCH] Sort tags by label

Co-authored-by: Mark McDowall <markus.mcd5@gmail.com>
(cherry picked from commit f32a3cd41c17bb9cb829ac24732cfeec6a18d569)

Fixes #3678
---
 .../src/Artist/Details/ArtistTagsConnector.js     | 15 +++++----------
 frontend/src/Components/TagList.js                | 14 ++++++--------
 2 files changed, 11 insertions(+), 18 deletions(-)

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 (
     <div className={styles.tags}>
       {
-        tags.map((t) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
+        sortedTags.map((tag) => {
           return (
             <Label
               key={tag.id}