[FSSS-180] Fix: facets not being selected

[eduardoformiga]

What's the purpose of this pull request?

While using the mobile version of the filter on PLP, sometimes the facets were not being applied as we can see below:

CleanShot.2022-03-09.at.15.44.22.mp4

So, this PR aims to look into this problem and fix it.

How does it work?

The Filter on the mobile version works in a different way than the desktop version.
While on the desktop the result is shown just after the user clicks the Facet's Checkboxes, performing the toggleFacet (singular, so one facet by time) function from the useSearch hook (@faststore/sdk).

On the mobile version, the Filter opens inside a SlideOver component and the user first picks up the facets (onFacetChange function) and so hits the Apply Button (onApply function). Thus, we need to investigate these 2 functions.

The onFacetChange aims to keep the actual state once the user selects/unselects the checkboxes.

Previously 2 states were being used: selectedFacets and facetsToRemove. But keeping the facetsToRemove can be a little tricky. Once the facet is already selected and the user unselects it, the facet was being added to the facetsToRemove array. But the opposite situation, when the facet was unselected and the user selects it again, the facetsToRemove state wasn't updated.

If the user selects and unselects the same facet multiple times without hitting the Apply Button, the final facetsToRemove array is gonna have the same facet multiples times. Making the end result messy afterward on the onApply function.

Furthermore, we don't need to keep the facetsToRemove state, once we have the original state searchState.selectedFacets and the actual state selectedFacets, we can get which facets were added and removed comparing these 2 arrays against each other.

So, the first task was remove the facetsToRemove state.

I took advantage that I was going to change this function and refactor it a little bit trying to improve the readability and performance. Besides, I changed the setSelectedFacets to the functional update way, recommended by React doc when we depend on previous values.

Another problem is the referential equality while using the searchState.selectedFacets from the @faststore/sdk to set the initial value of the selectedFacets and also every time we open the filter. The first time we setSelectedFacets on onFacetChange function was also changing the searchState.selectedFacets. To fix it we can use a new array spreading the searchState.selectedFacets values.

Finally, on the onApply function, we need to use the toggleFacets (plural, multiple facets) function from the @faststore/sdk to toggle all facets changed (added and removed). Now that we clean the tricky facetsToRemove, that was duplicating facets and making the messy. We need to compare the original state searchState.selectedFacets and the actual state selectedFacets as mentioned before to get the Facets added and removed (like an XOR operation) and passing the results to the toggleFacets (task done here).

Result:

Screen.Recording.2022-03-10.at.15.55.27.mov

How to test it?

You can open the preview and double-check if the filter works as expected while using the mobile version.

Checklist

• CHANGELOG entry added

[netlify]

✔️ Deploy Preview for basestore ready!

🔨 Explore the source changes: 9371abb

🔍 Inspect the deploy log: https://app.netlify.com/sites/basestore/deploys/622b5feaa9db3f0009a62aa9

😎 Browse the preview: https://deploy-preview-380--basestore.netlify.app

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-380--base.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 9f9f46e

[gatsby-cloud]

Gatsby Cloud Build Report

basestore

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 7m

Performance

Lighthouse report

Metric	Score
Performance	💚 91
Accessibility	💚 100
Best Practices	💚 100
SEO	💚 93

🔗 View full report

[filipewl]

Awesome PR description! It guided me commit-by-commit through the changes.
🤩

I tested on my Android and also confirmed the bug is now gone.

[lucasfp13]

Excellent context description! 💯

I tested it again to force the error but everything seems fine now!