diff --git a/packages/my-joy-images/package.json b/packages/my-joy-images/package.json index 42c75458..267e64bc 100644 --- a/packages/my-joy-images/package.json +++ b/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", diff --git a/packages/my-joy-images/src/containers/list.js b/packages/my-joy-images/src/containers/list.js index 74d28f70..72cbd3c9 100644 --- a/packages/my-joy-images/src/containers/list.js +++ b/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 { diff --git a/packages/my-joy-images/src/containers/tags.js b/packages/my-joy-images/src/containers/tags.js index 32e9fcb3..b29b1e58 100644 --- a/packages/my-joy-images/src/containers/tags.js +++ b/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 }) => ({ - addOpen: get(values, `${image.id}-add-open`, false), - mutationError: get(values, `${image.id}-mutation-error`, false), - mutating: get(values, `${image.id}-mutating`, false) - }), + ({ 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 })); diff --git a/packages/my-joy-images/src/state/gen-index.js b/packages/my-joy-images/src/state/gen-index.js deleted file mode 100644 index 327982f0..00000000 --- a/packages/my-joy-images/src/state/gen-index.js +++ /dev/null @@ -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)); - });