Improve lists URL management

Author: djhi

packages/ra-core/src/controller/list/useListParams.spec.tsx

@@ -9,6 +9,7 @@ import { useStore } from '../../store/useStore';
 import { useListParams, getQuery, getNumberOrDefault } from './useListParams';
 import { SORT_DESC, SORT_ASC } from './queryReducer';
 import { TestMemoryRouter } from '../../routing';
+import { memoryStore } from '../../store';
 
 describe('useListParams', () => {
     describe('getQuery', () => {
@@ -495,6 +496,71 @@ describe('useListParams', () => {
             });
         });
 
+        it('should synchronize location with store when sync is enabled', async () => {
+            let location;
+            let storeValue;
+            const StoreReader = () => {
+                const [value] = useStore('posts.listParams');
+                React.useEffect(() => {
+                    storeValue = value;
+                }, [value]);
+                return null;
+            };
+            render(
+                <TestMemoryRouter
+                    locationCallback={l => {
+                        location = l;
+                    }}
+                >
+                    <CoreAdminContext
+                        dataProvider={testDataProvider()}
+                        store={memoryStore({
+                            'posts.listParams': {
+                                sort: 'id',
+                                order: 'ASC',
+                                page: 10,
+                                perPage: 10,
+                                filter: {},
+                            },
+                        })}
+                    >
+                        <Component />
+                        <StoreReader />
+                    </CoreAdminContext>
+                </TestMemoryRouter>
+            );
+
+            await waitFor(() => {
+                expect(storeValue).toEqual({
+                    sort: 'id',
+                    order: 'ASC',
+                    page: 10,
+                    perPage: 10,
+                    filter: {},
+                });
+            });
+
+            await waitFor(() => {
+                expect(location).toEqual(
+                    expect.objectContaining({
+                        hash: '',
+                        key: expect.any(String),
+                        state: null,
+                        pathname: '/',
+                        search:
+                            '?' +
+                            stringify({
+                                filter: JSON.stringify({}),
+                                sort: 'id',
+                                order: 'ASC',
+                                page: 10,
+                                perPage: 10,
+                            }),
+                    })
+                );
+            });
+        });
+
         it('should not synchronize parameters with location and store when sync is not enabled', async () => {
             let location;
             let storeValue;
@@ -540,6 +606,63 @@ describe('useListParams', () => {
             expect(storeValue).toBeUndefined();
         });
 
+        it('should not synchronize location with store when sync is not enabled', async () => {
+            let location;
+            let storeValue;
+            const StoreReader = () => {
+                const [value] = useStore('posts.listParams');
+                React.useEffect(() => {
+                    storeValue = value;
+                }, [value]);
+                return null;
+            };
+            render(
+                <TestMemoryRouter
+                    locationCallback={l => {
+                        location = l;
+                    }}
+                >
+                    <CoreAdminContext
+                        dataProvider={testDataProvider()}
+                        store={memoryStore({
+                            'posts.listParams': {
+                                sort: 'id',
+                                order: 'ASC',
+                                page: 10,
+                                perPage: 10,
+                                filter: {},
+                            },
+                        })}
+                    >
+                        <Component disableSyncWithLocation />
+                        <StoreReader />
+                    </CoreAdminContext>
+                </TestMemoryRouter>
+            );
+
+            await waitFor(() => {
+                expect(storeValue).toEqual({
+                    sort: 'id',
+                    order: 'ASC',
+                    page: 10,
+                    perPage: 10,
+                    filter: {},
+                });
+            });
+
+            await waitFor(() => {
+                expect(location).toEqual(
+                    expect.objectContaining({
+                        hash: '',
+                        key: expect.any(String),
+                        state: null,
+                        pathname: '/',
+                        search: '',
+                    })
+                );
+            });
+        });
+
         it('should synchronize parameters with store when sync is not enabled and storeKey is passed', async () => {
             let storeValue;
             const Component = ({

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

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { parse, stringify } from 'query-string';
 import lodashDebounce from 'lodash/debounce.js';
+import isEqual from 'lodash/isEqual.js';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 import { useStore } from '../../store';
@@ -133,6 +134,25 @@ export const useListParams = ({
         }
     }, [location.search]); // eslint-disable-line
 
+    // if the location includes params (for example from a link like
+    // the categories products on the demo), we need to persist them in the
+    // store as well so that we don't lose them after a redirection back
+    // to the list
+    useEffect(() => {
+        if (disableSyncWithLocation) {
+            return;
+        }
+        if (!isEqual(query, queryFromLocation)) {
+            navigate({
+                search: `?${stringify({
+                    ...query,
+                    filter: JSON.stringify(query.filter),
+                    displayedFilters: JSON.stringify(query.displayedFilters),
+                })}`,
+            });
+        }
+    }, [disableSyncWithLocation, query, location.search]); // eslint-disable-line
+
     const changeParams = useCallback(
         action => {
             // do not change params if the component is already unmounted