Add `<InfiniteList>` and `<InfinitePagination>` components #8781

fzaninotto · 2023-03-29T17:30:17Z

<InfiniteList> is a drop-in replacement for <List> that leverages useInfiniteGetList() to allow infinite pagination with <SimpleList> and <Datagrid>

Sample usage

const BookList = () => (
    <InfiniteList>
        <SimpleList primaryText={record => record.title} />
    </InfiniteList>
);

Enregistrement.de.l.ecran.2023-03-29.a.19.33.58.mov

fzaninotto · 2023-03-29T21:42:24Z

packages/ra-core/src/dataProvider/useInfiniteGetList.ts

@@ -80,7 +79,7 @@ export const useInfiniteGetList = <RecordType extends RaRecord = any>(
        Error,
        GetInfiniteListResult<RecordType>
    >(
-        [resource, 'getList', { pagination, sort, filter, meta }],
+        [resource, 'getInfiniteList', { pagination, sort, filter, meta }],


This is necessary because otherwise the normal and infinite list queries share the same cache, which leads to errors because they don't have the same structure.

This means that all the dataProvider hooks that optimistically update the getList query cache must also do it for the getInfiniteList.

fzaninotto · 2023-04-03T21:03:08Z

packages/ra-ui-materialui/src/layout/useSidebarState.ts

-export const useSidebarState = (): useSidebarStateResult =>
-    useStore<boolean>('sidebar.open', true);
+export const useSidebarState = (): useSidebarStateResult => {
+    const isXSmall = useMediaQuery<Theme>(


The sidebar was open by default on Mobile. It was not user-friendly, but most importantly it prevented e2e testing on mobile, as every test had to start by closing the menu.

djhi

Awesome!

djhi · 2023-04-04T08:02:14Z

packages/ra-ui-materialui/src/list/InfiniteList.stories.tsx

+    </Admin>
+);
+
+export const PaginationClassic = () => (


I think a story showing how to load the next page using a single Load more button would be more relevant. Even better, I think we should provide such button by default in addition to the InfinitePagination component.
InfinitePaginationButton ?

I wrote this story to show that the default pagination callbacks still work even for the infinite list. I think we should keep it.

For the "Load more" pagination, it's a good idea. I created a story and a doc entry, but just like the component that displays the count, I'm not sure it's a standard solution, so I prefer not to publish a component for now.

slax57

👏

docs/InfiniteList.md

slax57 · 2023-04-04T09:39:34Z

docs/InfiniteList.md

+const CustomPagination = () => {
+    const { total } = useListContext();
+    return (
+        <>
+            <InfinitePagination />
+            {total > 0 && (
+                <Box position="sticky" bottom={0} textAlign="center">
+                    <Card
+                        elevation={2}
+                        sx={{ px: 2, py: 1, mb: 1, display: 'inline-block' }}
+                    >
+                        <Typography variant="body2">{total} results</Typography>
+                    </Card>
+                </Box>
+            )}
+        </>
+    );
+};


Why not make a component out of this too?

Because I don't think this is a general solution, it's just an example. People will want to put the number of results on top of the list, in a datagrid footer, in the action bar, etc... There is no standard for that UI.

docs/navigation.html

packages/ra-core/src/controller/list/useInfiniteListController.ts

Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>

slax57 · 2023-04-04T14:16:42Z

Not sure if this should qualify as a bug or not, but when your screen is already tall enough to display more than 2 pages of results, then the 3rd page is never fetched (only the second page is fetched).

See attached screen capture.

Peek.04-04-2023.16-13.webm

fzaninotto · 2023-04-04T15:37:56Z

Not sure if this should qualify as a bug or not, but when your screen is already tall enough to display more than 2 pages of results, then the 3rd page is never fetched (only the second page is fetched).

See attached screen capture.

That's absolutely a bug. Good catch!

fzaninotto · 2023-04-04T16:38:49Z

Should be OK now!

djhi · 2023-04-05T07:55:09Z

packages/ra-ui-materialui/src/list/InfiniteList.stories.tsx

+    },
+});
+
+const Admin = ({ children, dataProvider, layout }: any) => (


Can you wrap provide a new queryClient, memoryHistory and store to each story? Otherwise, visiting filtered stories make the others (pagination related for instance) weird as the filters are already stored and applied

Nope :)

queryClient, memoryHistory and store

Not necessary in my tests: the stories don't share a state anymore

Checked and confirmed

djhi · 2023-04-05T13:30:35Z

It needs a rebase though

fzaninotto · 2023-04-05T13:45:40Z

rebased

fzaninotto added 3 commits March 29, 2023 19:26

Add infinite list core hooks and components

9bc9a2e

Add story to test base case

15382dc

Add InfiniteList component

7e6d5a6

fzaninotto added the WIP Work In Progress label Mar 29, 2023

vercel bot deployed to Preview – react-admin-storybook March 29, 2023 17:31 View deployment

fzaninotto added 3 commits March 29, 2023 21:38

Remove need for i18n

df9567a

Test more props in storybook

c82e0dc

Rename basic story

e5952d9

vercel bot deployed to Preview – react-admin-storybook March 29, 2023 20:21 View deployment

fzaninotto added 2 commits March 29, 2023 23:02

Rename InfiniteScroll to InfinitePagination

f821f03

Do not set sort by default on the controller

5a55eee

vercel bot deployed to Preview – react-admin-storybook March 29, 2023 21:09 View deployment

Use InfiniteList in simple example

8635bb4

vercel bot deployed to Preview – react-admin-storybook March 29, 2023 21:42 View deployment

fzaninotto commented Mar 29, 2023

View reviewed changes

fzaninotto added 2 commits March 31, 2023 12:57

Fix useUpdate optimistic effect with infinite list

86d676c

Update useGetMany to update getInfiniteList cache

de8e225

vercel bot deployed to Preview – react-admin-storybook March 31, 2023 11:03 View deployment

fzaninotto added 3 commits March 31, 2023 13:09

Add tests for useUpdate and useUpdateMany

f344252

Update useDelete optimistic for getInfiniteList

71e57f8

update useDeleteMany cache

b138935

vercel bot deployed to Preview – react-admin-storybook March 31, 2023 11:25 View deployment

Add documentation

4aefedd

vercel bot deployed to Preview – react-admin-storybook April 2, 2023 19:38 View deployment

Document how to show the count

dc754b4

vercel bot deployed to Preview – react-admin-storybook April 2, 2023 21:22 View deployment

Add mention of sticky header and footer in the docs

92dbfa4

vercel bot deployed to Preview – react-admin-storybook April 2, 2023 21:46 View deployment

fzaninotto added 2 commits April 3, 2023 21:50

Fix sidebar starts open on Mobile

0d0baa0

Add e2e test for infinite pagination

6a9cb27

fzaninotto commented Apr 3, 2023

View reviewed changes

vercel bot deployed to Preview – react-admin-storybook April 3, 2023 21:03 View deployment

djhi reviewed Apr 4, 2023

View reviewed changes

slax57 requested changes Apr 4, 2023

View reviewed changes

fzaninotto and others added 3 commits April 4, 2023 13:34

Update packages/ra-core/src/controller/list/useInfiniteListController.ts

c84f432

Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>

Update packages/ra-core/src/controller/list/useInfiniteListController.ts

81ad790

Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>

Fix InfiniteList example

4f5c884

vercel bot deployed to Preview – react-admin-storybook April 4, 2023 11:39 View deployment

Add entries in Reference

687bbff

vercel bot deployed to Preview – react-admin-storybook April 4, 2023 11:42 View deployment

Add load more story and documentation

aa6266c

vercel bot deployed to Preview – react-admin-storybook April 4, 2023 12:00 View deployment

slax57 approved these changes Apr 4, 2023

View reviewed changes

Fix bug where the InfinitePagination cannot fetch after page 2

dacbbe6

vercel bot deployed to Preview – react-admin-storybook April 4, 2023 16:40 View deployment

djhi requested changes Apr 5, 2023

View reviewed changes

Fix InfiniteList stories share the same list state

5345571

vercel bot deployed to Preview – react-admin-storybook April 5, 2023 11:42 View deployment

djhi approved these changes Apr 5, 2023

View reviewed changes

Merge branch 'next' into infinite-list

1a25332

vercel bot deployed to Preview – react-admin-storybook April 5, 2023 13:46 View deployment

djhi merged commit 0e1a1ce into next Apr 5, 2023

djhi deleted the infinite-list branch April 5, 2023 14:26

fzaninotto added this to the 4.10.0 milestone Apr 6, 2023

fzaninotto changed the title ~~Infinite list~~ Add <InfiniteList> and <InfinitePagination> components Apr 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `<InfiniteList>` and `<InfinitePagination>` components #8781

Add `<InfiniteList>` and `<InfinitePagination>` components #8781

fzaninotto commented Mar 29, 2023 •

edited

Loading

fzaninotto Mar 29, 2023

fzaninotto Apr 3, 2023

djhi left a comment

djhi Apr 4, 2023

fzaninotto Apr 4, 2023

slax57 left a comment

slax57 Apr 4, 2023

fzaninotto Apr 4, 2023

slax57 commented Apr 4, 2023

fzaninotto commented Apr 4, 2023

fzaninotto commented Apr 4, 2023

djhi Apr 5, 2023

fzaninotto Apr 5, 2023

djhi Apr 5, 2023

fzaninotto Apr 5, 2023

djhi Apr 5, 2023

djhi commented Apr 5, 2023

fzaninotto commented Apr 5, 2023

Add <InfiniteList> and <InfinitePagination> components #8781

Add <InfiniteList> and <InfinitePagination> components #8781

Conversation

fzaninotto commented Mar 29, 2023 • edited Loading

Sample usage

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

slax57 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

slax57 commented Apr 4, 2023

fzaninotto commented Apr 4, 2023

fzaninotto commented Apr 4, 2023

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

djhi commented Apr 5, 2023

fzaninotto commented Apr 5, 2023

Add `<InfiniteList>` and `<InfinitePagination>` components #8781

Add `<InfiniteList>` and `<InfinitePagination>` components #8781

fzaninotto commented Mar 29, 2023 •

edited

Loading