Search component

[GuilleAngulo]

Description

It adds a search bar at the menu, a hidden input which opens on click taking all available space. It uses Algolia's react-instantsearch package to create UI elements.

Requirements

• Deploy MeiliSearch server.
• Add strapi-plugin-meilisearch to the backend. Configure with server credentials and games collection.
• Add env variables to the frontend: NEXT_PUBLIC_MEILISEARCH_SERVER, NEXT_PUBLIC_MEILISEARCH_PUBLIC_KEY

Screenshots

Desktop	Mobile

Button fix

It is also added white-space: nowrap to the button component to prevent line breaks (otherwise appearance is modified) :

I would love to hear your feedback on it, being my main concerns if the component is too large (and if would be a good idea to break it up into smaller components) and the tests part. Open to modify anything you think appropiate =)

[willianjusten]

Since we added the search here, we'll need to mock inside tests to not break the unit tests.

[GuilleAngulo]

Great point! I'll add the mock and push changes.

[willianjusten]

I'd separate those parts in different components (maybe even internal ones) like:

- Search
  - SearchBox
  - Hits
  - NoResults

[GuilleAngulo]

Agree. I'll break it up into smaller components as you suggest

[GuilleAngulo]

hey @willianjusten just to check before pushing changes, do you think this structure is valid/makes sense?

[willianjusten]

Yeah, that was exactly what I thought. Since they're dependant, doesn't make sense to have it separated but together like this.

[GuilleAngulo]

I made the changes restructuring the component as you suggested and added the mock for the menu.

I remade the tests for each component, but got stuck on how to mock higher order components, specifically the connectors at Hits/test. The problem I had is how to mock query and hits props for each test (I couldn't get it to work using spyOn ). I made an implementation (and is passing) but probably is not the right way to do it. Can you give me a hand with it? How could I mock in a correct way these connectors (connectStateResults, connectHits) and change the exposed props (query, hits)?