👌 - fix: pr fixes

Author: Xaohs

frontend/src/lib/zaakSelection/zaakSelection.ts

@@ -2,14 +2,7 @@ import { isPrimitive } from "@maykin-ui/admin-ui";
 
 import { Zaak } from "../../types";
 
-export type ZaakSelectionMandatoryFields = {
-  url: string;
-};
-
-export type ZaakSelection<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
-> = {
+export type ZaakSelection<DetailType = unknown> = {
   /**
    * A `Zaak.url` mapped to a `boolean`.
    * - `true`: The zaak is added to the selection.
@@ -29,10 +22,11 @@ export type ZaakSelection<
  * @param zaken An array containing either `Zaak.url` or `Zaak` objects
  * @param detail An optional detail object of generic type
  */
-export async function addToZaakSelection<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
->(key: string, zaken: string[] | Zaak[], detail?: DetailType) {
+export async function addToZaakSelection<DetailType = unknown>(
+  key: string,
+  zaken: string[] | Zaak[],
+  detail?: DetailType,
+) {
   await _mutateZaakSelection(key, zaken, true, detail);
 }
 
@@ -56,10 +50,7 @@ export async function removeFromZaakSelection(
  * Note: This function is async to accommodate possible future refactors.
  * @param key A key identifying the selection
  */
-export async function getZaakSelection<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
->(key: string) {
+export async function getZaakSelection<DetailType = unknown>(key: string) {
   const computedKey = _getComputedKey(key);
   const json = sessionStorage.getItem(computedKey) || "{}";
   return JSON.parse(json) as ZaakSelection<DetailType>;
@@ -72,10 +63,10 @@ export async function getZaakSelection<
  * @param key A key identifying the selection
  * @param zaakSelection
  */
-export async function setZaakSelection<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
->(key: string, zaakSelection: ZaakSelection<DetailType>) {
+export async function setZaakSelection<DetailType = unknown>(
+  key: string,
+  zaakSelection: ZaakSelection<DetailType>,
+) {
   const computedKey = _getComputedKey(key);
   const json = JSON.stringify(zaakSelection);
   sessionStorage.setItem(computedKey, json);
@@ -98,10 +89,10 @@ export async function clearZaakSelection(key: string) {
  * @param key A key identifying the selection
  * @param zaak Either a `Zaak.url` or `Zaak` object.
  */
-export async function isZaakSelected<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
->(key: string, zaak: string | Zaak) {
+export async function isZaakSelected<DetailType = unknown>(
+  key: string,
+  zaak: string | Zaak,
+) {
   const zaakSelection = await getZaakSelection<DetailType>(key);
   const url = _getZaakUrl(zaak);
   return zaakSelection[url]?.selected;
@@ -116,10 +107,7 @@ export async function isZaakSelected<
  * @param selected Indicating whether the selection should be added (`true) or removed (`false).
  * @param detail An optional detail object of generic type
  */
-export async function _mutateZaakSelection<
-  DetailType extends
-    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
->(
+export async function _mutateZaakSelection<DetailType = unknown>(
   key: string,
   zaken: string[] | Zaak[],
   selected: boolean,

frontend/src/pages/destructionlist/hooks.tsx

@@ -19,7 +19,6 @@ import {
   removeFromFieldSelection,
 } from "../../lib/fieldSelection/fieldSelection";
 import {
-  ZaakSelectionMandatoryFields,
   addToZaakSelection,
   getZaakSelection,
   removeFromZaakSelection,
@@ -31,8 +30,8 @@ const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
 
 export interface DataGridAction
   extends Omit<ButtonProps, "onClick" | "onMouseEnter"> {
-  onMouseEnter?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
-  onClick?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
+  onMouseEnter?: (zaak: Zaak, detail?: unknown) => void;
+  onClick?: (zaak: Zaak, detail?: unknown) => void;
   tooltip?: ReactNode;
 }
 
@@ -91,9 +90,12 @@ export function useDataGridProps(
     );
   }, []);
 
+  //
+  // Gets a specific zaak selection based on the url.
+  //
   const getSpecificZaakSelection = async (url: string) => {
     const zaakSelection = await getZaakSelection(storageKey);
-    if (!zaakSelection[url].selected) return;
+    if (!zaakSelection[url]?.selected) return;
     return zaakSelection[url].detail;
   };
 
@@ -109,49 +111,52 @@ export function useDataGridProps(
     },
   );
 
+  //
+  // Render action buttons.
+  //
+  const renderActionButtons = (zaak: Zaak, actions?: DataGridAction[]) => {
+    return actions?.map(
+      ({ onClick, onMouseEnter, tooltip, ...action }, index) => {
+        const handleAction = async (
+          zaak: Zaak,
+          actionFn?: (zaak: Zaak, detail?: unknown) => void,
+        ) => {
+          const foundZaak = await getSpecificZaakSelection(zaak.url!);
+          actionFn?.(zaak, foundZaak);
+        };
+
+        const ButtonComponent = (
+          <Button
+            pad={false}
+            variant={"transparent"}
+            key={index}
+            onClick={() => handleAction(zaak, onClick)}
+            onMouseEnter={() => handleAction(zaak, onMouseEnter)}
+            {...action}
+          />
+        );
+
+        if (tooltip) {
+          return (
+            <Tooltip key={index} content={tooltip} placement={"bottom-start"}>
+              {ButtonComponent}
+            </Tooltip>
+          );
+        }
+
+        return ButtonComponent;
+      },
+    );
+  };
+
   //
   // Get object list.
   //
   const objectList = paginatedResults.results.map((zaak) => {
     return {
       ...zaak,
       href: formatMessage(REACT_APP_ZAAK_URL_TEMPLATE || "", zaak),
-      acties: (
-        <>
-          {actions?.map(
-            ({ onClick, onMouseEnter, tooltip, ...action }, index) => {
-              const ButtonComponent = (
-                <Button
-                  pad={false}
-                  variant={"transparent"}
-                  key={index}
-                  onClick={async () => {
-                    const foundZaak = await getSpecificZaakSelection(zaak.url!);
-                    onClick?.(zaak, foundZaak);
-                  }}
-                  onMouseEnter={async () => {
-                    const foundZaak = await getSpecificZaakSelection(zaak.url!);
-                    onMouseEnter?.(zaak, foundZaak);
-                  }}
-                  {...action}
-                />
-              );
-              if (tooltip) {
-                return (
-                  <Tooltip
-                    key={index}
-                    content={tooltip}
-                    placement={"bottom-start"}
-                  >
-                    {ButtonComponent}
-                  </Tooltip>
-                );
-              }
-              return ButtonComponent;
-            },
-          )}
-        </>
-      ),
+      acties: <>{renderActionButtons(zaak, actions)}</>,
     };
   }) as unknown as AttributeData[];
 

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

@@ -1,14 +1,12 @@
 import {
   AttributeData,
   Body,
-  Button,
   Form,
   FormField,
   H2,
   Modal,
   Outline,
   P,
-  Tooltip,
 } from "@maykin-ui/admin-ui";
 import { FormEvent, useState } from "react";
 import {
@@ -197,38 +195,6 @@ export function DestructionListReviewPage() {
     setZaakSelection(zaakSelectionSelected.map((f) => f.detail!));
   };
 
-  const _zaken = {
-    ...zaken,
-    results: zaken.results.map((z) => {
-      const comment = zaakSelection.find((f) => f.uuid === z.uuid)?.motivation;
-
-      return {
-        ...z,
-        href: z.url as string,
-        action: comment && (
-          <Tooltip
-            key={`tooltip-${z.uuid}`}
-            content={
-              <>
-                <H2>Opmerking</H2>
-                <P>{comment}</P>
-              </>
-            }
-            placement={"bottom"}
-          >
-            <Button
-              variant="transparent"
-              key={`button-${z.uuid}`}
-              aria-label="Opmerking weergeven"
-            >
-              <Outline.ChatBubbleOvalLeftEllipsisIcon />
-            </Button>
-          </Tooltip>
-        ),
-      };
-    }),
-  };
-
   return (
     <>
       <Modal
@@ -264,7 +230,7 @@ export function DestructionListReviewPage() {
 
       <DestructionListComponent
         storageKey={destructionListReviewKey}
-        zaken={_zaken}
+        zaken={zaken}
         selectedZaken={selectedZaken}
         labelAction={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
         title={`${list.name} beoordelen`}