diff --git a/frontend/src/Components/Page/Header/ArtistSearchInput.js b/frontend/src/Components/Page/Header/ArtistSearchInput.js
index 509af4b73..7a316662c 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.js
+++ b/frontend/src/Components/Page/Header/ArtistSearchInput.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';
@@ -71,6 +70,7 @@ class ArtistSearchInput extends Component {
return (
);
@@ -138,14 +138,15 @@ class ArtistSearchInput extends Component {
onSuggestionsFetchRequested = ({ value }) => {
const lowerCaseValue = jdu.replace(value).toLowerCase();
- const suggestions = _.filter(this.props.artist, (artist) => {
- // Check the title first and if there isn't a match fallback to the alternate titles
+ const suggestions = this.props.artist.filter((artist) => {
+ // Check the title first and if there isn't a match fallback to
+ // the alternate titles and finally the tags.
- const titleMatch = jdu.replace(artist.artistName).toLowerCase().contains(lowerCaseValue);
-
- return titleMatch || _.some(artist.alternateTitles, (alternateTitle) => {
- return jdu.replace(alternateTitle.title).toLowerCase().contains(lowerCaseValue);
- });
+ return (
+ artist.cleanName.contains(lowerCaseValue) ||
+ // artist.alternateTitles.some((alternateTitle) => alternateTitle.cleanTitle.contains(lowerCaseValue)) ||
+ artist.tags.some((tag) => tag.cleanLabel.contains(lowerCaseValue))
+ );
});
this.setState({ suggestions });
diff --git a/frontend/src/Components/Page/Header/ArtistSearchInputConnector.js b/frontend/src/Components/Page/Header/ArtistSearchInputConnector.js
index 2ab4c667d..bf2b8c648 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchInputConnector.js
+++ b/frontend/src/Components/Page/Header/ArtistSearchInputConnector.js
@@ -1,16 +1,80 @@
-import _ from 'lodash';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { createSelector } from 'reselect';
+import jdu from 'jdu';
import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
import ArtistSearchInput from './ArtistSearchInput';
-function createMapStateToProps() {
+function createCleanTagsSelector() {
+ return createSelector(
+ createTagsSelector(),
+ (tags) => {
+ return tags.map((tag) => {
+ const {
+ id,
+ label
+ } = tag;
+
+ return {
+ id,
+ label,
+ cleanLabel: jdu.replace(label).toLowerCase()
+ };
+ });
+ }
+ );
+}
+
+function createCleanArtistSelector() {
return createSelector(
createAllArtistSelector(),
+ createCleanTagsSelector(),
+ (allArtists, allTags) => {
+ return allArtists.map((artist) => {
+ const {
+ artistName,
+ sortName,
+ images,
+ // alternateTitles,
+ tags
+ } = artist;
+
+ return {
+ artistName,
+ sortName,
+ images,
+ cleanName: jdu.replace(artistName).toLowerCase(),
+ // alternateTitles: alternateTitles.map((alternateTitle) => {
+ // return {
+ // title: alternateTitle.title,
+ // cleanTitle: jdu.replace(alternateTitle.title).toLowerCase()
+ // };
+ // }),
+ tags: tags.map((id) => {
+ return allTags.find((tag) => tag.id === id);
+ })
+ };
+ }).sort((a, b) => {
+ if (a.cleanName < b.cleanName) {
+ return -1;
+ }
+ if (a.cleanName > b.cleanName) {
+ return 1;
+ }
+
+ return 0;
+ });
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ createCleanArtistSelector(),
(artist) => {
return {
- artist: _.sortBy(artist, 'sortName')
+ artist
};
}
);
diff --git a/frontend/src/Components/Page/Header/ArtistSearchResult.css b/frontend/src/Components/Page/Header/ArtistSearchResult.css
index 5c6f58eed..4d21d4640 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchResult.css
+++ b/frontend/src/Components/Page/Header/ArtistSearchResult.css
@@ -19,12 +19,16 @@
}
.alternateTitle {
- flex: 1 1 1px;
- margin-left: 5px;
+ composes: title;
+
color: $disabledColor;
font-size: $smallFontSize;
}
+.tagContainer {
+ composes: title;
+}
+
@media only screen and (max-width: $breakpointSmall) {
.titles,
.title,
diff --git a/frontend/src/Components/Page/Header/ArtistSearchResult.js b/frontend/src/Components/Page/Header/ArtistSearchResult.js
index 95186d039..3112f7b4e 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchResult.js
+++ b/frontend/src/Components/Page/Header/ArtistSearchResult.js
@@ -1,27 +1,43 @@
-import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
+import { kinds } from 'Helpers/Props';
+import Label from 'Components/Label';
import ArtistPoster from 'Artist/ArtistPoster';
import styles from './ArtistSearchResult.css';
-function getMatchingAlternateTile(alternateTitles, query) {
- return _.first(alternateTitles, (alternateTitle) => {
- return alternateTitle.title.toLowerCase().contains(query.toLowerCase());
+// function findMatchingAlternateTitle(alternateTitles, cleanQuery) {
+// return alternateTitles.find((alternateTitle) => {
+// return alternateTitle.cleanTitle.contains(cleanQuery);
+// });
+// }
+
+function getMatchingTag(tags, cleanQuery) {
+ return tags.find((tag) => {
+ return tag.cleanLabel.contains(cleanQuery);
});
}
function ArtistSearchResult(props) {
const {
- query,
+ cleanQuery,
artistName,
+ cleanName,
+ images,
// alternateTitles,
- images
+ tags
} = props;
- const index = artistName.toLowerCase().indexOf(query.toLowerCase());
- // const alternateTitle = index === -1 ?
- // getMatchingAlternateTile(alternateTitles, query) :
- // null;
+ const titleContains = cleanName.contains(cleanQuery);
+ // let alternateTitle = null;
+ let tag = null;
+
+ // if (!titleContains) {
+ // alternateTitle = findMatchingAlternateTitle(alternateTitles, cleanQuery);
+ // }
+
+ if (!titleContains) { // && !alternateTitle) {
+ tag = getMatchingTag(tags, cleanQuery);
+ }
return (
@@ -44,16 +60,30 @@ function ArtistSearchResult(props) {
// {alternateTitle.title}
//
}
+
+ {
+ !!tag &&
+
+
+
+ }
);
}
ArtistSearchResult.propTypes = {
- query: PropTypes.string.isRequired,
+ cleanQuery: PropTypes.string.isRequired,
artistName: PropTypes.string.isRequired,
// alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
- images: PropTypes.arrayOf(PropTypes.object).isRequired
+ cleanName: PropTypes.string.isRequired,
+ images: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tags: PropTypes.arrayOf(PropTypes.object).isRequired
};
export default ArtistSearchResult;