♻️ #262 - refactor: use the destruction list items API for destructoin list detail page

svenvandescheur · svenvandescheur · commit b7555b72c652 · 2024-08-09T16:13:53.000+02:00
diff --git a/frontend/src/fixtures/destructionListItem.ts b/frontend/src/fixtures/destructionListItem.ts
@@ -0,0 +1,34 @@
+import {
+  DestructionListItem,
+  PaginatedDestructionListItems,
+} from "../lib/api/destructionListsItem";
+import { createArrayFactory, createObjectFactory } from "./factory";
+import { zaakFactory } from "./zaak";
+
+export const FIXTURE_DESTRUCTION_LIST_ITEM: DestructionListItem = {
+  pk: 1,
+  zaak: zaakFactory().url,
+  status: "suggested",
+  extraZaakData: null,
+  zaakData: zaakFactory(),
+  processingStatus: "new",
+};
+
+export const destructionListItemFactory = createObjectFactory(
+  FIXTURE_DESTRUCTION_LIST_ITEM,
+);
+export const destructionListItemsFactory = createArrayFactory([
+  FIXTURE_DESTRUCTION_LIST_ITEM,
+]);
+
+const FIXTURE_PAGINATED_DESTRUCTION_LIST_ITEMS = {
+  count: 10,
+  next: null,
+  previous: null,
+  results: destructionListItemsFactory(),
+};
+
+export const paginatedDestructionListItemsFactory =
+  createObjectFactory<PaginatedDestructionListItems>(
+    FIXTURE_PAGINATED_DESTRUCTION_LIST_ITEMS,
+  );
diff --git a/frontend/src/lib/api/destructionLists.ts b/frontend/src/lib/api/destructionLists.ts
@@ -2,6 +2,7 @@ import { isPrimitive } from "@maykin-ui/admin-ui";
 
 import { Zaak } from "../../types";
 import { User } from "./auth";
+import { ProcessingStatus } from "./processingStatus";
 import { request } from "./request";
 
 export type DestructionList = {
@@ -13,7 +14,7 @@ export type DestructionList = {
   created: string;
   name: string;
   status: DestructionListStatus;
-  processingStatus: DestructionListProcessingStatus;
+  processingStatus: ProcessingStatus;
   statusChanged: string | null;
   uuid: string;
 };
@@ -35,13 +36,6 @@ export const DESTRUCTION_LIST_STATUSES = [
 // Inferring the type of the array, so that we don't have to repeat the same.
 export type DestructionListStatus = (typeof DESTRUCTION_LIST_STATUSES)[number];
 
-export type DestructionListProcessingStatus =
-  | "new"
-  | "queued"
-  | "processing"
-  | "failed"
-  | "succeeded";
-
 export type DestructionListUpdateData = {
   assignees?: DestructionListAssigneeUpdate[];
   items?: DestructionListItemUpdate[];
diff --git a/frontend/src/lib/api/destructionListsItem.ts b/frontend/src/lib/api/destructionListsItem.ts
@@ -0,0 +1,41 @@
+import { Zaak } from "../../types";
+import { PaginatedResults } from "./paginatedResults";
+import { ProcessingStatus } from "./processingStatus";
+import { request } from "./request";
+
+export type DestructionListItem = {
+  pk: number;
+  zaak: Zaak["url"];
+  status?: DestructionListItemStatus;
+  extraZaakData?: Record<string, unknown> | null;
+  zaakData: Zaak | null;
+  processingStatus?: ProcessingStatus;
+};
+
+export type DestructionListItemStatus = "removed" | "suggested";
+
+export type PaginatedDestructionListItems =
+  PaginatedResults<DestructionListItem>;
+
+/**
+ * List destruction lists.
+ */
+export async function listDestructionListItems(
+  destructionListUuid: string,
+  params?:
+    | URLSearchParams
+    | {
+        page?: number;
+        page_size?: number;
+        processing_status?: ProcessingStatus;
+        status: DestructionListItemStatus; // TODO ?
+      },
+) {
+  const response = await request("GET", "/destruction-list-items/", {
+    destruction_list: destructionListUuid,
+    status: "suggested",
+    ...params,
+  } as typeof params & { destruction_list: string });
+  const promise: Promise<PaginatedDestructionListItems> = response.json();
+  return promise;
+}
diff --git a/frontend/src/lib/api/paginatedResults.d.ts b/frontend/src/lib/api/paginatedResults.d.ts
@@ -0,0 +1,6 @@
+export type PaginatedResults<T> = {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+};
diff --git a/frontend/src/lib/api/processingStatus.d.ts b/frontend/src/lib/api/processingStatus.d.ts
@@ -0,0 +1,6 @@
+export type ProcessingStatus =
+  | "new"
+  | "queued"
+  | "processing"
+  | "failed"
+  | "succeeded";
diff --git a/frontend/src/lib/api/reviewResponse.ts b/frontend/src/lib/api/reviewResponse.ts
@@ -1,4 +1,3 @@
-import { DestructionList } from "./destructionLists";
 import { request } from "./request";
 import { Review, ReviewItem } from "./review";
 
diff --git a/frontend/src/lib/api/zaken.ts b/frontend/src/lib/api/zaken.ts
@@ -1,12 +1,8 @@
 import { Zaak } from "../../types";
+import { PaginatedResults } from "./paginatedResults";
 import { request } from "./request";
 
-export type PaginatedZaken = {
-  count: number;
-  next: string | null;
-  previous: string | null;
-  results: Zaak[];
-};
+export type PaginatedZaken = PaginatedResults<Zaak>;
 
 /**
  * Retrieve zaken using the configured ZRC service. For information over the query parameters accepted and the schema of
diff --git a/frontend/src/pages/constants.tsx b/frontend/src/pages/constants.tsx
@@ -2,9 +2,9 @@ import { BadgeProps, Outline } from "@maykin-ui/admin-ui";
 
 import {
   DESTRUCTION_LIST_STATUSES,
-  DestructionListProcessingStatus,
   DestructionListStatus,
 } from "../lib/api/destructionLists";
+import { ProcessingStatus } from "../lib/api/processingStatus";
 import { Review } from "../lib/api/review";
 
 export const REVIEW_DECISION_MAPPING: Record<Review["decision"], string> = {
@@ -45,7 +45,7 @@ export const STATUS_LEVEL_MAPPING: {
 };
 
 export const PROCESSING_STATUS_MAPPING: {
-  [key in DestructionListProcessingStatus]: string;
+  [key in ProcessingStatus]: string;
 } = {
   new: "new",
   queued: "queued",
@@ -55,7 +55,7 @@ export const PROCESSING_STATUS_MAPPING: {
 };
 
 export const PROCESSING_STATUS_ICON_MAPPING: {
-  [key in DestructionListProcessingStatus]: React.ReactNode;
+  [key in ProcessingStatus]: React.ReactNode;
 } = {
   new: <Outline.PlusCircleIcon />,
   queued: <Outline.CircleStackIcon />,
@@ -65,7 +65,7 @@ export const PROCESSING_STATUS_ICON_MAPPING: {
 };
 
 export const PROCESSING_STATUS_LEVEL_MAPPING: {
-  [key in DestructionListProcessingStatus]: BadgeProps["level"];
+  [key in ProcessingStatus]: BadgeProps["level"];
 } = {
   new: "info",
   queued: "info",
diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.loader.ts b/frontend/src/pages/destructionlist/detail/DestructionListDetail.loader.ts
@@ -7,6 +7,10 @@ import {
   DestructionList,
   getDestructionList,
 } from "../../../lib/api/destructionLists";
+import {
+  PaginatedDestructionListItems,
+  listDestructionListItems,
+} from "../../../lib/api/destructionListsItem";
 import { listSelectieLijstKlasseChoices } from "../../../lib/api/private";
 import {
   Review,
@@ -32,7 +36,7 @@ export interface DestructionListDetailContext {
   reviewers: User[];
   archivists: User[];
   user: User;
-  zaken: PaginatedZaken;
+  destructionListItems: PaginatedDestructionListItems;
   selectableZaken: PaginatedZaken;
   zaakSelection: ZaakSelection;
   review: Review | null;
@@ -81,13 +85,16 @@ export const destructionListDetailLoader = loginRequired(
         // Fetch selectable zaken: empty array if review collected OR all zaken not in another destruction list.
         // FIXME: Accept no/implement real pagination?
         reviewItems
-          ? ({
+          ? {
               count: reviewItems.length,
               next: null,
               previous: null,
               results: [],
-            } as PaginatedZaken)
-          : listZaken({ ...searchParams, in_destruction_list: uuid }).catch(
+            }
+          : listDestructionListItems(
+              uuid,
+              searchParams as unknown as URLSearchParams,
+            ).catch(
               // Intercept (and ignore) 404 due to the following scenario cause by shared `page` parameter:
               //
               // User navigates to destruction list with 1 page of items.
@@ -148,15 +155,15 @@ export const destructionListDetailLoader = loginRequired(
         reviewers,
         archivists,
         user,
-        zaken,
+        destructionListItems,
         allZaken,
         zaakSelection,
         selectieLijstKlasseChoicesMap,
       ] = (await Promise.all(promises)) as [
         User[],
         User[],
         User,
-        PaginatedZaken,
+        PaginatedDestructionListItems,
         PaginatedZaken,
         ZaakSelection,
         Record<string, Option[]>,
@@ -175,7 +182,7 @@ export const destructionListDetailLoader = loginRequired(
         reviewers,
         archivists: filteredArchivists,
         user,
-        zaken,
+        destructionListItems: destructionListItems,
         selectableZaken: allZaken,
         zaakSelection,
         review: review,
diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx
@@ -12,6 +12,7 @@ import {
   fillForm,
 } from "../../../../.storybook/playFunctions";
 import { destructionListFactory } from "../../../fixtures/destructionList";
+import { paginatedDestructionListItemsFactory } from "../../../fixtures/destructionListItem";
 import { paginatedZakenFactory } from "../../../fixtures/paginatedZaken";
 import { reviewFactory } from "../../../fixtures/review";
 import { reviewItemsFactory } from "../../../fixtures/reviewItem";
@@ -123,7 +124,7 @@ const FIXTURE_EDIT: DestructionListDetailContext = {
   reviewers: usersFactory(),
   archivists: usersFactory(),
   user: usersFactory()[0],
-  zaken: paginatedZakenFactory(),
+  destructionListItems: paginatedDestructionListItemsFactory(),
   selectableZaken: paginatedZakenFactory(),
   zaakSelection: {},
   review: null,
@@ -164,7 +165,7 @@ const FIXTURE_PROCESS_REVIEW: DestructionListDetailContext = {
   reviewers: usersFactory(),
   archivists: usersFactory(),
   user: usersFactory()[0],
-  zaken: {
+  destructionListItems: {
     count: reviewItemsFactory().length,
     next: null,
     previous: null,
@@ -274,7 +275,7 @@ const FIXTURE_FINAL_DESTRUCTION: DestructionListDetailContext = {
   reviewers: usersFactory(),
   archivists: usersFactory(),
   user: usersFactory()[0],
-  zaken: {
+  destructionListItems: {
     count: reviewItemsFactory().length,
     next: null,
     previous: null,
@@ -346,7 +347,7 @@ const FIXTURE_DELETE: DestructionListDetailContext = {
   reviewers: usersFactory(),
   archivists: usersFactory(),
   user: usersFactory()[0],
-  zaken: paginatedZakenFactory(),
+  destructionListItems: paginatedDestructionListItemsFactory(),
   selectableZaken: paginatedZakenFactory(),
   zaakSelection: {},
   review: null,
diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx
@@ -12,10 +12,9 @@ import {
   field2Title,
 } from "@maykin-ui/admin-ui";
 import { FormEvent, useState } from "react";
-import { useLoaderData, useRevalidator } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 
 import { useSubmitAction } from "../../../hooks";
-import { usePoll } from "../../../hooks/usePoll";
 import {
   canMarkListAsFinal,
   canTriggerDestruction,
@@ -35,8 +34,14 @@ import { DestructionListToolbar } from "./components/DestructionListToolbar/Dest
  * Destruction list detail page
  */
 export function DestructionListDetailPage() {
-  const { archivists, destructionList, review, reviewers, user, zaken } =
-    useLoaderData() as DestructionListDetailContext;
+  const {
+    archivists,
+    destructionList,
+    review,
+    reviewers,
+    user,
+    destructionListItems,
+  } = useLoaderData() as DestructionListDetailContext;
   const submitAction = useSubmitAction<UpdateDestructionListAction>();
 
   const [archivistModalOpenState, setArchivistModalOpenState] = useState(false);
@@ -194,8 +199,8 @@ export function DestructionListDetailPage() {
         >
           <Body>
             <P>
-              U staat op het punt om {zaken.count} zaken definitief te
-              vernietigen.
+              U staat op het punt om {destructionListItems.count} zaken
+              definitief te vernietigen.
             </P>
           </Body>
           <Body>
@@ -204,7 +209,7 @@ export function DestructionListDetailPage() {
                 variant: "danger",
               }}
               fields={destroyModalFormFields}
-              labelSubmit={`${zaken.count} zaken vernietigen`}
+              labelSubmit={`${destructionListItems.count} zaken vernietigen`}
               validate={validateDestroy}
               validateOnChange={true}
               role="form"
diff --git a/frontend/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx b/frontend/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx
@@ -13,6 +13,7 @@ import {
   addToZaakSelection,
   getZaakSelection,
 } from "../../../../../lib/zaakSelection/zaakSelection";
+import { Zaak } from "../../../../../types";
 import { useDataGridProps } from "../../../hooks";
 import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
 import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
@@ -29,13 +30,16 @@ export function DestructionListEdit() {
   const {
     storageKey,
     destructionList,
-    zaken,
+    destructionListItems,
     user,
     selectableZaken,
     zaakSelection,
     review,
     reviewItems,
   } = useLoaderData() as DestructionListDetailContext;
+  const zakenOnPage = destructionListItems.results
+    .map((dt) => dt.zaakData)
+    .filter((v): v is Zaak => Boolean(v));
 
   // Whether the user is adding/removing items from the destruction list.
   const isEditingState = !review && Boolean(urlSearchParams.get("is_editing"));
@@ -126,20 +130,22 @@ export function DestructionListEdit() {
         }
       : isEditingState
         ? selectableZaken
-        : zaken,
-    isEditingState ? [...zaken.results, ...selectedUrls] : [],
+        : destructionListItems,
+    isEditingState ? [...zakenOnPage, ...selectedUrls] : [],
   );
 
   // Update the selected zaken to session storage.
   useAsync(async () => {
-    await addToZaakSelection(storageKey, zaken.results);
+    await addToZaakSelection(storageKey, zakenOnPage);
   }, []);
 
   return (
     <DataGrid
       {...dataGridProps}
       boolProps={{ explicit: true }}
-      count={isEditingState ? selectableZaken.count : zaken.count}
+      count={
+        isEditingState ? selectableZaken.count : destructionListItems.count
+      }
       filterable={isEditingState}
       loading={state === "loading"}
       selectable={Boolean(isEditingState)}
diff --git a/frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx b/frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx
diff --git a/frontend/src/pages/destructionlist/hooks/useDataGridProps.tsx b/frontend/src/pages/destructionlist/hooks/useDataGridProps.tsx
diff --git a/frontend/src/pages/landing/Landing.tsx b/frontend/src/pages/landing/Landing.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { DestructionList } from "./destructionLists";`
`2`	`1`	`import { request } from "./request";`
`3`	`2`	`import { Review, ReviewItem } from "./review";`
`4`	`3`