👌 - fix: pr fixes

backend/src/openarchiefbeheer/destruction/tests/e2e/issues/test_635_filters_reset.py

@@ -1,11 +1,8 @@
 # fmt: off
 from django.test import tag
-
-from openarchiefbeheer.destruction.constants import (
-    DestructionListItemAction,
-    InternalStatus,
-    ListStatus,
-)
+from openarchiefbeheer.destruction.constants import (DestructionListItemAction,
+                                                     InternalStatus,
+                                                     ListStatus)
 from openarchiefbeheer.utils.tests.e2e import browser_page
 from openarchiefbeheer.utils.tests.gherkin import GherkinLikeTestCase
 
@@ -27,7 +24,10 @@ async def test_scenario_reset_button_works(self):
             await self.when.user_logs_in(page, record_manager)
             await self.then.path_should_be(page, "/destruction-lists")
             await self.when.user_clicks_button(page, "Destruction list to reset filters for")
+            await self.then.url_should_contain_text(page, "destruction-lists/")
+            initial_url_with_page = page.url + "?page=1"
             await self.when.user_filters_zaken(page, "omschrijving", "some text")
             await self.then.url_should_contain_text(page, "omschrijving__icontains=")
             await self.when.user_clicks_button(page, "Filters wissen")
             await self.then.input_field_should_be_empty(page, "Omschrijving")
+            await self.then.url_should_be(page, initial_url_with_page)

frontend/src/hooks/useFields.ts

@@ -45,6 +45,7 @@ export function useFields<T extends Zaak = Zaak>(
   (
     filterData: Partial<TypedSerializedFormData<keyof T & string>>,
   ) => FilterTransformReturnType<T>,
+  () => void,
 ] {
   const [fieldSelectionState, setFieldSelectionState] =
     useState<FieldSelection>();
@@ -53,7 +54,7 @@ export function useFields<T extends Zaak = Zaak>(
       setFieldSelectionState(fieldSelection),
     );
   }, []);
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const selectielijstKlasseChoices = useSelectielijstKlasseChoices();
   const zaaktypeChoices = useZaaktypeChoices(
     destructionList,
@@ -96,7 +97,6 @@ export function useFields<T extends Zaak = Zaak>(
     {
       name: "startdatum",
       type: "daterange",
-      filterLookup: "startdatum__gte,startdatum__lte",
       filterValue:
         searchParams.get("startdatum__gte") &&
         searchParams.get("startdatum__lte")
@@ -109,7 +109,6 @@ export function useFields<T extends Zaak = Zaak>(
     {
       name: "einddatum",
       type: "daterange",
-      filterLookup: "startdatum__gte,startdatum__lte",
       filterValue:
         searchParams.get("einddatum__gte") && searchParams.get("einddatum__lte")
           ? `${searchParams.get("einddatum__gte")}/${searchParams.get("einddatum__lte")}`
@@ -216,10 +215,31 @@ export function useFields<T extends Zaak = Zaak>(
         typeof isActiveFromStorage === "undefined"
           ? field.active !== false
           : isActiveFromStorage;
-      return { ...field, active: isActive } as TypedField;
+      return { ...field, active: isActive };
     });
   }, [fields, fieldSelectionState]);
 
+  const resetFilters = () => {
+    const extraFilterLookupValues: string[] = [
+      "startdatum__gte",
+      "startdatum__lte",
+      "einddatum__gte",
+      "einddatum__lte",
+      "archiefactiedatum__gte",
+      "archiefactiedatum__lte",
+    ];
+    const filterLookupValues = fields
+      .flatMap((field) => field.filterLookup ?? [])
+      .concat(extraFilterLookupValues)
+      .filter(Boolean);
+    const newSearchParams = new URLSearchParams(searchParams);
+    filterLookupValues.forEach((filterLookup) => {
+      if (!filterLookup) return;
+      newSearchParams.delete(filterLookup);
+    });
+    setSearchParams(newSearchParams);
+  };
+
   /**
    * Gets called when the fields selection is changed.
    * Pass this to `filterTransform` of a DataGrid component.
@@ -269,5 +289,5 @@ export function useFields<T extends Zaak = Zaak>(
     };
   };
 
-  return [getActiveFields(), setFields, filterTransform];
+  return [getActiveFields(), setFields, filterTransform, resetFilters];
 }

frontend/src/pages/destructionlist/abstract/BaseListView.tsx

@@ -8,7 +8,7 @@ import {
   formatMessage,
 } from "@maykin-ui/admin-ui";
 import React, { useCallback, useMemo } from "react";
-import { useNavigation, useSearchParams } from "react-router-dom";
+import { useNavigation } from "react-router-dom";
 
 import { DestructionListToolbar } from "../../../components";
 import {
@@ -90,7 +90,6 @@ export function BaseListView<T extends Zaak = Zaak>({
   onSelectionChange,
 }: BaseListViewProps<T>) {
   const { state } = useNavigation();
-  const [searchParams, setSearchParams] = useSearchParams();
   const [page, setPage] = usePage();
   const [sort, setSort] = useSort();
 
@@ -101,15 +100,15 @@ export function BaseListView<T extends Zaak = Zaak>({
   })) as unknown as T[];
 
   // Fields.
-  const [fields, setFields, filterTransform] = useFields<T>(
+  const [fields, setFields, filterTransform, resetFilters] = useFields<T>(
     destructionList,
     review,
     extraFields,
   );
   type FilterTransformData = ReturnType<typeof filterTransform>;
 
   // Filter.
-  const [setFilterField] = useFilter<FilterTransformData>();
+  const [, setFilterField] = useFilter<FilterTransformData>();
 
   // Selection.
   const [
@@ -154,19 +153,6 @@ export function BaseListView<T extends Zaak = Zaak>({
     onClearZaakSelection?.();
   };
 
-  const resetFilters = () => {
-    const filterLookupValues = fields
-      .filter((field) => field.filterLookup)
-      .map((field) => field.filterLookup)
-      // We perform a `flatMap` to handle multiple filter lookups within one field
-      .flatMap((filterLookup) => filterLookup?.split(","));
-    const newSearchParams = new URLSearchParams(searchParams);
-    filterLookupValues.forEach((filterLookup) => {
-      if (!filterLookup) return;
-      newSearchParams.delete(filterLookup);
-    });
-    setSearchParams(newSearchParams);
-  };
   // Selection actions.
   const getSelectionActions = useCallback(() => {
     const disabled = selectable && hasSelection;