Merge pull request #5401 from marmelab/fix-list-to-filtered-list

[Doc] Fix Link to filtered list snippet incorrectly requires all query parameters
marmelab · Oct 15, 2020 · 8a5567f · 8a5567f
2 parents 02031bd + 6ca83b0
commit 8a5567f
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 17 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -812,7 +812,7 @@ You can change the filters by updating the query parameter, e.g. using the `<Lin
 
 ### Linking To A Pre-Filtered List
 
-As the filter values are taken from the URL, you can link to a pre-filtered list by setting the query parameter.
+As the filter values are taken from the URL, you can link to a pre-filtered list by setting the `filter` query parameter.
 
 For instance, if you have a list of tags, you can display a button for each category to link to the list of posts filtered by that tag:
 
@@ -821,7 +821,6 @@ For instance, if you have a list of tags, you can display a button for each cate
 import * as React from "react";
 import Button from '@material-ui/core/Button';
 import { Link } from 'react-router-dom';
-import { stringify } from 'query-string';
 
 const LinkToRelatedProducts = ({ record }) => {
     const translate = useTranslate();
@@ -831,13 +830,7 @@ const LinkToRelatedProducts = ({ record }) => {
             component={Link}
             to={{
                 pathname: '/posts',
-                search: stringify({
-                    page: 1,
-                    perPage: 25,
-                    sort: 'id',
-                    order: 'DESC',
-                    filter: JSON.stringify({ category_id: record.id }),
-                }),
+                search: `filter=${JSON.stringify({ category_id: record.id })}`,
             }}
         >
             All posts with the category {record.name} ; 
@@ -849,8 +842,6 @@ const LinkToRelatedProducts = ({ record }) => {
 
 You can use this button e.g. as a child of `<Datagrid>`. You can also create a custom Menu button with that technique to link to the unfiltered list by setting the filter value to `{}`.
 
-**Tip**: You have to pass *all* the query string parameters - not just `filter`. That's a current limitation of react-admin.
-
 ### The `<Filter>` Button/Form Combo
 
 ![List Filters](./img/list_filter.gif)

diff --git a/examples/demo/src/categories/LinkToRelatedProducts.tsx b/examples/demo/src/categories/LinkToRelatedProducts.tsx
@@ -28,10 +28,6 @@ const LinkToRelatedProducts: FC<FieldProps<Category>> = ({ record }) => {
             to={{
                 pathname: '/products',
                 search: stringify({
-                    page: 1,
-                    perPage: 20,
-                    sort: 'reference',
-                    order: 'ASC',
                     filter: JSON.stringify({ category_id: record.id }),
                 }),
             }}

diff --git a/examples/demo/src/segments/LinkToRelatedCustomers.tsx b/examples/demo/src/segments/LinkToRelatedCustomers.tsx
@@ -27,8 +27,6 @@ const LinkToRelatedCustomers: FC<{ segment: string }> = ({ segment }) => {
             to={{
                 pathname: '/customers',
                 search: stringify({
-                    page: 1,
-                    perPage: 25,
                     filter: JSON.stringify({ groups: segment }),
                 }),
             }}