Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Reset sortedRows state on prop change #599

Merged
merged 13 commits into from
Nov 18, 2020

Conversation

dtassone
Copy link
Member

@dtassone dtassone commented Nov 17, 2020

Fix #575
Fix #571

@oliviertassinari oliviertassinari changed the title Fix #575 reset sortedRows state on prop change [DataGrid] Reset sortedRows state on prop change Nov 18, 2020
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! labels Nov 18, 2020
packages/grid/x-grid/src/XGrid.test.tsx Outdated Show resolved Hide resolved
packages/storybook/src/stories/grid-sorting.stories.tsx Outdated Show resolved Hide resolved
packages/grid/x-grid/src/XGrid.test.tsx Outdated Show resolved Hide resolved
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sortedRows looks like an internal state that should be private. It's fully derived from the input rows and the sort configuration provided by users. Developers' changes to the state are overridden by the grid. So I don't think that any tests should assert it.

On a side note, I was surprised to see this state exist. I was assuming that we would have a "input row" state, as well as a "transformed row" state, the transformed one being computed from grouping, filtering, sorting, etc. It seems that the challenge is to make sure that each transformations is applied in the right order. I guess it can be resolved with a priority value.

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
@oliviertassinari
Copy link
Member

Something is off, it jumps:

Nov-18-2020 11-53-39

It renders twice, shouldn't it render once?

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';

const TestCase = () => {
  const [rows, setRows] = React.useState([
    {
      id: 0,
      brand: 'Nike',
    },
    {
      id: 1,
      brand: 'Adidas',
    },
    {
      id: 2,
      brand: 'Puma',
    },
  ]);

  return (
    <div style={{ width: 300, height: 300 }}>
      <button onClick={() => {
        setRows([
          {
            id: 3,
            brand: 'Asics',
          },
          {
            id: 4,
            brand: 'RedBull',
          },
          {
            id: 5,
            brand: 'Hugo',
          },
        ]);
      }}>Swap</button>
      <DataGrid
        columns={[{ field: 'brand', width: 100 }]}
        rows={rows}
        sortModel={[
        {
          field: 'brand',
          sort: 'asc',
        },
      ]}
      />
    </div>
  );
};

export default TestCase;

// When the rows prop change, we reset the sortedRows state.
setGridState((state) => ({
...state,
sorting: { ...state.sorting, sortedRows: rowsProp.map((row) => row.id) },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we sorted the rows directly, would it solve #599 (comment)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least we fixed the reported bug and we have a solid test in place, so why not defer a better solution to later. I suspect it will require a refactoring of the state. There is an issue with the control flow somewhere, it could be imperative calls that shouldn't be here, it could be missing dependencies, a desynchronization, no idea :).

I will fix it ;)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least we fixed the reported bug and we have a solid test in place, so why not defer a better solution to later. I suspect it will require a refactoring of the state. There is an issue with the control flow somewhere, it could be imperative calls that shouldn't be here, it could be missing dependencies, a desynchronization, no idea :).

@dtassone dtassone merged commit 19435ad into mui:master Nov 18, 2020
@oliviertassinari
Copy link
Member

Nice :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
3 participants