New: Search by Tag

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

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 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(
-    createAllArtistSelector(),
+    createCleanArtistSelector(),
     (artist) => {
       return {
-        artist: _.sortBy(artist, 'sortName')
+        artist
       };
     }
   );

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,

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 (
     <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;