Skip to content

Commit f1ec130

Browse files
♻️ #187 - refactor: refactor destruction list pages structure
1 parent 69906f1 commit f1ec130

28 files changed

+113
-107
lines changed

frontend/src/components/index.ts

-2
This file was deleted.

frontend/src/pages/destructionlist/create/DestructionListCreate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {
88
import { FormEvent, useState } from "react";
99
import { useLoaderData, useSubmit } from "react-router-dom";
1010

11-
import { DestructionList } from "../../../components";
1211
import { User } from "../../../lib/api/auth";
1312
import { PaginatedZaken } from "../../../lib/api/zaken";
1413
import { getZaakSelection } from "../../../lib/zaakSelection/zaakSelection";
1514
import { Zaak } from "../../../types";
1615
import "./DestructionListCreate.css";
16+
import { DestructionList } from "./components";
1717

1818
/** We need a key to store the zaak selection to, however we don't have a destruction list name yet. */
1919
export const DESTRUCTION_LIST_CREATE_KEY = "destruction-list-create";

frontend/src/components/DestructionList/DestructionList.tsx frontend/src/pages/destructionlist/create/components/DestructionList/DestructionList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { DataGridProps, ListTemplate } from "@maykin-ui/admin-ui";
22
import { useActionData } from "react-router-dom";
33

4-
import { PaginatedZaken } from "../../lib/api/zaken";
4+
import { PaginatedZaken } from "../../../../../lib/api/zaken";
5+
import { Zaak } from "../../../../../types";
56
import {
67
DataGridAction,
78
useDataGridProps,
8-
} from "../../pages/destructionlist/hooks";
9-
import { Zaak } from "../../types";
9+
} from "../../../hooks/useDataGridProps";
1010

1111
export type DestructionList = React.PropsWithChildren<
1212
{
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionList";
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionList";

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

+24-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,17 @@ import { ActionFunctionArgs } from "@remix-run/router/utils";
33

44
import { listArchivists } from "../../../lib/api/archivist";
55
import { User, whoAmI } from "../../../lib/api/auth";
6-
import { getDestructionList } from "../../../lib/api/destructionLists";
6+
import {
7+
DestructionList,
8+
getDestructionList,
9+
} from "../../../lib/api/destructionLists";
710
import { listSelectieLijstKlasseChoices } from "../../../lib/api/private";
8-
import { getLatestReview, listReviewItems } from "../../../lib/api/review";
11+
import {
12+
Review,
13+
ReviewItem,
14+
getLatestReview,
15+
listReviewItems,
16+
} from "../../../lib/api/review";
917
import { listReviewers } from "../../../lib/api/reviewers";
1018
import { PaginatedZaken, listZaken } from "../../../lib/api/zaken";
1119
import {
@@ -17,7 +25,20 @@ import {
1725
ZaakSelection,
1826
getZaakSelection,
1927
} from "../../../lib/zaakSelection/zaakSelection";
20-
import { DestructionListDetailContext } from "./types";
28+
29+
export interface DestructionListDetailContext {
30+
storageKey: string;
31+
destructionList: DestructionList;
32+
reviewers: User[];
33+
archivists: User[];
34+
user: User;
35+
zaken: PaginatedZaken;
36+
selectableZaken: PaginatedZaken;
37+
zaakSelection: ZaakSelection;
38+
review: Review | null;
39+
reviewItems: ReviewItem[] | null;
40+
selectieLijstKlasseChoicesMap: Record<string, Option[]> | null;
41+
}
2142

2243
/**
2344
* React Router loader.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
getZaakSelection,
2626
} from "../../../lib/zaakSelection/zaakSelection";
2727
import { DestructionListDetailPage } from "./DestructionListDetail";
28-
import { DestructionListDetailContext } from "./types";
28+
import { DestructionListDetailContext } from "./DestructionListDetail.loader";
2929

3030
const meta: Meta<typeof DestructionListDetailPage> = {
3131
title: "Pages/DestructionList/DestructionListDetailPage",

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import {
99
import { FormEvent, useState } from "react";
1010
import { useLoaderData } from "react-router-dom";
1111

12-
import { DestructionListToolbar } from "../../../components/DestructionListToolbar/DestructionListToolbar";
1312
import { useSubmitAction } from "../../../hooks";
1413
import { canMarkListAsFinal } from "../../../lib/auth/permissions";
1514
import { UpdateDestructionListAction } from "./DestructionListDetail.action";
16-
import { DestructionListEdit } from "./DestructionListEdit";
17-
import { DestructionListProcessReview } from "./DestructionListProcessReview";
18-
import { DestructionListDetailContext } from "./types";
15+
import { DestructionListDetailContext } from "./DestructionListDetail.loader";
16+
import { DestructionListEdit } from "./components/DestructionListEdit/DestructionListEdit";
17+
import { DestructionListProcessReview } from "./components/DestructionListProcessReview/DestructionListProcessReview";
18+
import { DestructionListToolbar } from "./components/DestructionListToolbar/DestructionListToolbar";
1919

2020
/**
2121
* Destruction list detail page

frontend/src/pages/destructionlist/detail/Assignees.tsx frontend/src/pages/destructionlist/detail/components/DestructionListAssignees/DestructionListAssignees.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,26 @@ import {
88
import React, { FormEvent, useState } from "react";
99
import { useActionData } from "react-router-dom";
1010

11-
import { useSubmitAction } from "../../../hooks";
12-
import { DestructionListAssignee } from "../../../lib/api/destructionLists";
13-
import { formatUser } from "../utils";
14-
import { UpdateDestructionListAction } from "./DestructionListDetail.action";
15-
import { AssigneesEditableProps } from "./types";
11+
import { useSubmitAction } from "../../../../../hooks";
12+
import { User } from "../../../../../lib/api/auth";
13+
import { DestructionListAssignee } from "../../../../../lib/api/destructionLists";
14+
import { formatUser } from "../../../utils";
15+
import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
1616

17-
export function AssigneesEditable({
17+
export type DestructionListAssigneesProps = {
18+
assignees: DestructionListAssignee[];
19+
reviewers: User[];
20+
};
21+
22+
/**
23+
* Allows viewing/assigning the reviewers of a destruction list.
24+
* @param assignees
25+
* @param reviewers
26+
*/
27+
export function DestructionListAssignees({
1828
assignees,
1929
reviewers,
20-
}: AssigneesEditableProps) {
30+
}: DestructionListAssigneesProps) {
2131
const errors = useActionData() || {};
2232
const submitAction = useSubmitAction();
2333

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionListAssignees";

frontend/src/pages/destructionlist/detail/DestructionListEdit.tsx frontend/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import {
77
} from "react-router-dom";
88
import { useAsync } from "react-use";
99

10-
import { useSubmitAction } from "../../../hooks/useSubmitAction";
11-
import { canUpdateDestructionList } from "../../../lib/auth/permissions";
10+
import { useSubmitAction } from "../../../../../hooks";
11+
import { canUpdateDestructionList } from "../../../../../lib/auth/permissions";
1212
import {
1313
addToZaakSelection,
1414
getZaakSelection,
15-
} from "../../../lib/zaakSelection/zaakSelection";
16-
import { useDataGridProps } from "../hooks";
17-
import { UpdateDestructionListAction } from "./DestructionListDetail.action";
18-
import { DestructionListDetailContext } from "./types";
15+
} from "../../../../../lib/zaakSelection/zaakSelection";
16+
import { useDataGridProps } from "../../../hooks";
17+
import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
18+
import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
1919

2020
/**
2121
* Show items of a destruction list.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionListEdit";

frontend/src/pages/destructionlist/detail/DestructionListProcessReview.tsx frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ import React, { useState } from "react";
1313
import { useLoaderData, useNavigation, useRevalidator } from "react-router-dom";
1414
import { useAsync } from "react-use";
1515

16-
import { useSubmitAction } from "../../../hooks/useSubmitAction";
16+
import { useSubmitAction } from "../../../../../hooks";
1717
import {
1818
ReviewItemResponse,
1919
ReviewResponse,
20-
} from "../../../lib/api/reviewResponse";
20+
} from "../../../../../lib/api/reviewResponse";
2121
import {
2222
ZaakSelection,
2323
addToZaakSelection,
2424
removeFromZaakSelection,
25-
} from "../../../lib/zaakSelection/zaakSelection";
26-
import { Zaak } from "../../../types";
27-
import { DataGridAction, useDataGridProps } from "../hooks";
28-
import { UpdateDestructionListAction } from "./DestructionListDetail.action";
29-
import { ProcessZaakReviewModal } from "./ProcessZaakReviewModal";
30-
import { DestructionListDetailContext } from "./types";
25+
} from "../../../../../lib/zaakSelection/zaakSelection";
26+
import { Zaak } from "../../../../../types";
27+
import { DataGridAction, useDataGridProps } from "../../../hooks";
28+
import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
29+
import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
30+
import { DestructionListProcessZaakReviewModal } from "../index";
3131

3232
/**
3333
* The interface for the zaken modal state
@@ -340,7 +340,7 @@ export function DestructionListProcessReview() {
340340
</Modal>
341341

342342
{/* The "feedback" modal */}
343-
<ProcessZaakReviewModal
343+
<DestructionListProcessZaakReviewModal
344344
zaakModalDataState={processZaakReviewModalState}
345345
reviewItem={
346346
reviewItems?.find(
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionListProcessReview";

frontend/src/pages/destructionlist/detail/ProcessZaakReviewModal.tsx frontend/src/pages/destructionlist/detail/components/DestructionListProcessZaakReviewModal/DestructionListProcessZaakReviewModal.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ import {
1616
} from "@maykin-ui/admin-ui";
1717
import React, { FormEvent, useEffect, useState } from "react";
1818

19-
import { ReviewItem } from "../../../lib/api/review";
20-
import { Zaak } from "../../../types";
21-
import { ProcessReviewAction } from "./DestructionListProcessReview";
19+
import { ReviewItem } from "../../../../../lib/api/review";
20+
import { Zaak } from "../../../../../types";
21+
import { ProcessReviewAction } from "../DestructionListProcessReview/DestructionListProcessReview";
2222

2323
export const LABEL_CHANGE_SELECTION_LIST_CLASS =
2424
"Aanpassen van selectielijstklasse";
2525
export const LABEL_POSTPONE_DESTRUCTION = "Verlengen bewaartermijn";
2626
export const LABEL_KEEP = "Afwijzen van het voorstel";
2727

28-
export type ProcessZaakReviewModalProps = {
28+
export type DestructionListProcessZaakReviewModalProps = {
2929
zaakModalDataState: {
3030
open: boolean;
3131
zaak?: Zaak;
@@ -53,7 +53,9 @@ export type ProcessZaakReviewModalProps = {
5353
* @param reviewItem
5454
* @param selectielijstklasseChoices
5555
*/
56-
export const ProcessZaakReviewModal: React.FC<ProcessZaakReviewModalProps> = ({
56+
export const DestructionListProcessZaakReviewModal: React.FC<
57+
DestructionListProcessZaakReviewModalProps
58+
> = ({
5759
zaakModalDataState: { open, zaak },
5860
reviewItem,
5961
action,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionListProcessZaakReviewModal";

frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx frontend/src/pages/destructionlist/detail/components/DestructionListToolbar/DestructionListToolbar.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ import {
88
} from "@maykin-ui/admin-ui";
99
import React from "react";
1010

11-
import { User } from "../../lib/api/auth";
12-
import { DestructionList } from "../../lib/api/destructionLists";
13-
import { Review } from "../../lib/api/review";
14-
import { ReviewResponse } from "../../lib/api/reviewResponse";
15-
import { formatDate } from "../../lib/format/date";
16-
import { AssigneesEditable } from "../../pages/destructionlist/detail/Assignees";
11+
import { User } from "../../../../../lib/api/auth";
12+
import { DestructionList } from "../../../../../lib/api/destructionLists";
13+
import { Review } from "../../../../../lib/api/review";
14+
import { ReviewResponse } from "../../../../../lib/api/reviewResponse";
15+
import { formatDate } from "../../../../../lib/format/date";
16+
import { formatUser } from "../../../utils";
1717
import {
1818
REVIEW_DECISION_LEVEL_MAPPING,
1919
REVIEW_DECISION_MAPPING,
2020
STATUS_LEVEL_MAPPING,
2121
STATUS_MAPPING,
22-
} from "../../pages/destructionlist/detail/constants";
23-
import { formatUser } from "../../pages/destructionlist/utils";
22+
} from "../../constants";
23+
import { DestructionListAssignees } from "../index";
2424

2525
export type DestructionListToolbarProps = {
2626
destructionList: DestructionList;
@@ -75,7 +75,7 @@ export function DestructionListToolbar({
7575

7676
{reviewers && (
7777
<Column span={3}>
78-
<AssigneesEditable
78+
<DestructionListAssignees
7979
assignees={destructionList.assignees}
8080
reviewers={reviewers}
8181
/>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DestructionListToolbar";
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export * from "./DestructionListAssignees/DestructionListAssignees";
2+
export * from "./DestructionListEdit/DestructionListEdit";
3+
export * from "./DestructionListProcessReview/DestructionListProcessReview";
4+
export * from "./DestructionListProcessZaakReviewModal/DestructionListProcessZaakReviewModal";
5+
export * from "./DestructionListToolbar";

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

-34
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./useDataGridProps";

frontend/src/pages/destructionlist/hooks.tsx frontend/src/pages/destructionlist/hooks/useDataGridProps.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,20 @@ import {
1010
import { ReactNode, useEffect, useRef, useState } from "react";
1111
import { useNavigation, useSearchParams } from "react-router-dom";
1212

13-
import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private";
14-
import { PaginatedZaken } from "../../lib/api/zaken";
13+
import { ZaaktypeChoice, listZaaktypeChoices } from "../../../lib/api/private";
14+
import { PaginatedZaken } from "../../../lib/api/zaken";
1515
import {
1616
FieldSelection,
1717
addToFieldSelection,
1818
getFieldSelection,
1919
removeFromFieldSelection,
20-
} from "../../lib/fieldSelection/fieldSelection";
20+
} from "../../../lib/fieldSelection/fieldSelection";
2121
import {
2222
addToZaakSelection,
2323
getZaakSelection,
2424
removeFromZaakSelection,
25-
} from "../../lib/zaakSelection/zaakSelection";
26-
import { ExpandZaak, Zaak } from "../../types";
25+
} from "../../../lib/zaakSelection/zaakSelection";
26+
import { ExpandZaak, Zaak } from "../../../types";
2727

2828
/** The template used to format urls to an external application providing zaak details. */
2929
const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;

frontend/src/pages/destructionlist/review/DestructionListReview.loader.ts

+4-7
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ import { isZaakSelected } from "../../../lib/zaakSelection/zaakSelection";
2424
import { Zaak } from "../../../types";
2525
import { getDestructionListReviewKey } from "./DestructionListReview";
2626

27-
/**
28-
* The context of the loader
29-
*/
30-
export type DestructionListReviewLoaderContext = {
27+
export type DestructionListReviewContext = {
3128
reviewers: User[];
3229
reviewItems?: ReviewItem[];
3330
reviewResponse?: ReviewResponse;
@@ -43,11 +40,11 @@ export type DestructionListReviewLoaderContext = {
4340
* @param params
4441
*/
4542
export const destructionListReviewLoader = loginRequired(
46-
canReviewDestructionListRequired<DestructionListReviewLoaderContext>(
43+
canReviewDestructionListRequired<DestructionListReviewContext>(
4744
async ({
4845
request,
4946
params,
50-
}: ActionFunctionArgs): Promise<DestructionListReviewLoaderContext> => {
47+
}: ActionFunctionArgs): Promise<DestructionListReviewContext> => {
5148
const searchParams = new URL(request.url).searchParams;
5249
const uuid = params.uuid as string;
5350
searchParams.set("destruction_list", uuid);
@@ -97,7 +94,7 @@ export const destructionListReviewLoader = loginRequired(
9794
selectedZaken,
9895
uuid,
9996
destructionList: list,
100-
} satisfies DestructionListReviewLoaderContext;
97+
} satisfies DestructionListReviewContext;
10198
},
10299
),
103100
);

0 commit comments

Comments
 (0)