-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
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
Add <InfiniteList>
and <InfinitePagination>
components
#8781
Conversation
@@ -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 }], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
.
export const useSidebarState = (): useSidebarStateResult => | ||
useStore<boolean>('sidebar.open', true); | ||
export const useSidebarState = (): useSidebarStateResult => { | ||
const isXSmall = useMediaQuery<Theme>( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome!
</Admin> | ||
); | ||
|
||
export const PaginationClassic = () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏
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> | ||
)} | ||
</> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not make a component out of this too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
packages/ra-core/src/controller/list/useInfiniteListController.ts
Outdated
Show resolved
Hide resolved
packages/ra-core/src/controller/list/useInfiniteListController.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>
Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>
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 |
That's absolutely a bug. Good catch! |
Should be OK now! |
}, | ||
}); | ||
|
||
const Admin = ({ children, dataProvider, layout }: any) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope :)
queryClient, memoryHistory and store
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not necessary in my tests: the stories don't share a state anymore
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checked and confirmed
It needs a rebase though |
rebased |
<InfiniteList>
and <InfinitePagination>
components
<InfiniteList>
is a drop-in replacement for<List>
that leveragesuseInfiniteGetList()
to allow infinite pagination with<SimpleList>
and<Datagrid>
useInfiniteListController
hook<InfiniteListBase>
component<InfiniteList>
component<InfinitePagination>
componentSample usage
Enregistrement.de.l.ecran.2023-03-29.a.19.33.58.mov