♻️ #115 - refactor: refactor to accomodate changed API's

frontend/src/fixtures/destructionList.ts

@@ -1,20 +1,10 @@
 import { DestructionList } from "../lib/api/destructionLists";
-import { FIXTURE_PAGINATED_ZAKEN } from "./paginatedZaken";
 import { FIXTURE_USERS } from "./users";
 
 export const FIXTURE_DESTRUCTION_LIST: DestructionList = {
   uuid: "00000000-0000-0000-0000-000000000000",
   name: "My First Destruction List",
   author: FIXTURE_USERS[0],
-  items: [
-    FIXTURE_PAGINATED_ZAKEN.results[0],
-    FIXTURE_PAGINATED_ZAKEN.results[1],
-    FIXTURE_PAGINATED_ZAKEN.results[2],
-  ].map((z) => ({
-    zaak: z.url || "",
-    status: "",
-    zaakData: z,
-  })),
   containsSensitiveInfo: false,
   status: "in_progress",
   assignees: FIXTURE_USERS.map((u, i) => ({ user: u, order: i })),

frontend/src/lib/api/destructionLists.ts

@@ -10,7 +10,6 @@ export type DestructionList = {
   author: User;
   containsSensitiveInfo: boolean;
   created: string;
-  items: DestructionListItem[];
   name: string;
   status: "in_progress" | "processing" | "completed";
   statusChanged: string | null;
@@ -22,12 +21,6 @@ export type DestructionListAssignee = {
   order: number;
 };
 
-export type DestructionListItem = {
-  zaak: Zaak["url"];
-  status: string;
-  zaakData: Zaak;
-};
-
 export type DestructionListUpdateData = {
   assignees?: DestructionListAssigneeUpdate[];
   items?: DestructionListItemUpdate[];

frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx

@@ -34,10 +34,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const FIXTURE: DestructionListDetailContext = {
-  allZaken: FIXTURE_PAGINATED_ZAKEN,
   reviewers: FIXTURE_USERS,
   destructionList: FIXTURE_DESTRUCTION_LIST,
   storageKey: "storybook-storage-key",
+  zaken: FIXTURE_PAGINATED_ZAKEN,
+  allZaken: FIXTURE_PAGINATED_ZAKEN,
+  zaakSelection: {},
 };
 
 export const ReviewDestructionList: Story = {

frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx

@@ -23,6 +23,10 @@ import {
 import { loginRequired } from "../../../lib/api/loginRequired";
 import { User, listReviewers } from "../../../lib/api/reviewers";
 import { PaginatedZaken, listZaken } from "../../../lib/api/zaken";
+import {
+  ZaakSelection,
+  getZaakSelection,
+} from "../../../lib/zaakSelection/zaakSelection";
 import { formatUser } from "../utils";
 import { AssigneesEditable } from "./Assignees";
 import "./DestructionListDetail.css";
@@ -95,10 +99,7 @@ export function DestructionListDetailPage() {
             </Grid>
           </P>
           <P>
-            <DestructionListItems
-              zaken={destructionList.items.map((item) => item.zaakData)}
-              destructionList={destructionList}
-            />
+            <DestructionListItems />
           </P>
         </Body>
       </CardBaseTemplate>
@@ -153,32 +154,54 @@ export const destructionListDetailLoader = loginRequired(
     request,
     params,
   }: ActionFunctionArgs): Promise<DestructionListDetailContext> => {
-    console.log("loader", request, params);
-
-    const storageKey = `destruction-list-detail-${params.uuid}`;
-    const searchParamsZakenEndpoint: Record<string, string> = {
-      not_in_destruction_list_except: String(params.uuid),
-    };
-    const searchParams = new URL(request.url).searchParams;
-    Object.keys(searchParamsZakenEndpoint).forEach((key) =>
-      searchParams.set(key, searchParamsZakenEndpoint[key]),
-    );
+    const uuid = params.uuid as string;
+    const storageKey = `destruction-list-detail-${uuid}`;
+    const searchParams = Object.fromEntries(new URL(request.url).searchParams);
 
     // Get reviewers, zaken and zaaktypen.
     const promises = [
-      getDestructionList(params.uuid as string),
+      getDestructionList(uuid as string),
       listReviewers(),
-      listZaken(searchParams),
+      /*
+       Intercept and ignore 404 due to the following scenario cause by shared `page` parameter:
+
+       - User navigates to destruction list with 1 page of items.
+       - Users click edit button
+       - User navigates to page 2
+       - zaken API with param `in_destruction_list` may return 404.
+      */
+      listZaken({ ...searchParams, in_destruction_list: uuid }).catch((e) => {
+        if (e.status === 404) {
+          return {
+            count: 0,
+            next: null,
+            previous: null,
+            results: [],
+          };
+        }
+      }),
+      listZaken({
+        ...searchParams,
+        not_in_destruction_list_except: uuid,
+      }),
+      getZaakSelection(storageKey),
     ];
-    const [destructionList, reviewers, allZaken] = (await Promise.all(
-      promises,
-    )) as [DestructionList, User[], PaginatedZaken];
+    const [destructionList, reviewers, zaken, allZaken, zaakSelection] =
+      (await Promise.all(promises)) as [
+        DestructionList,
+        User[],
+        PaginatedZaken,
+        PaginatedZaken,
+        ZaakSelection,
+      ];
 
     return {
-      allZaken,
       destructionList,
       storageKey,
       reviewers,
+      zaken,
+      allZaken,
+      zaakSelection,
     };
   },
 );

frontend/src/pages/destructionlist/detail/DestructionListItems.tsx

@@ -1,45 +1,39 @@
 import { DataGrid, Outline } from "@maykin-ui/admin-ui";
 import React, { useState } from "react";
-import { useLoaderData, useNavigation, useSubmit } from "react-router-dom";
+import {
+  useLoaderData,
+  useNavigation,
+  useSearchParams,
+  useSubmit,
+} from "react-router-dom";
 import { useAsync } from "react-use";
 
-import { DestructionList } from "../../../lib/api/destructionLists";
 import {
   addToZaakSelection,
   getZaakSelection,
 } from "../../../lib/zaakSelection/zaakSelection";
-import { Zaak } from "../../../types";
 import { useDataGridProps } from "../hooks";
 import "./DestructionListDetail.css";
 import { DestructionListDetailContext } from "./types";
 
-export type DestructionListItemsProps = {
-  zaken: Zaak[];
-  destructionList: DestructionList;
-};
-
-export function DestructionListItems({ zaken }: DestructionListItemsProps) {
+export function DestructionListItems() {
   const { state } = useNavigation();
-  const { storageKey, allZaken } =
+  const { storageKey, allZaken, zaken, zaakSelection } =
     useLoaderData() as DestructionListDetailContext;
   const submit = useSubmit();
-  const [isEditing, setIsEditing] = useState(false);
-
+  const [urlSearchParams, setUrlSearchParams] = useSearchParams();
+  const isEditingState = Boolean(urlSearchParams.get("is_editing"));
+  const selectedUrls = Object.entries(zaakSelection)
+    .filter(([_, selected]) => selected)
+    .map(([url]) => ({ url }));
   const dataGridProps = useDataGridProps(
     storageKey,
-    isEditing
-      ? allZaken
-      : {
-          count: zaken.length,
-          next: null,
-          previous: null,
-          results: zaken,
-        },
-    isEditing ? zaken : [],
+    isEditingState ? allZaken : zaken,
+    isEditingState ? [...zaken.results, ...selectedUrls] : [],
   );
 
   useAsync(async () => {
-    await addToZaakSelection(storageKey, zaken);
+    await addToZaakSelection(storageKey, zaken.results);
   }, []);
 
   const onUpdate = async () => {
@@ -52,21 +46,27 @@ export function DestructionListItems({ zaken }: DestructionListItemsProps) {
     zaakUrls.forEach((url) => formData.append("zaakUrls", url));
 
     submit(formData, { method: "PATCH" });
+  };
 
-    setIsEditing(false);
+  const setIsEditing = (value: boolean) => {
+    urlSearchParams.set("page", "1");
+    value
+      ? urlSearchParams.set("is_editing", "true")
+      : urlSearchParams.delete("is_editing");
+    setUrlSearchParams(urlSearchParams);
   };
 
   return (
     <div className="zaken-list">
       <DataGrid
         {...dataGridProps.props}
         boolProps={{ explicit: true }}
-        filterable={isEditing}
+        count={isEditingState ? allZaken.count : zaken.count}
+        filterable={isEditingState}
         loading={state === "loading"}
-        showPaginator={isEditing}
-        selectable={isEditing}
+        selectable={isEditingState}
         selectionActions={
-          isEditing
+          isEditingState
             ? [
                 {
                   children: "Vernietigingslijst aanpassen",
@@ -88,7 +88,7 @@ export function DestructionListItems({ zaken }: DestructionListItemsProps) {
                 },
               ]
         }
-        sort={isEditing}
+        sort={isEditingState}
         title="Zaakdossiers"
       />
     </div>

frontend/src/pages/destructionlist/detail/types.ts

@@ -4,12 +4,15 @@ import {
 } from "../../../lib/api/destructionLists";
 import { User } from "../../../lib/api/reviewers";
 import { PaginatedZaken } from "../../../lib/api/zaken";
+import { ZaakSelection } from "../../../lib/zaakSelection/zaakSelection";
 
 export interface DestructionListDetailContext {
-  allZaken: PaginatedZaken;
   reviewers: User[];
   destructionList: DestructionList;
   storageKey: string;
+  zaken: PaginatedZaken;
+  allZaken: PaginatedZaken;
+  zaakSelection: ZaakSelection;
 }
 
 export type AssigneesEditableProps = {

frontend/src/pages/destructionlist/hooks.ts

@@ -30,7 +30,7 @@ const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
 export function useDataGridProps(
   storageKey: string,
   paginatedResults: PaginatedZaken,
-  selectedResults: Zaak[],
+  selectedResults: (Zaak | { url: string })[],
 ): { props: DataGridProps; error: unknown } {
   const { state } = useNavigation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -161,7 +161,7 @@ export function useDataGridProps(
       explicit: true,
     },
     count: paginatedResults.count,
-    equalityChecker: (a, b) => a.uuid === b.uuid,
+    equalityChecker: (a, b) => a.uuid === b.uuid || a.url === b.url,
     fields: fields,
     fieldsSelectable: true,
     loading: state === "loading",