fix: filtering error on first render for create display

greenbone · Nov 8, 2024 · 304fa57 · 304fa57
1 parent 4058a79
commit 304fa57
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git 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
@@ -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) ||