From 1c92edce6805cedaf7d4a79e48442e14fa9700de Mon Sep 17 00:00:00 2001 From: arndom Date: Sun, 6 Oct 2024 21:59:15 +0100 Subject: [PATCH 1/9] fix(core): update `useTable` hook - reset filters and sorters used in tables on URL query clear --- packages/core/src/hooks/useTable/index.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 7398aabc13a6..1a522ae72317 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -439,6 +439,28 @@ export function useTable< return `${pathname ?? ""}?${stringifyParams ?? ""}`; }; + useEffect(() => { + if (!parsedParams?.params?.filters && !parsedParams?.params?.sorters) { + const resetFilters = setInitialFilters( + preferredPermanentFilters, + defaultFilter ?? [], + ); + const resetSorters = setInitialSorters( + preferredPermanentSorters, + defaultSorter ?? [], + ); + + setFilters(resetFilters); + setSorters(resetSorters); + } + }, [ + parsedParams, + preferredPermanentFilters, + defaultFilter, + preferredPermanentSorters, + defaultSorter, + ]); + useEffect(() => { if (search === "") { setCurrent(defaultCurrent); From 402aaed9b4b9bf82a3bcd5ef17dbe6930ba69fec Mon Sep 17 00:00:00 2001 From: arndom Date: Sun, 6 Oct 2024 22:13:06 +0100 Subject: [PATCH 2/9] chore(core): add changeset --- .changeset/spicy-flowers-allow.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/spicy-flowers-allow.md diff --git a/.changeset/spicy-flowers-allow.md b/.changeset/spicy-flowers-allow.md new file mode 100644 index 000000000000..d7f0a1b1a8ff --- /dev/null +++ b/.changeset/spicy-flowers-allow.md @@ -0,0 +1,7 @@ +--- +"@refinedev/core": major +--- + +Update `useTable` hook to handle case where a user navigates to current page by clicking side-nav link intending to reset the filters and sorters. + +[Resolves #6300](https://github.com/refinedev/refine/issues/6300) From d72941ee81711160834050024705156fb4873e27 Mon Sep 17 00:00:00 2001 From: Nabil Alamin Date: Mon, 7 Oct 2024 17:49:00 +0100 Subject: [PATCH 3/9] Update .changeset/spicy-flowers-allow.md Co-authored-by: Batuhan Wilhelm --- .changeset/spicy-flowers-allow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/spicy-flowers-allow.md b/.changeset/spicy-flowers-allow.md index d7f0a1b1a8ff..a280a1ca8142 100644 --- a/.changeset/spicy-flowers-allow.md +++ b/.changeset/spicy-flowers-allow.md @@ -1,5 +1,5 @@ --- -"@refinedev/core": major +"@refinedev/core": patch --- Update `useTable` hook to handle case where a user navigates to current page by clicking side-nav link intending to reset the filters and sorters. From 2810644cacfee7b5e376131236220cc1680b3622 Mon Sep 17 00:00:00 2001 From: arndom Date: Sun, 24 Nov 2024 09:57:41 +0100 Subject: [PATCH 4/9] fix: use watched URL filters to update table filters --- packages/core/src/definitions/table/index.ts | 36 ++++++++++++++++++++ packages/core/src/hooks/useTable/index.ts | 36 ++++++++++++-------- 2 files changed, 57 insertions(+), 15 deletions(-) diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts index 1fd8eba3267a..f59c99ef0ba7 100644 --- a/packages/core/src/definitions/table/index.ts +++ b/packages/core/src/definitions/table/index.ts @@ -186,3 +186,39 @@ export const getDefaultFilter = ( return undefined; }; + +export const mergeFilters = ( + currentUrlFilters: CrudFilter[], + currentFilters: CrudFilter[], +): CrudFilter[] => { + const mergedFilters = currentFilters.map((tableFilter) => { + const matchingURLFilter = currentUrlFilters.find( + (urlFilter) => + "field" in tableFilter && + "field" in urlFilter && + tableFilter.field === urlFilter.field && + tableFilter.operator === urlFilter.operator, + ); + + // override current filter wih url filter + if (matchingURLFilter) { + return { ...tableFilter, ...matchingURLFilter }; + } + + return tableFilter; + }); + + // add any other URL filters not in the current filters + const additionalURLFilters = currentUrlFilters.filter( + (urlFilter) => + !currentFilters.some( + (tableFilter) => + "field" in tableFilter && + "field" in urlFilter && + tableFilter.field === urlFilter.field && + tableFilter.operator === urlFilter.operator, + ), + ); + + return [...mergedFilters, ...additionalURLFilters]; +}; diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 189ab4a8b21a..0cfeefd24568 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -11,6 +11,7 @@ import warnOnce from "warn-once"; import { pickNotDeprecated } from "@definitions/helpers"; import { + mergeFilters, parseTableParams, setInitialFilters, setInitialSorters, @@ -439,27 +440,32 @@ export function useTable< return `${pathname ?? ""}?${stringifyParams ?? ""}`; }; + // watch URL filters to update internal filters useEffect(() => { - if (!parsedParams?.params?.filters && !parsedParams?.params?.sorters) { - const resetFilters = setInitialFilters( + if (syncWithLocation) { + const currentFilters = filters; + const currentUrlFilters = parsedParams?.params?.filters; + const initialFilters = setInitialFilters( preferredPermanentFilters, defaultFilter ?? [], ); - const resetSorters = setInitialSorters( - preferredPermanentSorters, - defaultSorter ?? [], - ); - setFilters(resetFilters); - setSorters(resetSorters); + let newFilters: CrudFilter[] = []; + const urlsAreEqual = isEqual(currentUrlFilters, currentFilters); + + if (!urlsAreEqual) { + // fallback to initial filters + if (!currentUrlFilters || currentUrlFilters.length === 0) { + newFilters = initialFilters; + } else { + // since they aren't equal, merge the two + newFilters = mergeFilters(currentUrlFilters, currentFilters); + } + + setFilters(newFilters); + } } - }, [ - parsedParams, - preferredPermanentFilters, - defaultFilter, - preferredPermanentSorters, - defaultSorter, - ]); + }, [parsedParams, filters, preferredPermanentFilters]); useEffect(() => { if (search === "") { From 8dc12dd70b329a777b19ef80f5da0b0dec3b92f1 Mon Sep 17 00:00:00 2001 From: arndom Date: Sun, 1 Dec 2024 17:52:23 +0100 Subject: [PATCH 5/9] fix(core): use watched URL sorters to update table sorters --- packages/core/src/definitions/table/index.ts | 16 ++++++++ packages/core/src/hooks/useTable/index.ts | 39 +++++++++++++++++--- 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts index f59c99ef0ba7..2f51c0f95127 100644 --- a/packages/core/src/definitions/table/index.ts +++ b/packages/core/src/definitions/table/index.ts @@ -222,3 +222,19 @@ export const mergeFilters = ( return [...mergedFilters, ...additionalURLFilters]; }; + +export const mergeSorters = ( + currentUrlSorters: CrudSort[], + currentSorters: CrudSort[], +): CrudSort[] => { + const merged: CrudSort[] = [...currentUrlSorters]; + + for (const sorter of currentSorters) { + const exists = merged.some((s) => compareSorters(s, sorter)); + if (!exists) { + merged.push(sorter); + } + } + + return merged; +}; diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 0cfeefd24568..66849b77fe16 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -12,6 +12,7 @@ import warnOnce from "warn-once"; import { pickNotDeprecated } from "@definitions/helpers"; import { mergeFilters, + mergeSorters, parseTableParams, setInitialFilters, setInitialSorters, @@ -440,7 +441,7 @@ export function useTable< return `${pathname ?? ""}?${stringifyParams ?? ""}`; }; - // watch URL filters to update internal filters + // watch URL filters, sorters to update internal filters, sorters useEffect(() => { if (syncWithLocation) { const currentFilters = filters; @@ -450,11 +451,21 @@ export function useTable< defaultFilter ?? [], ); + const currentSorters = sorters; + const currentUrlSorters = parsedParams.params?.sorters; + const initialSorters = setInitialSorters( + preferredPermanentSorters, + defaultSorter ?? [], + ); + let newFilters: CrudFilter[] = []; - const urlsAreEqual = isEqual(currentUrlFilters, currentFilters); + let newSorters: CrudSort[] = []; + + const filtersAreEqual = isEqual(currentUrlFilters, currentFilters); + const sortersAreEqual = isEqual(currentUrlSorters, currentSorters); - if (!urlsAreEqual) { - // fallback to initial filters + if (!filtersAreEqual) { + // fallback to initial if (!currentUrlFilters || currentUrlFilters.length === 0) { newFilters = initialFilters; } else { @@ -464,8 +475,26 @@ export function useTable< setFilters(newFilters); } + + if (!sortersAreEqual) { + // fallback to initial + if (!currentUrlSorters || currentUrlSorters.length === 0) { + newSorters = initialSorters; + } else { + // since they aren't equal, merge the two + newSorters = mergeSorters(currentUrlSorters, currentSorters); + } + + setSorters(newSorters); + } } - }, [parsedParams, filters, preferredPermanentFilters]); + }, [ + parsedParams, + filters, + preferredPermanentFilters, + sorters, + preferredPermanentSorters, + ]); useEffect(() => { if (search === "") { From 089edd27401e479013c0121aeadba86ff2516daf Mon Sep 17 00:00:00 2001 From: arndom Date: Sun, 8 Dec 2024 13:17:30 +0100 Subject: [PATCH 6/9] fix(core): add custom isEqual for `CrudFilters[]` - prevent watched url filters from being early triggered by change to url by internal filter --- packages/core/src/definitions/table/index.ts | 58 ++++++++ packages/core/src/hooks/useTable/index.ts | 138 +++++++++++-------- 2 files changed, 140 insertions(+), 56 deletions(-) diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts index 2f51c0f95127..d9ce921f03d5 100644 --- a/packages/core/src/definitions/table/index.ts +++ b/packages/core/src/definitions/table/index.ts @@ -238,3 +238,61 @@ export const mergeSorters = ( return merged; }; + +export const isEqualFilters = ( + filter1: CrudFilter[] | undefined, + filter2: CrudFilter[] | undefined, +): boolean => { + if (!filter1 || !filter2) return false; + if (filter1.length !== filter2.length) return false; + + const isEqual = filter1.every((f1) => { + // same fields/keys and operators + const isEqualParamsF2 = filter2.find((f2) => compareFilters(f1, f2)); + + if (!isEqualParamsF2) return false; + + const filter1Value = f1.value; + const filter2Value = isEqualParamsF2.value; + + // if they both have values, compare + if (filter1Value && filter2Value) { + if (Array.isArray(filter1Value) && Array.isArray(filter2Value)) { + if (filter1Value.length === 0 && filter2Value.length === 0) { + return true; + } + + // if array of primitives, compare + if ( + filter1Value.every((v) => typeof v !== "object") && + filter2Value.every((v) => typeof v !== "object") + ) { + return ( + filter1Value.length === filter2Value.length && + filter1Value.every((v) => filter2Value.includes(v)) + ); + } + + // recursion because of type def. ConditionalFilter["value"] + return isEqualFilters(filter1Value, filter2Value); + } + + // compare primitives (string, number, ...null?) + // because of type def. LogicalFilter["value"] + return filter1Value === filter2Value; + } + + // if either is undefined, it means it was initialized, + // so logically equal. + if ( + (filter1Value && filter2Value === undefined) || + (filter1Value === undefined && filter2Value) + ) { + return true; + } + + return filter1Value === filter2Value; + }); + + return isEqual; +}; diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 66849b77fe16..9d2eec4bf676 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect, useCallback, useRef } from "react"; import type { QueryObserverResult, @@ -11,6 +11,7 @@ import warnOnce from "warn-once"; import { pickNotDeprecated } from "@definitions/helpers"; import { + isEqualFilters, mergeFilters, mergeSorters, parseTableParams, @@ -387,6 +388,9 @@ export function useTable< const [current, setCurrent] = useState(defaultCurrent); const [pageSize, setPageSize] = useState(defaultPageSize); + const [urlUpdated, setUrlUpdated] = useState(false); + const lastSyncedUrlFilters = useRef(); + const getCurrentQueryParams = (): object => { if (routerType === "new") { // We get QueryString parameters that are uncontrolled by refine. @@ -441,61 +445,6 @@ export function useTable< return `${pathname ?? ""}?${stringifyParams ?? ""}`; }; - // watch URL filters, sorters to update internal filters, sorters - useEffect(() => { - if (syncWithLocation) { - const currentFilters = filters; - const currentUrlFilters = parsedParams?.params?.filters; - const initialFilters = setInitialFilters( - preferredPermanentFilters, - defaultFilter ?? [], - ); - - const currentSorters = sorters; - const currentUrlSorters = parsedParams.params?.sorters; - const initialSorters = setInitialSorters( - preferredPermanentSorters, - defaultSorter ?? [], - ); - - let newFilters: CrudFilter[] = []; - let newSorters: CrudSort[] = []; - - const filtersAreEqual = isEqual(currentUrlFilters, currentFilters); - const sortersAreEqual = isEqual(currentUrlSorters, currentSorters); - - if (!filtersAreEqual) { - // fallback to initial - if (!currentUrlFilters || currentUrlFilters.length === 0) { - newFilters = initialFilters; - } else { - // since they aren't equal, merge the two - newFilters = mergeFilters(currentUrlFilters, currentFilters); - } - - setFilters(newFilters); - } - - if (!sortersAreEqual) { - // fallback to initial - if (!currentUrlSorters || currentUrlSorters.length === 0) { - newSorters = initialSorters; - } else { - // since they aren't equal, merge the two - newSorters = mergeSorters(currentUrlSorters, currentSorters); - } - - setSorters(newSorters); - } - } - }, [ - parsedParams, - filters, - preferredPermanentFilters, - sorters, - preferredPermanentSorters, - ]); - useEffect(() => { if (search === "") { setCurrent(defaultCurrent); @@ -553,9 +502,86 @@ export function useTable< shallow: true, }); } + + setUrlUpdated(true); } }, [syncWithLocation, current, pageSize, sorters, filters]); + // update lastSynched url filters + useEffect(() => { + if (urlUpdated) { + lastSyncedUrlFilters.current = differenceWith( + filters, + preferredPermanentFilters, + isEqual, + ); + + // reset + setUrlUpdated(false); + } + }, [urlUpdated, filters]); + + // watch URL filters, sorters to update internal filters, sorters + useEffect(() => { + if (syncWithLocation) { + const currentFilters = filters; + const currentUrlFilters = parsedParams?.params?.filters; + const initialFilters = setInitialFilters( + preferredPermanentFilters, + defaultFilter ?? [], + ); + + const filtersAreEqual = isEqualFilters(currentUrlFilters, currentFilters); + const isInternalSyncWithUrl = isEqualFilters( + currentFilters, + lastSyncedUrlFilters.current, + ); + let newFilters: CrudFilter[] = []; + + // const currentSorters = sorters; + // const currentUrlSorters = parsedParams.params?.sorters; + // const initialSorters = setInitialSorters( + // preferredPermanentSorters, + // defaultSorter ?? [], + // ); + + // const sortersAreEqual = isEqual(currentUrlSorters, currentSorters); + // let newSorters: CrudSort[] = []; + + // wait for internal state to update url state + if (!isInternalSyncWithUrl) return; + + if (!filtersAreEqual) { + // fallback to initial + if (!currentUrlFilters || currentUrlFilters.length === 0) { + newFilters = initialFilters; + } else { + // since they aren't equal, merge the two + newFilters = mergeFilters(currentUrlFilters, currentFilters); + } + + setFilters(newFilters); + } + + // if (!sortersAreEqual) { + // // fallback to initial + // if (!currentUrlSorters || currentUrlSorters.length === 0) { + // newSorters = initialSorters; + // } else { + // // since they aren't equal, merge the two + // newSorters = mergeSorters(currentUrlSorters, currentSorters); + // } + + // setSorters(newSorters); + // } + } + }, [ + parsedParams, + filters, + lastSyncedUrlFilters.current, + // sorters, + ]); + const queryResult = useList({ resource: identifier, hasPagination, From fee5f19136e8db2177d2310d5d018c16c4878c7a Mon Sep 17 00:00:00 2001 From: arndom Date: Sat, 14 Dec 2024 15:10:16 +0100 Subject: [PATCH 7/9] fix(core): prevent watched url sorters early trigger --- packages/core/src/hooks/useTable/index.ts | 81 +++++++++++++---------- 1 file changed, 45 insertions(+), 36 deletions(-) diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 9d2eec4bf676..a3e1da02a9c0 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -200,6 +200,11 @@ type SyncWithLocationParams = { filters: CrudFilter[]; }; +type LastUrlSyncParams = { + sorters: CrudSort[]; + filters: CrudFilter[]; +}; + export type useTableReturnType< TData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, @@ -389,7 +394,7 @@ export function useTable< const [pageSize, setPageSize] = useState(defaultPageSize); const [urlUpdated, setUrlUpdated] = useState(false); - const lastSyncedUrlFilters = useRef(); + const lastSyncedUrlParams = useRef(); const getCurrentQueryParams = (): object => { if (routerType === "new") { @@ -510,11 +515,10 @@ export function useTable< // update lastSynched url filters useEffect(() => { if (urlUpdated) { - lastSyncedUrlFilters.current = differenceWith( - filters, - preferredPermanentFilters, - isEqual, - ); + lastSyncedUrlParams.current = { + filters: differenceWith(filters, preferredPermanentFilters, isEqual), + sorters: differenceWith(sorters, preferredPermanentSorters, isEqual), + }; // reset setUrlUpdated(false); @@ -532,26 +536,36 @@ export function useTable< ); const filtersAreEqual = isEqualFilters(currentUrlFilters, currentFilters); - const isInternalSyncWithUrl = isEqualFilters( + const isInternalSyncWithUrlFilters = isEqualFilters( currentFilters, - lastSyncedUrlFilters.current, + lastSyncedUrlParams.current?.filters, ); let newFilters: CrudFilter[] = []; - // const currentSorters = sorters; - // const currentUrlSorters = parsedParams.params?.sorters; - // const initialSorters = setInitialSorters( - // preferredPermanentSorters, - // defaultSorter ?? [], - // ); + const currentSorters = sorters; + const currentUrlSorters = parsedParams.params?.sorters; + const initialSorters = setInitialSorters( + preferredPermanentSorters, + defaultSorter ?? [], + ); + + const sortersAreEqual = (() => { + if (currentUrlSorters === undefined && currentSorters.length === 0) + return true; + return isEqual(currentUrlSorters, currentSorters); + })(); - // const sortersAreEqual = isEqual(currentUrlSorters, currentSorters); - // let newSorters: CrudSort[] = []; + const isInternalSyncWithUrlSorters = isEqual( + currentSorters, + lastSyncedUrlParams.current?.sorters, + ); + let newSorters: CrudSort[] = []; - // wait for internal state to update url state - if (!isInternalSyncWithUrl) return; + // if last changes to internal state in sync update url state + // if url state changed but did not affect internal state + // for both filters & sorters - if (!filtersAreEqual) { + if (isInternalSyncWithUrlFilters && !filtersAreEqual) { // fallback to initial if (!currentUrlFilters || currentUrlFilters.length === 0) { newFilters = initialFilters; @@ -563,24 +577,19 @@ export function useTable< setFilters(newFilters); } - // if (!sortersAreEqual) { - // // fallback to initial - // if (!currentUrlSorters || currentUrlSorters.length === 0) { - // newSorters = initialSorters; - // } else { - // // since they aren't equal, merge the two - // newSorters = mergeSorters(currentUrlSorters, currentSorters); - // } - - // setSorters(newSorters); - // } + if (isInternalSyncWithUrlSorters && !sortersAreEqual) { + // fallback to initial + if (!currentUrlSorters || currentUrlSorters.length === 0) { + newSorters = initialSorters; + } else { + // since they aren't equal, merge the two + newSorters = mergeSorters(currentUrlSorters, currentSorters); + } + + setSorters(newSorters); + } } - }, [ - parsedParams, - filters, - lastSyncedUrlFilters.current, - // sorters, - ]); + }, [parsedParams, filters, lastSyncedUrlParams.current, sorters]); const queryResult = useList({ resource: identifier, From 0c62c1a7320240ad67fdf32d1fd89d32cf7baf88 Mon Sep 17 00:00:00 2001 From: arndom Date: Fri, 3 Jan 2025 12:06:14 +0100 Subject: [PATCH 8/9] chore(core): comment out watcher useEffect --- packages/core/src/definitions/table/index.ts | 20 ++- packages/core/src/hooks/useTable/index.ts | 121 +++++++++---------- 2 files changed, 73 insertions(+), 68 deletions(-) diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts index d9ce921f03d5..c7044dd7e1ae 100644 --- a/packages/core/src/definitions/table/index.ts +++ b/packages/core/src/definitions/table/index.ts @@ -283,11 +283,21 @@ export const isEqualFilters = ( } // if either is undefined, it means it was initialized, - // so logically equal. - if ( - (filter1Value && filter2Value === undefined) || - (filter1Value === undefined && filter2Value) - ) { + // so logically equal + const isEmptyValue = (value: any) => { + if (value === "") { + return true; + } + if (Array.isArray(value) && value.length === 0) { + return true; + } + if (value === undefined) { + return true; + } + return false; + }; + + if (isEmptyValue(filter1Value) && isEmptyValue(filter2Value)) { return true; } diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index a3e1da02a9c0..256741872a9c 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -512,7 +512,7 @@ export function useTable< } }, [syncWithLocation, current, pageSize, sorters, filters]); - // update lastSynched url filters + // update lastSynched url params useEffect(() => { if (urlUpdated) { lastSyncedUrlParams.current = { @@ -523,73 +523,68 @@ export function useTable< // reset setUrlUpdated(false); } - }, [urlUpdated, filters]); + }, [urlUpdated, filters, sorters]); // watch URL filters, sorters to update internal filters, sorters useEffect(() => { if (syncWithLocation) { - const currentFilters = filters; - const currentUrlFilters = parsedParams?.params?.filters; - const initialFilters = setInitialFilters( - preferredPermanentFilters, - defaultFilter ?? [], - ); - - const filtersAreEqual = isEqualFilters(currentUrlFilters, currentFilters); - const isInternalSyncWithUrlFilters = isEqualFilters( - currentFilters, - lastSyncedUrlParams.current?.filters, - ); - let newFilters: CrudFilter[] = []; - - const currentSorters = sorters; - const currentUrlSorters = parsedParams.params?.sorters; - const initialSorters = setInitialSorters( - preferredPermanentSorters, - defaultSorter ?? [], - ); - - const sortersAreEqual = (() => { - if (currentUrlSorters === undefined && currentSorters.length === 0) - return true; - return isEqual(currentUrlSorters, currentSorters); - })(); - - const isInternalSyncWithUrlSorters = isEqual( - currentSorters, - lastSyncedUrlParams.current?.sorters, - ); - let newSorters: CrudSort[] = []; - - // if last changes to internal state in sync update url state - // if url state changed but did not affect internal state - // for both filters & sorters - - if (isInternalSyncWithUrlFilters && !filtersAreEqual) { - // fallback to initial - if (!currentUrlFilters || currentUrlFilters.length === 0) { - newFilters = initialFilters; - } else { - // since they aren't equal, merge the two - newFilters = mergeFilters(currentUrlFilters, currentFilters); - } - - setFilters(newFilters); - } - - if (isInternalSyncWithUrlSorters && !sortersAreEqual) { - // fallback to initial - if (!currentUrlSorters || currentUrlSorters.length === 0) { - newSorters = initialSorters; - } else { - // since they aren't equal, merge the two - newSorters = mergeSorters(currentUrlSorters, currentSorters); - } - - setSorters(newSorters); - } + // const currentFilters = filters; + // const currentUrlFilters = parsedParams?.params?.filters; + // const initialFilters = setInitialFilters( + // preferredPermanentFilters, + // defaultFilter ?? [], + // ); + // const filtersAreEqual = isEqualFilters(currentUrlFilters, currentFilters); + // const isInternalSyncWithUrlFilters = isEqualFilters( + // currentFilters, + // lastSyncedUrlParams.current?.filters, + // ); + // let newFilters: CrudFilter[] = []; + // const currentSorters = sorters; + // const currentUrlSorters = parsedParams.params?.sorters; + // const initialSorters = setInitialSorters( + // preferredPermanentSorters, + // defaultSorter ?? [], + // ); + // const sortersAreEqual = (() => { + // if (currentUrlSorters === undefined && currentSorters.length === 0) + // return true; + // return isEqual(currentUrlSorters, currentSorters); + // })(); + // const isInternalSyncWithUrlSorters = isEqual( + // currentSorters, + // lastSyncedUrlParams.current?.sorters, + // ); + // let newSorters: CrudSort[] = []; + // // if last changes to internal state in sync update url state + // // if url state changed but did not affect internal state + // // for both filters & sorters + // if (isInternalSyncWithUrlFilters && !filtersAreEqual) { + // // fallback to initial + // if (!currentUrlFilters || currentUrlFilters.length === 0) { + // newFilters = initialFilters; + // } else { + // // since they aren't equal, merge the two + // newFilters = mergeFilters(currentUrlFilters, currentFilters); + // } + // setFilters(newFilters); + // } + // if (isInternalSyncWithUrlSorters && !sortersAreEqual) { + // // fallback to initial + // if (!currentUrlSorters || currentUrlSorters.length === 0) { + // newSorters = initialSorters; + // } else { + // // since they aren't equal, merge the two + // newSorters = mergeSorters(currentUrlSorters, currentSorters); + // } + // setSorters(newSorters); + // } } - }, [parsedParams, filters, lastSyncedUrlParams.current, sorters]); + }, [ + parsedParams.params?.filters, + filters, + lastSyncedUrlParams.current?.filters, + ]); const queryResult = useList({ resource: identifier, From 5462d8542b8d9e7a12ce4c7fdf1e024e90d52899 Mon Sep 17 00:00:00 2001 From: arndom Date: Tue, 14 Jan 2025 08:06:20 +0100 Subject: [PATCH 9/9] chore(core): update comment explanation --- packages/core/src/hooks/useTable/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts index 256741872a9c..314742d535f1 100644 --- a/packages/core/src/hooks/useTable/index.ts +++ b/packages/core/src/hooks/useTable/index.ts @@ -556,9 +556,9 @@ export function useTable< // lastSyncedUrlParams.current?.sorters, // ); // let newSorters: CrudSort[] = []; - // // if last changes to internal state in sync update url state - // // if url state changed but did not affect internal state - // // for both filters & sorters + // // if last changes were in sync; i.e: current internal state === last url state + // // && + // // current url state changed but did not affect current internal state // if (isInternalSyncWithUrlFilters && !filtersAreEqual) { // // fallback to initial // if (!currentUrlFilters || currentUrlFilters.length === 0) {