fix(images): filter images and tags

fixes #1285

packages/my-joy-images/package.json

@@ -28,6 +28,7 @@
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^2.0.8",
     "force-array": "^3.1.0",
+    "fuse.js": "^3.2.0",
     "hapi-render-react": "^2.1.0",
     "hapi-render-react-joyent-document": "^4.2.3",
     "joyent-logo-assets": "^1.0.0",

packages/my-joy-images/src/containers/list.js

@@ -6,10 +6,9 @@ import remcalc from 'remcalc';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
-import find from 'lodash.find';
-import Index from '@state/gen-index';
 import intercept from 'apr-intercept';
 import { set } from 'react-redux-values';
+import Fuse from 'fuse.js';
 
 import {
   ViewContainer,
@@ -105,6 +104,9 @@ export default compose(
     }),
     props: ({ data: { images, loading, error, refetch } }) => ({
       images,
+      index: new Fuse(images, {
+        keys: ['name', 'os', 'version', 'state', 'type']
+      }),
       loading,
       error
     })
@@ -129,9 +131,7 @@ export default compose(
       );
 
       const filtered = filter
-        ? Index(images)
-            .search(filter)
-            .map(({ ref }) => find(images, ['id', ref]))
+        ? index.search(filter)
         : images;
 
       return {

packages/my-joy-images/src/containers/tags.js

@@ -9,6 +9,7 @@ import intercept from 'apr-intercept';
 import find from 'lodash.find';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
+import Fuse from 'fuse.js';
 
 import {
   H3,
@@ -131,10 +132,15 @@ export default compose(
         refetch,
         ...rest
       } = data;
+
       const image = find(get(rest, 'images', []), ['name', variables.name]);
       const tags = get(image || {}, 'tags', []);
+      const index = new Fuse(tags, {
+        keys: ['name', 'value']
+      });
 
       return {
+        index,
         image: image || {},
         tags,
         loading,
@@ -144,11 +150,17 @@ export default compose(
     }
   }),
   connect(
-    ({ values }, { image }) => ({
+    ({ values, form }, { index, tags, image }) => {
+      const filter = get(form, `${TAGS_TOOLBAR_FORM}.values.filter`, false);
+      const filtered = filter ? index.search(filter) : tags;
+
+      return {
+        tags: filtered,
         addOpen: get(values, `${image.id}-add-open`, false),
         mutationError: get(values, `${image.id}-mutation-error`, false),
         mutating: get(values, `${image.id}-mutating`, false)
-    }),
+      };
+    },
     (dispatch, { image, tags = [], updateTags, refetch }) => ({
       handleToggleAddOpen: addOpen => {
         dispatch(set({ name: `${image.id}-add-open`, value: addOpen }));

packages/my-joy-images/src/state/gen-index.js

@@ -1,16 +0,0 @@
-import Lunr from 'lunr';
-
-Lunr.tokenizer.separator = /[\s\-|_]+/;
-
-export default items =>
-  Lunr(function() {
-    const fields = items
-      .map(item => Object.keys(item))
-      .reduce((all, keys) => all.concat(keys), [])
-      // eslint-disable-next-line no-implicit-coercion
-      .reduce((all, key) => (~all.indexOf(key) ? all : all.concat(key)), [])
-      .filter(key => !key.match(/^__/));
-
-    fields.forEach(field => this.field(field));
-    items.forEach(item => this.add(item));
-  });