Simplify the development of custom List views #4952

fzaninotto · 2020-06-17T15:01:09Z

Problem

For the core team, passing around list controller props is cumbersome, and makes TypeScript types bloated and cryptic.
It's hard to know which variables are provided by react-admin in a list
As a consequence, it's hard to develop a custom List layout (e.g. with metrics at the top, or with both a left and a right sidebar)

Solution

Use a context to store controller props instead of cloning children and passing them the prop.

Continue cloning the child and passing controller props for now, to keep BC, but ignore these props in child components.

Target

No need to "push" the props from parent to child, the children can "pull" the props from the context.

const PostList = props => (
    <BaseList {...props} perPage={10}>
        <div>
             <Filter />
        </div>
        <Grid container>
            <Grid item xs={8}>
                <SimpleList primaryText={record => record.title} />
            </Grid>
            <Grid item xs={4}>
                List instructions...
            </Grid>
        </Grid>
        <div>
            Post related links...
        </div>
    </BaseList>
);

Tasks

Slight BC breaks:

useListController no longer returns the version
useReferenceManyFieldController returns a basePath instead of a referenceBasePath

…perator

packages/ra-ui-materialui/src/list/ListView.tsx

…aelish operator" This reverts commit 4034017.

Adds filtering capabilities to the ReferenceManyField Slight BC breaks: - useListController no longer returns the version - useReferenceManyFieldController returns a basePath instead of a referenceBasePath

fzaninotto · 2020-06-18T21:12:08Z

packages/ra-ui-materialui/src/field/ReferenceManyField.tsx

    } = props;
    if (React.Children.count(children) !== 1) {
        throw new Error(
            '<ReferenceManyField> only accepts a single child (like <Datagrid>)'
        );
    }
-    const { sort, setSortField } = useSortState(initialSort);


this logic has moved to useReferenceManyFieldController

djhi

Pretty neat! Several things should have been done in dedicated PRs though (Datagrid conversion to TS, Reference fields migration to ListContext)

packages/ra-core/src/controller/useListContext.ts

And demonstrate how to do a custom layout in TagList

- use List Context in ExportButton, ListActions, Filter - introduce ListBase - merge permanentFilter with Filter in ListParams to avoid having to do it several times and passing the permanent filters around - use ListBase in TagList and CommentList

djhi

💪

packages/ra-ui-materialui/src/list/List.spec.js

fzaninotto · 2020-06-28T13:21:32Z

Now ready for review!

docs/List.md

djhi · 2020-06-29T06:51:33Z

docs/List.md

@@ -965,15 +963,15 @@ By default, the filter form doesn't provide a submit button, and submits automat

 React-admin doesn't provide any component for that, but it's a good opportunity to illustrate the internals of the `<Filter>` component. We'll actually provide an alternative implementation to `<Filter>`.

-As explained earlier, `<List>` clones the `filters` element twice. It passes special props to the element to let it interact with the URI query parameter more easily:
+As explained earlier, `<List>` clones the `filters` element twice - once to display the filter button, and once to display the filter form. This `filters` element can use the `useListContext` hook to interact with the URI query parameter more easily. the hook returns the following constants:


Yes, these are constants, not variables or props. How would you name them?

I found it confusing because it returns functions as well

docs/List.md

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>

djhi

💪

ThieryMichel

The ramda part is optional :)

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

ThieryMichel · 2020-06-29T12:56:39Z

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

+    }, [setSelectedIds]);
+
+    // filter logic
+    const [displayedFilters, setDisplayedFilters] = useSafeSetState<{


Doesn't the useFilterState hook already allow to do that ?

Unfortunately, this hook doesn't handle the complex logic of setting filters, displayed filters, and page at the same time, so I can't use it in this case.

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

ThieryMichel · 2020-06-29T13:12:34Z

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

+        if (!loaded) return;
+        let finalData = data;
+        // 1. filter
+        Object.keys(filterValues).forEach(


I think it would be better to start form the data, with a data.filter that would then check all filter values.
This way no need to duplicate data.

Additionally, you could use ramda whereEq to filter data
https://ramdajs.com/docs/#whereEq
I checked, ramda is already in react-admin dependency (well in yarn.lock actually)

TIL ramda.wherEq

Yes, it would prevent iterating several times over the data for multiple filters. BUT Ramda isn't a direct dependency, it's significantly harder to code, and I doubt many people will download very large arrays and do multicriteria search on them. And when it's the case, we'll investigate your optimization.

Not that hard to code:

const tempData = data.filter(record => Object.entries(filterValues) .all(([filterName, filterValue]) => filterValue == get(record, filterName)), );

Or even better

const matchFilter = filterValues => record => Object.entries(filterValues) .all(([filterName, filterValue]) => filterValue == get(record, filterName)); // later const tempData = data.filter(matchFilter(filterValues));

And easier to understand IMO

ThieryMichel · 2020-06-29T13:16:33Z

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

+        );
+        // 2. sort
+        if (sort.field) {
+            finalData = finalData.sort((a, b) => {


Ramda has a sortBy function https://ramdajs.com/docs/#sortBy
Just saying :)

packages/ra-core/src/controller/field/useReferenceManyFieldController.ts

ThieryMichel · 2020-06-29T13:18:22Z

packages/ra-core/src/controller/field/useReferenceManyFieldController.ts

+    }, [setSelectedIds]);
+
+    // filter logic
+    const [displayedFilters, setDisplayedFilters] = useSafeSetState<{


useFilterState ?

Unfortunately, this hook doesn't handle the complex logic of setting filters, displayed filters, and page at the same time, so I can't use it in this case.

…into controller-context

ThieryMichel · 2020-06-30T07:10:07Z

packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts

+        if (!loaded) return;
+        let finalData = data;
+        // 1. filter
+        Object.keys(filterValues).forEach(


Not that hard to code:

const tempData = data.filter(record => Object.entries(filterValues) .all(([filterName, filterValue]) => filterValue == get(record, filterName)), );

Or even better

const matchFilter = filterValues => record => Object.entries(filterValues) .all(([filterName, filterValue]) => filterValue == get(record, filterName)); // later const tempData = data.filter(matchFilter(filterValues));

And easier to understand IMO

Add ListContext and migrate List to TypeScript

9668002

fzaninotto added the WIP Work In Progress label Jun 17, 2020

fzaninotto added 4 commits June 18, 2020 11:44

use useListContext instead of props in Empty

d8f552b

use useListContext instead of props in ListToolbar

a43d879

Update typescript, eslint & pritter to be able to use null coaelish o…

4034017

…perator

add top, left, right, and bottom props to <List>

a69f573

fzaninotto commented Jun 18, 2020

View reviewed changes

packages/ra-ui-materialui/src/list/ListView.tsx Outdated Show resolved Hide resolved

fzaninotto added 6 commits June 18, 2020 16:45

Revert "Update typescript, eslint & pritter to be able to use null co…

fe5fb04

…aelish operator" This reverts commit 4034017.

replace modern JS by nos so modern one

79c7155

small fixes

8307552

use useListContextinstead of props in BulkActionsToolbar

e897f04

Migrate Datagrid to TypeScript

5c1c24b

Make ReferenceManyField include a ListContext

a8c7a88

Adds filtering capabilities to the ReferenceManyField Slight BC breaks: - useListController no longer returns the version - useReferenceManyFieldController returns a basePath instead of a referenceBasePath

fzaninotto commented Jun 18, 2020

View reviewed changes

fzaninotto added 2 commits June 19, 2020 09:37

Improve backward compatibility

8e091c4

use useListContext instead of props in ReferenceArrayField

1d4441c

djhi mentioned this pull request Jun 19, 2020

Export sanitizeRestProps in index.js files #4959

Closed

djhi approved these changes Jun 19, 2020

View reviewed changes

packages/ra-core/src/controller/useListContext.ts Outdated Show resolved Hide resolved

fzaninotto and others added 12 commits June 19, 2020 16:07

Merge branch 'next' into controller-context

f0eb78c

use useListContext instead of props in SimpleList

4d65400

Remove top, bottom, left and right props

41fcc34

And demonstrate how to do a custom layout in TagList

Test List context in simple example

c7129e2

- use List Context in ExportButton, ListActions, Filter - introduce ListBase - merge permanentFilter with Filter in ListParams to avoid having to do it several times and passing the permanent filters around - use ListBase in TagList and CommentList

Fix warnings

097c20d

Fix unit tests

8c9886a

Fix warnings

441f835

Fix last test

a4f2b25

Fix warnings in Pagination test

c5a7e1a

Fix warnings in List tests

f62261c

Fix warnings in Filter tests

eb221e2

Convert Filter to TypeScript

3f84625

Try to make tests pass

ee7cf65

djhi reviewed Jun 24, 2020

View reviewed changes

packages/ra-ui-materialui/src/list/List.spec.js Outdated Show resolved Hide resolved

packages/ra-ui-materialui/src/list/List.spec.js Outdated Show resolved Hide resolved

Migrate SingleFieldList and ListGuesser to ListContext

60caa8b

fzaninotto mentioned this pull request Jun 24, 2020

Add types to layout/Error #4966

Closed

fzaninotto added 4 commits June 26, 2020 22:43

Rewrite List documentation to illustrate the new context

bd11207

add basic integration tests for useListContext

6016447

improve jsDoc of ListContext and useListcontext

aa8976a

review

1d00e6f

fzaninotto added RFR Ready For Review and removed WIP Work In Progress labels Jun 28, 2020

djhi requested changes Jun 29, 2020

View reviewed changes

Apply suggestions from code review

ddad038

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>

djhi approved these changes Jun 29, 2020

View reviewed changes

ThieryMichel suggested changes Jun 29, 2020

View reviewed changes

fzaninotto added 3 commits June 29, 2020 18:38

use Existing state management hooks

152b2c8

review

34cebc4

Merge branch 'controller-context' of github.com:marmelab/react-admin …

4f05291

…into controller-context

ThieryMichel suggested changes Jun 30, 2020

View reviewed changes

Review

e6f67cd

djhi merged commit efd3959 into next Jun 30, 2020

djhi deleted the controller-context branch June 30, 2020 12:28

fzaninotto added this to the 3.7.0 milestone Jun 30, 2020

djhi mentioned this pull request Jul 3, 2020

New prop to ReferenceInput child component: count #5001

Closed

deluan mentioned this pull request Jul 6, 2020

Refactor custom List views to use new useListContext navidrome/navidrome#382

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify the development of custom List views #4952

Simplify the development of custom List views #4952

fzaninotto commented Jun 17, 2020 •

edited

Loading

fzaninotto Jun 18, 2020

djhi left a comment •

edited

Loading

djhi left a comment

fzaninotto commented Jun 28, 2020

djhi Jun 29, 2020

fzaninotto Jun 29, 2020

djhi Jun 29, 2020

djhi left a comment

ThieryMichel left a comment

ThieryMichel Jun 29, 2020

fzaninotto Jun 29, 2020

ThieryMichel Jun 29, 2020

fzaninotto Jun 29, 2020

ThieryMichel Jun 30, 2020 •

edited

Loading

ThieryMichel Jun 29, 2020

ThieryMichel Jun 29, 2020

fzaninotto Jun 29, 2020 •

edited

Loading

ThieryMichel Jun 30, 2020 •

edited

Loading

Simplify the development of custom List views #4952

Simplify the development of custom List views #4952

Conversation

fzaninotto commented Jun 17, 2020 • edited Loading

Problem

Solution

Target

Tasks

Choose a reason for hiding this comment

djhi left a comment • edited Loading

Choose a reason for hiding this comment

djhi left a comment

Choose a reason for hiding this comment

fzaninotto commented Jun 28, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djhi left a comment

Choose a reason for hiding this comment

ThieryMichel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThieryMichel Jun 30, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fzaninotto Jun 29, 2020 • edited Loading

Choose a reason for hiding this comment

ThieryMichel Jun 30, 2020 • edited Loading

Choose a reason for hiding this comment

fzaninotto commented Jun 17, 2020 •

edited

Loading

djhi left a comment •

edited

Loading

ThieryMichel Jun 30, 2020 •

edited

Loading

fzaninotto Jun 29, 2020 •

edited

Loading

ThieryMichel Jun 30, 2020 •

edited

Loading