New: Use Fuse.js for UI header search

frontend/src/Components/Page/Header/ArtistSearchInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
-import jdu from 'jdu';
+import Fuse from 'fuse.js';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
@@ -10,6 +10,20 @@ import styles from './ArtistSearchInput.css';
 
 const ADD_NEW_TYPE = 'addNew';
 
+const fuseOptions = {
+  shouldSort: true,
+  includeMatches: true,
+  threshold: 0.3,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    'artistName',
+    'tags.label'
+  ]
+};
+
 class ArtistSearchInput extends Component {
 
   //
@@ -69,16 +83,15 @@ class ArtistSearchInput extends Component {
 
     return (
       <ArtistSearchResult
-        query={query}
-        cleanQuery={jdu.replace(query).toLowerCase()}
-        {...item}
+        {...item.item}
+        match={item.matches[0]}
       />
     );
   }
 
-  goToArtist(artist) {
+  goToArtist(item) {
     this.setState({ value: '' });
-    this.props.onGoToArtist(artist.foreignArtistId);
+    this.props.onGoToArtist(item.item.foreignArtistId);
   }
 
   reset() {
@@ -140,24 +153,8 @@ class ArtistSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    const lowerCaseValue = jdu.replace(value).toLowerCase();
-
-    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.
-
-      if (value.length === 1) {
-        return (
-          artist.cleanName.startsWith(lowerCaseValue) ||
-          artist.tags.some((tag) => tag.cleanLabel.startsWith(lowerCaseValue))
-        );
-      }
-
-      return (
-        artist.cleanName.contains(lowerCaseValue) ||
-        artist.tags.some((tag) => tag.cleanLabel.contains(lowerCaseValue))
-      );
-    });
+    const fuse = new Fuse(this.props.artists, fuseOptions);
+    const suggestions = fuse.search(value).slice(0, 15);
 
     this.setState({ suggestions });
   }
@@ -253,7 +250,7 @@ class ArtistSearchInput extends Component {
 }
 
 ArtistSearchInput.propTypes = {
-  artist: PropTypes.arrayOf(PropTypes.object).isRequired,
+  artists: PropTypes.arrayOf(PropTypes.object).isRequired,
   onGoToArtist: PropTypes.func.isRequired,
   onGoToAddNewArtist: PropTypes.func.isRequired,
   bindShortcut: PropTypes.func.isRequired

frontend/src/Components/Page/Header/ArtistSearchInputConnector.js

@@ -1,35 +1,14 @@
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
 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(),
+    createTagsSelector(),
     (allArtists, allTags) => {
       return allArtists.map((artist) => {
         const {
@@ -46,26 +25,10 @@ function createCleanArtistSelector() {
           sortName,
           foreignArtistId,
           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.sortName < b.sortName) {
-          return -1;
-        }
-        if (a.sortName > b.sortName) {
-          return 1;
-        }
-
-        return 0;
       });
     }
   );
@@ -74,9 +37,9 @@ function createCleanArtistSelector() {
 function createMapStateToProps() {
   return createSelector(
     createCleanArtistSelector(),
-    (artist) => {
+    (artists) => {
       return {
-        artist
+        artists
       };
     }
   );

frontend/src/Components/Page/Header/ArtistSearchResult.js

@@ -5,38 +5,18 @@ import Label from 'Components/Label';
 import ArtistPoster from 'Artist/ArtistPoster';
 import styles from './ArtistSearchResult.css';
 
-// 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 {
-    cleanQuery,
+    match,
     artistName,
-    cleanName,
     images,
-    // alternateTitles,
     tags
   } = props;
 
-  const titleContains = cleanName.contains(cleanQuery);
-  // let alternateTitle = null;
   let tag = null;
 
-  // if (!titleContains) {
-  //   alternateTitle = findMatchingAlternateTitle(alternateTitles, cleanQuery);
-  // }
-
-  if (!titleContains) { // && !alternateTitle) {
-    tag = getMatchingTag(tags, cleanQuery);
+  if (match.key === 'tags.label') {
+    tag = tags[match.arrayIndex];
   }
 
   return (
@@ -55,14 +35,7 @@ function ArtistSearchResult(props) {
         </div>
 
         {
-          // !!alternateTitle &&
-          // <div className={styles.alternateTitle}>
-          //   {alternateTitle.title}
-          // </div>
-        }
-
-        {
-          !!tag &&
+          tag ?
             <div className={styles.tagContainer}>
               <Label
                 key={tag.id}
@@ -70,7 +43,8 @@ function ArtistSearchResult(props) {
               >
                 {tag.label}
               </Label>
-            </div>
+            </div> :
+            null
         }
       </div>
     </div>
@@ -78,12 +52,10 @@ function ArtistSearchResult(props) {
 }
 
 ArtistSearchResult.propTypes = {
-  cleanQuery: PropTypes.string.isRequired,
   artistName: PropTypes.string.isRequired,
-  // alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  cleanName: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  tags: PropTypes.arrayOf(PropTypes.object).isRequired
+  tags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  match: PropTypes.object.isRequired
 };
 
 export default ArtistSearchResult;

package.json

@@ -58,6 +58,7 @@
     "esprint": "0.4.0",
     "file-loader": "3.0.1",
     "filesize": "4.1.2",
+    "fuse.js": "3.4.2",
     "gulp": "4.0.0",
     "gulp-cached": "1.1.1",
     "gulp-concat": "2.6.1",

yarn.lock

@@ -3695,6 +3695,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.2.tgz#d7a638c436ecd7b9c4c0051478c09594eb956212"
+  integrity sha512-WVbrm+cAxPtyMqdtL7cYhR7aZJPhtOfjNClPya8GKMVukKDYs7pEnPINeRVX1C9WmWgU8MdYGYbUPAP2AJXdoQ==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"