sk1982/actaeon
2
5
Fork 3
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

fix: filter sorter usecallback

Browse Source
This commit is contained in:
sk1982 2024-04-07 22:12:52 -04:00
parent 9418fd6140
commit c658d3496d
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/filter-sorter.tsx
View File

@ -165,14 +165,13 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
const searchRef = useRef<HTMLInputElement | null>(null); const searchRef = useRef<HTMLInputElement | null>(null);
const mounted = useIsMounted(); const mounted = useIsMounted();
const breakpoint = useBreakpoint(); const breakpoint = useBreakpoint();
const dataCallback = useCallback(typeof data === 'function' ? data : (() => { }), []);
const dataDep = typeof data === 'function' ? dataCallback : data;
const localStateKey = `filter-sort-${pathname}`; const localStateKey = `filter-sort-${pathname}`;
const dataRemote = !Array.isArray(data); const dataRemote = !Array.isArray(data);
const pageSizeNum = +[...pageSize][0]; const pageSizeNum = +[...pageSize][0];
const deps = dataRemote ? [data, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query] :
[data, filterers, filterState, ascending, searcher, sorters, sorter, mounted, query];
useEffect(() => { useEffect(() => {
history.replaceState({}, '', `?${getParamsFromState({ history.replaceState({}, '', `?${getParamsFromState({
@ -205,10 +204,10 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
history.pushState({}, '', paramUrlString); history.pushState({}, '', paramUrlString);
const sort = sorters.find(s => sorter.has(s.name))!; const sort = sorters.find(s => sorter.has(s.name))!;
if (Array.isArray(data)) { if (Array.isArray(dataDep)) {
const lower = query.toLowerCase(); const lower = query.toLowerCase();
const filteredSorted = data const filteredSorted = dataDep
.filter(d => filterers.every(f => f.filter?.(filterState[f.name], d)) && searcher?.(lower, d)!) .filter(d => filterers.every(f => f.filter?.(filterState[f.name], d)) && searcher?.(lower, d)!)
.sort(sorters.find(s => sorter.has(s.name))!.sort); .sort(sorters.find(s => sorter.has(s.name))!.sort);
if (ascending) if (ascending)
@ -226,7 +225,7 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
const nonce = Math.random(); const nonce = Math.random();
prevNonce.current = nonce; prevNonce.current = nonce;
setLoadingRemoteData(true); setLoadingRemoteData(true);
Promise.resolve(data({ ascending, filters: filterState, sort: sort.name, pageSize: pageSizeNum, search: query, currentPage: page })) Promise.resolve(dataDep({ ascending, filters: filterState, sort: sort.name, pageSize: pageSizeNum, search: query, currentPage: page })!)
.then(d => { .then(d => {
if (nonce === prevNonce.current) { if (nonce === prevNonce.current) {
setProcessedData(d.data); setProcessedData(d.data);
@ -234,12 +233,12 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
} }
}) })
.finally(() => setLoadingRemoteData(false)); .finally(() => setLoadingRemoteData(false));
}, [data, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query]), dataRemote ? 250 : 100, debounceOptions); }, [dataDep, filterers, pageSize, filterState, currentPage, ascending, searcher, sorters, sorter, mounted, query]), dataRemote ? 250 : 100, debounceOptions);
const onQuery = useDebounceCallback(useCallback(() => { const onQuery = useDebounceCallback(useCallback(() => {
onChange(); onChange();
onChange.flush(); onChange.flush();
}, deps), 500) }, [query]), 500)
useEffect(() => { useEffect(() => {
onChange(); onChange();
@ -251,7 +250,7 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
prevNonce.current = 1; prevNonce.current = 1;
onChange.cancel(); onChange.cancel();
} }
}, [data, filterers, filterState, currentPage, ascending, searcher, sorters, sorter, pageSize]); }, [dataDep, filterers, filterState, currentPage, ascending, searcher, sorters, sorter, pageSize]);
const initialQuery = useRef(true); const initialQuery = useRef(true);