♻️ #187 - refactor: use action for marking a destruction list as final

Author: svenvandescheur

frontend/src/hooks/useSubmitAction.ts

@@ -1,14 +1,14 @@
 import { SubmitOptions, useSubmit } from "react-router-dom";
 
 // From React Router
-type JsonObject = {
+export type JsonObject = {
   [Key in string]: JsonValue;
 } & {
   [Key in string]?: JsonValue | undefined;
 };
-type JsonArray = JsonValue[] | readonly JsonValue[];
-type JsonPrimitive = string | number | boolean | null;
-type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+export type JsonArray = JsonValue[] | readonly JsonValue[];
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 
 /**
  * Can be used when using (React Router) actions to explicitly set the type
@@ -55,10 +55,10 @@ export type TypedAction<T = string, P = JsonValue> = {
  * used to retrieve the `TypedAction`. If multiple actions should be handled the
  * type of the action can be used to determine the applicable logic.
  */
-export function useSubmitAction() {
+export function useSubmitAction<T extends TypedAction = TypedAction>() {
   const submit = useSubmit();
 
-  return (typedAction: TypedAction, options: SubmitOptions = {}) => {
+  return (typedAction: T, options: SubmitOptions = {}) => {
     const targetOptions: SubmitOptions = {
       method: "POST",
       encType: "application/json",

frontend/src/lib/api/destructionLists.ts

@@ -123,6 +123,7 @@ export async function updateDestructionList(
 /**
  * Mark destruction list as final.
  * @param uuid
+ * @param data
  * @returns
  */
 export async function markDestructionListAsFinal(

frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts

@@ -1,18 +1,19 @@
 import { ActionFunctionArgs } from "@remix-run/router/utils";
 import { redirect } from "react-router-dom";
 
-import { TypedAction } from "../../../hooks";
+import { JsonValue, TypedAction } from "../../../hooks";
 import {
   DestructionListItemUpdate,
+  markDestructionListAsFinal,
   updateDestructionList,
 } from "../../../lib/api/destructionLists";
 import {
   ReviewResponse,
   createReviewResponse,
 } from "../../../lib/api/reviewResponse";
 
-export type UpdateDestructionListAction<T> = TypedAction<
-  "PROCESS_REVIEW" | "UPDATE_ASSIGNEES" | "UPDATE_ZAKEN",
+export type UpdateDestructionListAction<T = JsonValue> = TypedAction<
+  "MAKE_FINAL" | "PROCESS_REVIEW" | "UPDATE_ASSIGNEES" | "UPDATE_ZAKEN",
   T
 >;
 
@@ -27,6 +28,8 @@ export async function destructionListUpdateAction({
   const action = data as UpdateDestructionListAction<unknown>;
 
   switch (action.type) {
+    case "MAKE_FINAL":
+      return await destructionListMakeFinalAction({ request, params });
     case "PROCESS_REVIEW":
       return await destructionListProcessReviewAction({ request, params });
     case "UPDATE_ASSIGNEES":
@@ -38,6 +41,19 @@ export async function destructionListUpdateAction({
   }
 }
 
+/**
+ * React Router action (user intents to mark the destruction list as final (assign to archivist)).
+ */
+export async function destructionListMakeFinalAction({
+  request,
+}: ActionFunctionArgs) {
+  const { payload } = await request.json();
+  await markDestructionListAsFinal(payload.uuid, {
+    user: payload.user,
+  });
+  return redirect("/");
+}
+
 /**
  * React Router action (user intents to adds/remove zaken to/from the destruction list).
  */

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

@@ -7,11 +7,12 @@ import {
   SerializedFormData,
 } from "@maykin-ui/admin-ui";
 import { FormEvent, useState } from "react";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 
 import { DestructionListToolbar } from "../../../components/DestructionListToolbar/DestructionListToolbar";
-import { markDestructionListAsFinal } from "../../../lib/api/destructionLists";
+import { useSubmitAction } from "../../../hooks";
 import { canMarkListAsFinal } from "../../../lib/auth/permissions";
+import { UpdateDestructionListAction } from "./DestructionListDetail.action";
 import { DestructionListEdit } from "./DestructionListEdit";
 import { DestructionListProcessReview } from "./DestructionListProcessReview";
 import { DestructionListDetailContext } from "./types";
@@ -22,9 +23,9 @@ import { DestructionListDetailContext } from "./types";
 export function DestructionListDetailPage() {
   const { archivists, destructionList, review, reviewers, user } =
     useLoaderData() as DestructionListDetailContext;
+  const submitAction = useSubmitAction<UpdateDestructionListAction>();
 
   const [modalOpenState, setModalOpenState] = useState(false);
-  const navigate = useNavigate();
 
   const modalFormFields: FormField[] = [
     {
@@ -41,12 +42,14 @@ export function DestructionListDetailPage() {
   // TODO - Make a 404 page
   if (!destructionList) return <div>Deze vernietigingslijst bestaat niet.</div>;
 
-  const onSubmit = async (_: FormEvent, data: SerializedFormData) => {
-    await markDestructionListAsFinal(destructionList.uuid, {
-      user: Number(data.assigneeIds),
+  const handleSubmit = async (_: FormEvent, data: SerializedFormData) => {
+    submitAction({
+      type: "MAKE_FINAL",
+      payload: {
+        uuid: destructionList.uuid,
+        user: Number(data.assigneeIds),
+      },
     });
-    setModalOpenState(false);
-    return navigate("/");
   };
 
   return (
@@ -78,7 +81,7 @@ export function DestructionListDetailPage() {
         <Body>
           <Form
             fields={modalFormFields}
-            onSubmit={onSubmit}
+            onSubmit={handleSubmit}
             validateOnChange={true}
             role="form"
           />