Added new logic for resultsetTable to manage sorting and adding/removing rows properly

dxc-technology / halstack-react

Library of components for building SPAs with React and Halstack Design System

https://developer.dxc.com/halstack/

Apache License 2.0

15 stars 14 forks source link

Added new logic for resultsetTable to manage sorting and adding/removing rows properly #1938

Closed Mil4n0r closed 6 months ago

Mil4n0r commented 7 months ago

Checklist (Check off all the items before submitting)

[ ] Build process is done without errors. All tests pass in the /lib directory.
[ ] Self-reviewed the code before submitting.
[ ] Meets accessibility standards.
[ ] Added/updated documentation to /website as needed.
[ ] Added/updated tests as needed.

Description When interacting with Checkbox or any other changeable element, the page would be set to 1 no matter what the situation were. I have implemented a new logic in order to track changes when adding or removing rows.

I still haven't changed the tests because I want the new logic to be validated first, I also have doubts about how to handle both add/remove rows and cases where the data changes entirely (this last one not being taken into account right now).

Closes #1936

Mil4n0r commented 7 months ago

Closed for now until the topic is discussed.

Mil4n0r commented 7 months ago

Reopened, will remove it from Draft when I receive more feedback in the issue.

Mil4n0r commented 6 months ago

The new problem shared by Alan is caused by the fact that we are currently using index from the map to set the keys. That is a problem that I detected while working in the code quality PR and is pending to be fixed, as it is considered a bad practice in React (Specially for sortable data).

This would lead to 2 possible solutions:

Leaving the structure as it is but setting the keys with a randomly generated Id (such as useId or uuidv4), this is not the best solution because it is forced to generate new numbers each time that the data changes or is sorted.
Changing the structure to ensure that each row has a unique id (either adding a field to the data structure and telling users to make sure that it is not repeated or using the current sortValue and force it to be unique).

Mil4n0r commented 6 months ago

I have added a new mechanism to generate keys prior to making the sorting. Generate an intermediate structure with separate ids and cells preventing us from having to change the rows prop structure.

I have done testing in local to ensure that it was working properly with a similar example than the one Alan shared (using ReactHookForm).

After we merge this, I will talk to him and ensure that it is working as expected for their specific use case.