Add Search to Hassio add-on store #3108
Conversation
| const addons = this.fuzzySearchAndSort(this.addons, this.filter); | ||
|
|
||
| if (this.filter && addons.length < 1) { | ||
| return html``; |
There was a problem hiding this comment.
Should we print a message that no results are found instead of an empty screen?
There was a problem hiding this comment.
Now shows 'no results' message for each repository with no results:
| @@ -91,6 +95,23 @@ class HassioAddonRepositoryEl extends LitElement { | |||
| navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); | |||
| } | |||
|
|
|||
| private fuzzySearchAndSort(addons, filter) { | |||
There was a problem hiding this comment.
This function is in the code twice, can we reuse it instead of copy/paste?
There was a problem hiding this comment.
This is called from the render method, we also re-render when hass changes. We should wrap this in memoize-one, so that a hass change won't re-calculate it all.
| private fuzzySearchAndSort(addons, filter) { | |
| private fuzzySearchAndSort = memoizeOne((addons, filter) => { |
There was a problem hiding this comment.
If you extract the method into something like filterAddons like Bram suggests, this will become memoizeOne(filterAddons)
Title search only is definitely not enough. E.g. users search for a MQTT broker and type in 'MQTT', |
OK, then filter on title and description... But fuzzy would also match MTQT and other user input errors. Nice, but also expensive... |
|
I like that search handling if we can live with the resource |
It's very lightweight imo. The options could also be tweaked if we want, so the search can be more exact or allow other properties etc. |
|
Made a couple of changes. (Still WIP) I'll do a proper test when I get to a working hassio dev setup |
timmo001
changed the title
|
|
||
| protected render(): TemplateResult | void { | ||
| const repo = this.repo; | ||
| const addons = memoizeOne(filterAndSort(this.addons, this.filter)); |
There was a problem hiding this comment.
By calling memoizeOne inside render, you are creating a new instance, and so nothing is memoized. You need to store the memoized function as an instance variable like this: https://github.com/home-assistant/home-assistant-polymer/blob/dev/src/layouts/hass-router-page.ts#L55-L66
|
I think that's it. Memoized, cleaned up, css fixed, made function reusable etc. Let me know if I missed anything 👍
|
timmo001
changed the title
timmo001
changed the title
timmo001
changed the title
Description
Adds search functionality for add-ons in the hass.io panel:
This adds fuse.js as a library to the repo which is really nice for doing 'fuzzy' searches. We could use this in the future to add search to other aspects of the frontend such as adding a new card in lovelace