Refactor use-search to use a properly-typed fuzzy-search library

[mazipan]

Brief

The current useSearch() implementation uses the itemsjs library, which has no proper typings. This leads to useSearch() being littered with any type annotations.

We want to avoid using any if possible. Therefore, we should migrate to a search library with proper typings (e.g. fusejs).

Definition of done

• use-search properly migrated to a library with valid typings.
• All any are replaced by correct typings.

Tasks

• Migrate to a properly typed fuzzy search library
• Refactor use-search to use fusejs and add proper typings

[resir014]

useSearch() also uses the itemsjs library, which has no proper typings.

Highly recommend switching to a properly typed library, e.g. fusejs

[resir014]

Issue + tasks list updated.

[mazipan]

Itemsjs

https://bundlephobia.com/package/[email protected]

Size: 64kB
Minified: 20kB

Fuse.js

https://bundlephobia.com/package/[email protected]

Size: 15kB
Minified: 5kB

But yes, this is a big refactor.
Since you will face many differences between this two libraries.

[mazipan]

Since this issue is classified as hard-level. I think it's better if we introduce an automated testing first for this component before go on the refactoring part.

The hard part is you need to tackle all cases, testing it, make sure it's not breaking. From my personal experience, testing using a manual way when you're not the original creator is very risky.

@resir014 @zainfathoni

[resir014]

Found more issues with itemsjs: turns out it's using a vulnerable version of lodash:

A quick peek through the bundle analyser shows that it's coming from itemsjs. We missed out on this initially, because turns out the dependency is inlined within itemsjs itself:

We need to expedite moving away from itemsjs. Should we proritise this issue, or should we wait until the Typesense experiment at #374 is complete? Or more importantly, which one of these takes the least effort?

cc: @zainfathoni @mazipan @ekamuktia @famasya

[famasya]

As my experience, integrating Typesense into React component itself isn't take too much effort (and properly typed). I think we should take a look at #401 first, since it's having some minor issues @resir014 .

cc @zainfathoni @mazipan @ekamuktia

[zainfathoni]

Closing this issue in favour of the #374.