diff --git a/src/web/hooks/__tests__/usePageFilter.jsx b/src/web/hooks/__tests__/usePageFilter.jsx index 3f817ec015..58c380d783 100644 --- a/src/web/hooks/__tests__/usePageFilter.jsx +++ b/src/web/hooks/__tests__/usePageFilter.jsx @@ -59,9 +59,11 @@ describe('usePageFilter tests', () => { }), ); - expect(result.current[0]).toEqual( - Filter.fromString('location=query rows=42'), - ); + const expectedFilter = Filter.fromString('location=query rows=42'); + + await waitFor(() => { + expect(result.current[0].toString()).toEqual(expectedFilter.toString()); + }); }); test('should prefer pageFilter over defaultSettingFilter', async () => { const pFilter = Filter.fromString('page=filter'); diff --git a/src/web/hooks/usePageFilter.js b/src/web/hooks/usePageFilter.js index f38fd2d689..c04f870c0c 100644 --- a/src/web/hooks/usePageFilter.js +++ b/src/web/hooks/usePageFilter.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import {useCallback, useEffect, useState} from 'react'; +import {useCallback, useEffect, useState, useRef} from 'react'; import {useSearchParams} from 'react-router-dom'; @@ -79,7 +79,9 @@ const usePageFilter = ( ); // use null as value for not set at all - let returnedFilter; + const returnedFilterRef = useRef(null); + + let returnedFilter = returnedFilterRef.current; // only use searchParams directly if locationQueryFilterString is undefined const locationQueryFilterString = initialLocationQueryFilterString || searchParams.get('filter'); @@ -90,6 +92,8 @@ const usePageFilter = ( : undefined, ); + const [initialFilterSet, setInitialFilterSet] = useState(false); + useEffect(() => { if ( !isDefined(defaultSettingFilter) && @@ -120,30 +124,43 @@ const usePageFilter = ( setLocationQueryFilter(undefined); }, []); // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { + if (!initialFilterSet && isDefined(rowsPerPage)) { + setInitialFilterSet(true); + if (!returnedFilterRef.current.has('rows')) { + returnedFilterRef.current = returnedFilterRef.current.set( + 'rows', + rowsPerPage, + ); + } + } + }, [initialFilterSet, rowsPerPage]); + if (hasValue(locationQueryFilter)) { - returnedFilter = locationQueryFilter; + if (!locationQueryFilter.has('rows') && isDefined(rowsPerPage)) { + locationQueryFilter.set('rows', rowsPerPage); + } + returnedFilterRef.current = locationQueryFilter; } else if (isDefined(pageFilter)) { - returnedFilter = pageFilter; + returnedFilterRef.current = pageFilter; } else if ( isDefined(defaultSettingFilter) && !isDefined(defaultSettingsFilterError) && defaultSettingFilter !== null ) { - returnedFilter = defaultSettingFilter; + returnedFilterRef.current = defaultSettingFilter; } else if (isDefined(fallbackFilter)) { - returnedFilter = fallbackFilter; + returnedFilterRef.current = fallbackFilter; } else { - returnedFilter = DEFAULT_FALLBACK_FILTER; + returnedFilterRef.current = DEFAULT_FALLBACK_FILTER; } + returnedFilter = returnedFilterRef.current; + if (!isDefined(rowsPerPage) && isDefined(rowsPerPageError)) { rowsPerPage = DEFAULT_ROWS_PER_PAGE; } - if (!returnedFilter.has('rows') && isDefined(rowsPerPage)) { - returnedFilter = returnedFilter.set('rows', rowsPerPage); - } - const finishedLoading = isDefined(returnedFilter) && (isDefined(defaultSettingFilter) ||