From 0364ed5bdb5f894f3de21d69c2d6b004d854cf04 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Thu, 23 Jun 2022 12:15:06 +0200 Subject: [PATCH 1/2] Fix useListParams might navigate to an old pathname --- .../src/controller/list/useListParams.ts | 127 ++++++++++-------- 1 file changed, 69 insertions(+), 58 deletions(-) diff --git a/packages/ra-core/src/controller/list/useListParams.ts b/packages/ra-core/src/controller/list/useListParams.ts index ce9d0a16776..84488f35219 100644 --- a/packages/ra-core/src/controller/list/useListParams.ts +++ b/packages/ra-core/src/controller/list/useListParams.ts @@ -128,45 +128,50 @@ export const useListParams = ({ } }, [location.search]); // eslint-disable-line - const changeParams = useCallback(action => { - // do not change params if the component is already unmounted - // this is necessary because changeParams can be debounced, and therefore - // executed after the component is unmounted - if (!isMounted.current) return; - - if (!tempParams.current) { - // no other changeParams action dispatched this tick - tempParams.current = queryReducer(query, action); - // schedule side effects for next tick - setTimeout(() => { - if (disableSyncWithLocation) { - setLocalParams(tempParams.current); - } else { - // the useEffect above will apply the changes to the params in the store - navigate( - { - search: `?${stringify({ - ...tempParams.current, - filter: JSON.stringify( - tempParams.current.filter - ), - displayedFilters: JSON.stringify( - tempParams.current.displayedFilters - ), - })}`, - }, - { - state: { _scrollToTop: action.type === SET_PAGE }, - } - ); - } - tempParams.current = undefined; - }, 0); - } else { - // side effects already scheduled, just change the params - tempParams.current = queryReducer(tempParams.current, action); - } - }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps + const changeParams = useCallback( + action => { + // do not change params if the component is already unmounted + // this is necessary because changeParams can be debounced, and therefore + // executed after the component is unmounted + if (!isMounted.current) return; + + if (!tempParams.current) { + // no other changeParams action dispatched this tick + tempParams.current = queryReducer(query, action); + // schedule side effects for next tick + setTimeout(() => { + if (disableSyncWithLocation) { + setLocalParams(tempParams.current); + } else { + // the useEffect above will apply the changes to the params in the store + navigate( + { + search: `?${stringify({ + ...tempParams.current, + filter: JSON.stringify( + tempParams.current.filter + ), + displayedFilters: JSON.stringify( + tempParams.current.displayedFilters + ), + })}`, + }, + { + state: { + _scrollToTop: action.type === SET_PAGE, + }, + } + ); + } + tempParams.current = undefined; + }, 0); + } else { + // side effects already scheduled, just change the params + tempParams.current = queryReducer(tempParams.current, action); + } + }, + [...requestSignature, navigate] // eslint-disable-line react-hooks/exhaustive-deps + ); const setSort = useCallback( (sort: SortPayload) => @@ -174,18 +179,18 @@ export const useListParams = ({ type: SET_SORT, payload: sort, }), - requestSignature // eslint-disable-line react-hooks/exhaustive-deps + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps ); const setPage = useCallback( (newPage: number) => changeParams({ type: SET_PAGE, payload: newPage }), - requestSignature // eslint-disable-line react-hooks/exhaustive-deps + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps ); const setPerPage = useCallback( (newPerPage: number) => changeParams({ type: SET_PER_PAGE, payload: newPerPage }), - requestSignature // eslint-disable-line react-hooks/exhaustive-deps + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps ); const filterValues = query.filter || emptyObject; @@ -212,25 +217,31 @@ export const useListParams = ({ displayedFilters, }, }), - requestSignature // eslint-disable-line react-hooks/exhaustive-deps + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps ); - const hideFilter = useCallback((filterName: string) => { - changeParams({ - type: HIDE_FILTER, - payload: filterName, - }); - }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps + const hideFilter = useCallback( + (filterName: string) => { + changeParams({ + type: HIDE_FILTER, + payload: filterName, + }); + }, + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + ); - const showFilter = useCallback((filterName: string, defaultValue: any) => { - changeParams({ - type: SHOW_FILTER, - payload: { - filterName, - defaultValue, - }, - }); - }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps + const showFilter = useCallback( + (filterName: string, defaultValue: any) => { + changeParams({ + type: SHOW_FILTER, + payload: { + filterName, + defaultValue, + }, + }); + }, + [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + ); return [ { From d35905d201775e0720747b84e75806a9cd68083b Mon Sep 17 00:00:00 2001 From: djhi <1122076+djhi@users.noreply.github.com> Date: Thu, 23 Jun 2022 18:41:31 +0200 Subject: [PATCH 2/2] Fix callbacks dependencies --- .../ra-core/src/controller/list/useListParams.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ra-core/src/controller/list/useListParams.ts b/packages/ra-core/src/controller/list/useListParams.ts index 84488f35219..78af6a47c57 100644 --- a/packages/ra-core/src/controller/list/useListParams.ts +++ b/packages/ra-core/src/controller/list/useListParams.ts @@ -179,18 +179,18 @@ export const useListParams = ({ type: SET_SORT, payload: sort, }), - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] ); const setPage = useCallback( (newPage: number) => changeParams({ type: SET_PAGE, payload: newPage }), - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] ); const setPerPage = useCallback( (newPerPage: number) => changeParams({ type: SET_PER_PAGE, payload: newPerPage }), - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] ); const filterValues = query.filter || emptyObject; @@ -217,7 +217,7 @@ export const useListParams = ({ displayedFilters, }, }), - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] // eslint-disable-line react-hooks/exhaustive-deps ); const hideFilter = useCallback( @@ -227,7 +227,7 @@ export const useListParams = ({ payload: filterName, }); }, - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] ); const showFilter = useCallback( @@ -240,7 +240,7 @@ export const useListParams = ({ }, }); }, - [...requestSignature, changeParams] // eslint-disable-line react-hooks/exhaustive-deps + [changeParams] ); return [