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;