Skip to content

Commit 4f70739

Browse files
🐛 #393 - fix: prevent API calls from being made when selecting zaken and improve review flow selection behaviour
1 parent 5857064 commit 4f70739

File tree

3 files changed

+18
-10
lines changed

3 files changed

+18
-10
lines changed

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ export type BaseListViewProps = React.PropsWithChildren<{
5151

5252
dataGridProps?: Partial<DataGridProps>;
5353

54-
onClearZaakSelection?: () => void; // FIXME: REMOVE?
54+
onClearZaakSelection?: () => void;
55+
onSelectionChange?: (rows: AttributeData[]) => void;
5556
}>;
5657

5758
export function BaseListView({
@@ -78,6 +79,7 @@ export function BaseListView({
7879
children,
7980

8081
onClearZaakSelection,
82+
onSelectionChange,
8183
}: BaseListViewProps) {
8284
const { state } = useNavigation();
8385
const [page, setPage] = usePage();
@@ -182,7 +184,8 @@ export function BaseListView({
182184
allowSelectAllPages,
183185
allPagesSelected,
184186
count: paginatedZaken.count,
185-
equalityChecker: (a, b) => a.uuid === b.uuid || a.url === b.url,
187+
equalityChecker: (a, b) =>
188+
a && b && (a.uuid === b.uuid || a.url === b.url),
186189
fields,
187190
filterTransform,
188191
loading: state === "loading",
@@ -199,6 +202,7 @@ export function BaseListView({
199202
onPageChange: setPage,
200203
onSelect: handleSelect,
201204
onSelectAllPages: handleSelectAllPages,
205+
onSelectionChange: onSelectionChange,
202206
onSort: setSort,
203207

204208
...dataGridProps,

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

-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { AttributeData } from "@maykin-ui/admin-ui";
22
import { useEffect, useMemo, useState } from "react";
3-
import { useRevalidator } from "react-router-dom";
43

54
import {
65
ZaakSelection,
@@ -61,8 +60,6 @@ export function useZaakSelection<T = unknown>(
6160
clearZaakSelection: ZaakSelectionClearer;
6261
},
6362
] {
64-
const revalidator = useRevalidator();
65-
6663
// All pages selected.
6764
const [allPagesSelectedState, setAllPagesSelectedState] = useState<boolean>();
6865

@@ -255,7 +252,6 @@ export function useZaakSelection<T = unknown>(
255252

256253
await _updatePageSpecificZaakSelectionState();
257254
await _updateSelectionSizeState();
258-
revalidator.revalidate();
259255
};
260256

261257
/**
@@ -270,7 +266,6 @@ export function useZaakSelection<T = unknown>(
270266

271267
_updatePageSpecificZaakSelectionState();
272268
await _updateAllPagesSelectedState(selected);
273-
revalidator.revalidate();
274269
};
275270

276271
/**
@@ -280,7 +275,6 @@ export function useZaakSelection<T = unknown>(
280275
await libClearZaakSelection(storageKey);
281276
await _updateAllPagesSelectedState(false);
282277
setZaakSelectionState({});
283-
revalidator.revalidate();
284278
};
285279

286280
return [

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

+12-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
usePrompt,
99
} from "@maykin-ui/admin-ui";
1010
import React, { useMemo } from "react";
11-
import { useLoaderData } from "react-router-dom";
11+
import { useLoaderData, useRevalidator } from "react-router-dom";
1212

1313
import { useSubmitAction } from "../../../hooks";
1414
import { ZaakReview } from "../../../lib/api/review";
@@ -28,6 +28,7 @@ export const getDestructionListReviewKey = (id: string) =>
2828
*/
2929
export function DestructionListReviewPage() {
3030
const prompt = usePrompt();
31+
const revalidator = useRevalidator();
3132

3233
// rows: AttributeData[], selected: boolean
3334
const {
@@ -48,7 +49,6 @@ export function DestructionListReviewPage() {
4849

4950
// The object list of the current page with review actions appended.
5051
const objectList = useMemo(() => {
51-
// console.log("objectList");
5252
return paginatedZaken.results.map((zaak) => {
5353
const badge = zaakReviewStatusBadges[zaak.url as string].badge;
5454
const actions = getActionsToolbarForZaak(zaak);
@@ -282,6 +282,14 @@ export function DestructionListReviewPage() {
282282
return { approved };
283283
};
284284

285+
/**
286+
* Gets called when the selection changes outside of the per-zaak toolbar.
287+
* Revalidates the loader so the selection is up2date.
288+
*/
289+
const handleSelectionChange = () => {
290+
revalidator.revalidate();
291+
};
292+
285293
return (
286294
<BaseListView
287295
storageKey={destructionListReviewKey}
@@ -300,6 +308,8 @@ export function DestructionListReviewPage() {
300308
labelSelect: "Markeren als (on)gezien",
301309
labelSelectAll: "Alles als (on)gezien markeren",
302310
}}
311+
onSelectionChange={handleSelectionChange}
312+
onClearZaakSelection={handleSelectionChange}
303313
></BaseListView>
304314
);
305315
}

0 commit comments

Comments
 (0)