New: Search by Tag

pull/362/head
Qstick 7 years ago
parent ef93ae3792
commit d79139976c

@ -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 (
<ArtistSearchResult
query={query}
cleanQuery={jdu.replace(query).toLowerCase()}
{...item}
/>
);
@ -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 });

@ -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
};
}
);

@ -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,

@ -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 (
<div className={styles.result}>
@ -44,16 +60,30 @@ function ArtistSearchResult(props) {
// {alternateTitle.title}
// </div>
}
{
!!tag &&
<div className={styles.tagContainer}>
<Label
key={tag.id}
kind={kinds.INFO}
>
{tag.label}
</Label>
</div>
}
</div>
</div>
);
}
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;

Loading…
Cancel
Save