Skip to content

Commit 69906f1

Browse files
♻️ #187 - refactor: use action for marking a destruction list as final
1 parent 5192444 commit 69906f1

File tree

4 files changed

+38
-18
lines changed

4 files changed

+38
-18
lines changed

frontend/src/hooks/useSubmitAction.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { SubmitOptions, useSubmit } from "react-router-dom";
22

33
// From React Router
4-
type JsonObject = {
4+
export type JsonObject = {
55
[Key in string]: JsonValue;
66
} & {
77
[Key in string]?: JsonValue | undefined;
88
};
9-
type JsonArray = JsonValue[] | readonly JsonValue[];
10-
type JsonPrimitive = string | number | boolean | null;
11-
type JsonValue = JsonPrimitive | JsonObject | JsonArray;
9+
export type JsonArray = JsonValue[] | readonly JsonValue[];
10+
export type JsonPrimitive = string | number | boolean | null;
11+
export type JsonValue = JsonPrimitive | JsonObject | JsonArray;
1212

1313
/**
1414
* Can be used when using (React Router) actions to explicitly set the type
@@ -55,10 +55,10 @@ export type TypedAction<T = string, P = JsonValue> = {
5555
* used to retrieve the `TypedAction`. If multiple actions should be handled the
5656
* type of the action can be used to determine the applicable logic.
5757
*/
58-
export function useSubmitAction() {
58+
export function useSubmitAction<T extends TypedAction = TypedAction>() {
5959
const submit = useSubmit();
6060

61-
return (typedAction: TypedAction, options: SubmitOptions = {}) => {
61+
return (typedAction: T, options: SubmitOptions = {}) => {
6262
const targetOptions: SubmitOptions = {
6363
method: "POST",
6464
encType: "application/json",

frontend/src/lib/api/destructionLists.ts

+1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export async function updateDestructionList(
123123
/**
124124
* Mark destruction list as final.
125125
* @param uuid
126+
* @param data
126127
* @returns
127128
*/
128129
export async function markDestructionListAsFinal(

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

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { ActionFunctionArgs } from "@remix-run/router/utils";
22
import { redirect } from "react-router-dom";
33

4-
import { TypedAction } from "../../../hooks";
4+
import { JsonValue, TypedAction } from "../../../hooks";
55
import {
66
DestructionListItemUpdate,
7+
markDestructionListAsFinal,
78
updateDestructionList,
89
} from "../../../lib/api/destructionLists";
910
import {
1011
ReviewResponse,
1112
createReviewResponse,
1213
} from "../../../lib/api/reviewResponse";
1314

14-
export type UpdateDestructionListAction<T> = TypedAction<
15-
"PROCESS_REVIEW" | "UPDATE_ASSIGNEES" | "UPDATE_ZAKEN",
15+
export type UpdateDestructionListAction<T = JsonValue> = TypedAction<
16+
"MAKE_FINAL" | "PROCESS_REVIEW" | "UPDATE_ASSIGNEES" | "UPDATE_ZAKEN",
1617
T
1718
>;
1819

@@ -27,6 +28,8 @@ export async function destructionListUpdateAction({
2728
const action = data as UpdateDestructionListAction<unknown>;
2829

2930
switch (action.type) {
31+
case "MAKE_FINAL":
32+
return await destructionListMakeFinalAction({ request, params });
3033
case "PROCESS_REVIEW":
3134
return await destructionListProcessReviewAction({ request, params });
3235
case "UPDATE_ASSIGNEES":
@@ -38,6 +41,19 @@ export async function destructionListUpdateAction({
3841
}
3942
}
4043

44+
/**
45+
* React Router action (user intents to mark the destruction list as final (assign to archivist)).
46+
*/
47+
export async function destructionListMakeFinalAction({
48+
request,
49+
}: ActionFunctionArgs) {
50+
const { payload } = await request.json();
51+
await markDestructionListAsFinal(payload.uuid, {
52+
user: payload.user,
53+
});
54+
return redirect("/");
55+
}
56+
4157
/**
4258
* React Router action (user intents to adds/remove zaken to/from the destruction list).
4359
*/

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

+12-9
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import {
77
SerializedFormData,
88
} from "@maykin-ui/admin-ui";
99
import { FormEvent, useState } from "react";
10-
import { useLoaderData, useNavigate } from "react-router-dom";
10+
import { useLoaderData } from "react-router-dom";
1111

1212
import { DestructionListToolbar } from "../../../components/DestructionListToolbar/DestructionListToolbar";
13-
import { markDestructionListAsFinal } from "../../../lib/api/destructionLists";
13+
import { useSubmitAction } from "../../../hooks";
1414
import { canMarkListAsFinal } from "../../../lib/auth/permissions";
15+
import { UpdateDestructionListAction } from "./DestructionListDetail.action";
1516
import { DestructionListEdit } from "./DestructionListEdit";
1617
import { DestructionListProcessReview } from "./DestructionListProcessReview";
1718
import { DestructionListDetailContext } from "./types";
@@ -22,9 +23,9 @@ import { DestructionListDetailContext } from "./types";
2223
export function DestructionListDetailPage() {
2324
const { archivists, destructionList, review, reviewers, user } =
2425
useLoaderData() as DestructionListDetailContext;
26+
const submitAction = useSubmitAction<UpdateDestructionListAction>();
2527

2628
const [modalOpenState, setModalOpenState] = useState(false);
27-
const navigate = useNavigate();
2829

2930
const modalFormFields: FormField[] = [
3031
{
@@ -41,12 +42,14 @@ export function DestructionListDetailPage() {
4142
// TODO - Make a 404 page
4243
if (!destructionList) return <div>Deze vernietigingslijst bestaat niet.</div>;
4344

44-
const onSubmit = async (_: FormEvent, data: SerializedFormData) => {
45-
await markDestructionListAsFinal(destructionList.uuid, {
46-
user: Number(data.assigneeIds),
45+
const handleSubmit = async (_: FormEvent, data: SerializedFormData) => {
46+
submitAction({
47+
type: "MAKE_FINAL",
48+
payload: {
49+
uuid: destructionList.uuid,
50+
user: Number(data.assigneeIds),
51+
},
4752
});
48-
setModalOpenState(false);
49-
return navigate("/");
5053
};
5154

5255
return (
@@ -78,7 +81,7 @@ export function DestructionListDetailPage() {
7881
<Body>
7982
<Form
8083
fields={modalFormFields}
81-
onSubmit={onSubmit}
84+
onSubmit={handleSubmit}
8285
validateOnChange={true}
8386
role="form"
8487
/>

0 commit comments

Comments
 (0)