🐛 #393 - fix: prevent API calls from being made when selecting zaken and improve review flow selection behaviour

Author: svenvandescheur

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

@@ -51,7 +51,8 @@ export type BaseListViewProps = React.PropsWithChildren<{
 
   dataGridProps?: Partial<DataGridProps>;
 
-  onClearZaakSelection?: () => void; // FIXME: REMOVE?
+  onClearZaakSelection?: () => void;
+  onSelectionChange?: (rows: AttributeData[]) => void;
 }>;
 
 export function BaseListView({
@@ -78,6 +79,7 @@ export function BaseListView({
   children,
 
   onClearZaakSelection,
+  onSelectionChange,
 }: BaseListViewProps) {
   const { state } = useNavigation();
   const [page, setPage] = usePage();
@@ -182,7 +184,8 @@ export function BaseListView({
         allowSelectAllPages,
         allPagesSelected,
         count: paginatedZaken.count,
-        equalityChecker: (a, b) => a.uuid === b.uuid || a.url === b.url,
+        equalityChecker: (a, b) =>
+          a && b && (a.uuid === b.uuid || a.url === b.url),
         fields,
         filterTransform,
         loading: state === "loading",
@@ -199,6 +202,7 @@ export function BaseListView({
         onPageChange: setPage,
         onSelect: handleSelect,
         onSelectAllPages: handleSelectAllPages,
+        onSelectionChange: onSelectionChange,
         onSort: setSort,
 
         ...dataGridProps,

frontend/src/pages/destructionlist/hooks/useZaakSelection.ts

@@ -1,6 +1,5 @@
 import { AttributeData } from "@maykin-ui/admin-ui";
 import { useEffect, useMemo, useState } from "react";
-import { useRevalidator } from "react-router-dom";
 
 import {
   ZaakSelection,
@@ -61,8 +60,6 @@ export function useZaakSelection<T = unknown>(
     clearZaakSelection: ZaakSelectionClearer;
   },
 ] {
-  const revalidator = useRevalidator();
-
   // All pages selected.
   const [allPagesSelectedState, setAllPagesSelectedState] = useState<boolean>();
 
@@ -255,7 +252,6 @@ export function useZaakSelection<T = unknown>(
 
     await _updatePageSpecificZaakSelectionState();
     await _updateSelectionSizeState();
-    revalidator.revalidate();
   };
 
   /**
@@ -270,7 +266,6 @@ export function useZaakSelection<T = unknown>(
 
     _updatePageSpecificZaakSelectionState();
     await _updateAllPagesSelectedState(selected);
-    revalidator.revalidate();
   };
 
   /**
@@ -280,7 +275,6 @@ export function useZaakSelection<T = unknown>(
     await libClearZaakSelection(storageKey);
     await _updateAllPagesSelectedState(false);
     setZaakSelectionState({});
-    revalidator.revalidate();
   };
 
   return [

frontend/src/pages/destructionlist/review/DestructionListReview.tsx

@@ -8,7 +8,7 @@ import {
   usePrompt,
 } from "@maykin-ui/admin-ui";
 import React, { useMemo } from "react";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, useRevalidator } from "react-router-dom";
 
 import { useSubmitAction } from "../../../hooks";
 import { ZaakReview } from "../../../lib/api/review";
@@ -28,6 +28,7 @@ export const getDestructionListReviewKey = (id: string) =>
  */
 export function DestructionListReviewPage() {
   const prompt = usePrompt();
+  const revalidator = useRevalidator();
 
   // rows: AttributeData[], selected: boolean
   const {
@@ -48,7 +49,6 @@ export function DestructionListReviewPage() {
 
   // The object list of the current page with review actions appended.
   const objectList = useMemo(() => {
-    // console.log("objectList");
     return paginatedZaken.results.map((zaak) => {
       const badge = zaakReviewStatusBadges[zaak.url as string].badge;
       const actions = getActionsToolbarForZaak(zaak);
@@ -282,6 +282,14 @@ export function DestructionListReviewPage() {
     return { approved };
   };
 
+  /**
+   * Gets called when the selection changes outside of the per-zaak toolbar.
+   * Revalidates the loader so the selection is up2date.
+   */
+  const handleSelectionChange = () => {
+    revalidator.revalidate();
+  };
+
   return (
     <BaseListView
       storageKey={destructionListReviewKey}
@@ -300,6 +308,8 @@ export function DestructionListReviewPage() {
         labelSelect: "Markeren als (on)gezien",
         labelSelectAll: "Alles als (on)gezien markeren",
       }}
+      onSelectionChange={handleSelectionChange}
+      onClearZaakSelection={handleSelectionChange}
     ></BaseListView>
   );
 }