♻️ #187 - refactor: refactor destruction list pages structure

Author: svenvandescheur

frontend/src/components/index.ts

@@ -8,12 +8,12 @@ import {
 import { FormEvent, useState } from "react";
 import { useLoaderData, useSubmit } from "react-router-dom";
 
-import { DestructionList } from "../../../components";
 import { User } from "../../../lib/api/auth";
 import { PaginatedZaken } from "../../../lib/api/zaken";
 import { getZaakSelection } from "../../../lib/zaakSelection/zaakSelection";
 import { Zaak } from "../../../types";
 import "./DestructionListCreate.css";
+import { DestructionList } from "./components";
 
 /** We need a key to store the zaak selection to, however we don't have a destruction list name yet. */
 export const DESTRUCTION_LIST_CREATE_KEY = "destruction-list-create";

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

@@ -1,12 +1,12 @@
 import { DataGridProps, ListTemplate } from "@maykin-ui/admin-ui";
 import { useActionData } from "react-router-dom";
 
-import { PaginatedZaken } from "../../lib/api/zaken";
+import { PaginatedZaken } from "../../../../../lib/api/zaken";
+import { Zaak } from "../../../../../types";
 import {
   DataGridAction,
   useDataGridProps,
-} from "../../pages/destructionlist/hooks";
-import { Zaak } from "../../types";
+} from "../../../hooks/useDataGridProps";
 
 export type DestructionList = React.PropsWithChildren<
   {

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

@@ -0,0 +1 @@
+export * from "./DestructionList";

frontend/src/pages/destructionlist/create/components/DestructionList/index.ts

@@ -0,0 +1 @@
+export * from "./DestructionList";

frontend/src/pages/destructionlist/create/components/index.ts

@@ -3,9 +3,17 @@ import { ActionFunctionArgs } from "@remix-run/router/utils";
 
 import { listArchivists } from "../../../lib/api/archivist";
 import { User, whoAmI } from "../../../lib/api/auth";
-import { getDestructionList } from "../../../lib/api/destructionLists";
+import {
+  DestructionList,
+  getDestructionList,
+} from "../../../lib/api/destructionLists";
 import { listSelectieLijstKlasseChoices } from "../../../lib/api/private";
-import { getLatestReview, listReviewItems } from "../../../lib/api/review";
+import {
+  Review,
+  ReviewItem,
+  getLatestReview,
+  listReviewItems,
+} from "../../../lib/api/review";
 import { listReviewers } from "../../../lib/api/reviewers";
 import { PaginatedZaken, listZaken } from "../../../lib/api/zaken";
 import {
@@ -17,7 +25,20 @@ import {
   ZaakSelection,
   getZaakSelection,
 } from "../../../lib/zaakSelection/zaakSelection";
-import { DestructionListDetailContext } from "./types";
+
+export interface DestructionListDetailContext {
+  storageKey: string;
+  destructionList: DestructionList;
+  reviewers: User[];
+  archivists: User[];
+  user: User;
+  zaken: PaginatedZaken;
+  selectableZaken: PaginatedZaken;
+  zaakSelection: ZaakSelection;
+  review: Review | null;
+  reviewItems: ReviewItem[] | null;
+  selectieLijstKlasseChoicesMap: Record<string, Option[]> | null;
+}
 
 /**
  * React Router loader.

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

@@ -25,7 +25,7 @@ import {
   getZaakSelection,
 } from "../../../lib/zaakSelection/zaakSelection";
 import { DestructionListDetailPage } from "./DestructionListDetail";
-import { DestructionListDetailContext } from "./types";
+import { DestructionListDetailContext } from "./DestructionListDetail.loader";
 
 const meta: Meta<typeof DestructionListDetailPage> = {
   title: "Pages/DestructionList/DestructionListDetailPage",

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

@@ -9,13 +9,13 @@ import {
 import { FormEvent, useState } from "react";
 import { useLoaderData } from "react-router-dom";
 
-import { DestructionListToolbar } from "../../../components/DestructionListToolbar/DestructionListToolbar";
 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";
+import { DestructionListDetailContext } from "./DestructionListDetail.loader";
+import { DestructionListEdit } from "./components/DestructionListEdit/DestructionListEdit";
+import { DestructionListProcessReview } from "./components/DestructionListProcessReview/DestructionListProcessReview";
+import { DestructionListToolbar } from "./components/DestructionListToolbar/DestructionListToolbar";
 
 /**
  * Destruction list detail page

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

@@ -8,16 +8,26 @@ import {
 import React, { FormEvent, useState } from "react";
 import { useActionData } from "react-router-dom";
 
-import { useSubmitAction } from "../../../hooks";
-import { DestructionListAssignee } from "../../../lib/api/destructionLists";
-import { formatUser } from "../utils";
-import { UpdateDestructionListAction } from "./DestructionListDetail.action";
-import { AssigneesEditableProps } from "./types";
+import { useSubmitAction } from "../../../../../hooks";
+import { User } from "../../../../../lib/api/auth";
+import { DestructionListAssignee } from "../../../../../lib/api/destructionLists";
+import { formatUser } from "../../../utils";
+import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
 
-export function AssigneesEditable({
+export type DestructionListAssigneesProps = {
+  assignees: DestructionListAssignee[];
+  reviewers: User[];
+};
+
+/**
+ * Allows viewing/assigning the reviewers of a destruction list.
+ * @param assignees
+ * @param reviewers
+ */
+export function DestructionListAssignees({
   assignees,
   reviewers,
-}: AssigneesEditableProps) {
+}: DestructionListAssigneesProps) {
   const errors = useActionData() || {};
   const submitAction = useSubmitAction();
 

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

@@ -0,0 +1 @@
+export * from "./DestructionListAssignees";

frontend/src/pages/destructionlist/detail/components/DestructionListAssignees/index.ts

@@ -7,15 +7,15 @@ import {
 } from "react-router-dom";
 import { useAsync } from "react-use";
 
-import { useSubmitAction } from "../../../hooks/useSubmitAction";
-import { canUpdateDestructionList } from "../../../lib/auth/permissions";
+import { useSubmitAction } from "../../../../../hooks";
+import { canUpdateDestructionList } from "../../../../../lib/auth/permissions";
 import {
   addToZaakSelection,
   getZaakSelection,
-} from "../../../lib/zaakSelection/zaakSelection";
-import { useDataGridProps } from "../hooks";
-import { UpdateDestructionListAction } from "./DestructionListDetail.action";
-import { DestructionListDetailContext } from "./types";
+} from "../../../../../lib/zaakSelection/zaakSelection";
+import { useDataGridProps } from "../../../hooks";
+import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
+import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
 
 /**
  * Show items of a destruction list.

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

@@ -0,0 +1 @@
+export * from "./DestructionListEdit";

frontend/src/pages/destructionlist/detail/components/DestructionListEdit/index.ts

@@ -13,21 +13,21 @@ import React, { useState } from "react";
 import { useLoaderData, useNavigation, useRevalidator } from "react-router-dom";
 import { useAsync } from "react-use";
 
-import { useSubmitAction } from "../../../hooks/useSubmitAction";
+import { useSubmitAction } from "../../../../../hooks";
 import {
   ReviewItemResponse,
   ReviewResponse,
-} from "../../../lib/api/reviewResponse";
+} from "../../../../../lib/api/reviewResponse";
 import {
   ZaakSelection,
   addToZaakSelection,
   removeFromZaakSelection,
-} from "../../../lib/zaakSelection/zaakSelection";
-import { Zaak } from "../../../types";
-import { DataGridAction, useDataGridProps } from "../hooks";
-import { UpdateDestructionListAction } from "./DestructionListDetail.action";
-import { ProcessZaakReviewModal } from "./ProcessZaakReviewModal";
-import { DestructionListDetailContext } from "./types";
+} from "../../../../../lib/zaakSelection/zaakSelection";
+import { Zaak } from "../../../../../types";
+import { DataGridAction, useDataGridProps } from "../../../hooks";
+import { UpdateDestructionListAction } from "../../DestructionListDetail.action";
+import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
+import { DestructionListProcessZaakReviewModal } from "../index";
 
 /**
  * The interface for the zaken modal state
@@ -340,7 +340,7 @@ export function DestructionListProcessReview() {
       </Modal>
 
       {/* The "feedback" modal */}
-      <ProcessZaakReviewModal
+      <DestructionListProcessZaakReviewModal
         zaakModalDataState={processZaakReviewModalState}
         reviewItem={
           reviewItems?.find(

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

@@ -0,0 +1 @@
+export * from "./DestructionListProcessReview";

frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/index.ts

@@ -16,16 +16,16 @@ import {
 } from "@maykin-ui/admin-ui";
 import React, { FormEvent, useEffect, useState } from "react";
 
-import { ReviewItem } from "../../../lib/api/review";
-import { Zaak } from "../../../types";
-import { ProcessReviewAction } from "./DestructionListProcessReview";
+import { ReviewItem } from "../../../../../lib/api/review";
+import { Zaak } from "../../../../../types";
+import { ProcessReviewAction } from "../DestructionListProcessReview/DestructionListProcessReview";
 
 export const LABEL_CHANGE_SELECTION_LIST_CLASS =
   "Aanpassen van selectielijstklasse";
 export const LABEL_POSTPONE_DESTRUCTION = "Verlengen bewaartermijn";
 export const LABEL_KEEP = "Afwijzen van het voorstel";
 
-export type ProcessZaakReviewModalProps = {
+export type DestructionListProcessZaakReviewModalProps = {
   zaakModalDataState: {
     open: boolean;
     zaak?: Zaak;
@@ -53,7 +53,9 @@ export type ProcessZaakReviewModalProps = {
  * @param reviewItem
  * @param selectielijstklasseChoices
  */
-export const ProcessZaakReviewModal: React.FC<ProcessZaakReviewModalProps> = ({
+export const DestructionListProcessZaakReviewModal: React.FC<
+  DestructionListProcessZaakReviewModalProps
+> = ({
   zaakModalDataState: { open, zaak },
   reviewItem,
   action,

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

@@ -0,0 +1 @@
+export * from "./DestructionListProcessZaakReviewModal";

frontend/src/pages/destructionlist/detail/components/DestructionListProcessZaakReviewModal/index.ts

@@ -8,19 +8,19 @@ import {
 } from "@maykin-ui/admin-ui";
 import React from "react";
 
-import { User } from "../../lib/api/auth";
-import { DestructionList } from "../../lib/api/destructionLists";
-import { Review } from "../../lib/api/review";
-import { ReviewResponse } from "../../lib/api/reviewResponse";
-import { formatDate } from "../../lib/format/date";
-import { AssigneesEditable } from "../../pages/destructionlist/detail/Assignees";
+import { User } from "../../../../../lib/api/auth";
+import { DestructionList } from "../../../../../lib/api/destructionLists";
+import { Review } from "../../../../../lib/api/review";
+import { ReviewResponse } from "../../../../../lib/api/reviewResponse";
+import { formatDate } from "../../../../../lib/format/date";
+import { formatUser } from "../../../utils";
 import {
   REVIEW_DECISION_LEVEL_MAPPING,
   REVIEW_DECISION_MAPPING,
   STATUS_LEVEL_MAPPING,
   STATUS_MAPPING,
-} from "../../pages/destructionlist/detail/constants";
-import { formatUser } from "../../pages/destructionlist/utils";
+} from "../../constants";
+import { DestructionListAssignees } from "../index";
 
 export type DestructionListToolbarProps = {
   destructionList: DestructionList;
@@ -75,7 +75,7 @@ export function DestructionListToolbar({
 
         {reviewers && (
           <Column span={3}>
-            <AssigneesEditable
+            <DestructionListAssignees
               assignees={destructionList.assignees}
               reviewers={reviewers}
             />

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

@@ -0,0 +1 @@
+export * from "./DestructionListToolbar";

frontend/src/pages/destructionlist/detail/components/DestructionListToolbar/index.ts

@@ -0,0 +1,5 @@
+export * from "./DestructionListAssignees/DestructionListAssignees";
+export * from "./DestructionListEdit/DestructionListEdit";
+export * from "./DestructionListProcessReview/DestructionListProcessReview";
+export * from "./DestructionListProcessZaakReviewModal/DestructionListProcessZaakReviewModal";
+export * from "./DestructionListToolbar";

frontend/src/pages/destructionlist/detail/components/index.ts

@@ -0,0 +1 @@
+export * from "./useDataGridProps";

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

@@ -10,20 +10,20 @@ import {
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { useNavigation, useSearchParams } from "react-router-dom";
 
-import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private";
-import { PaginatedZaken } from "../../lib/api/zaken";
+import { ZaaktypeChoice, listZaaktypeChoices } from "../../../lib/api/private";
+import { PaginatedZaken } from "../../../lib/api/zaken";
 import {
   FieldSelection,
   addToFieldSelection,
   getFieldSelection,
   removeFromFieldSelection,
-} from "../../lib/fieldSelection/fieldSelection";
+} from "../../../lib/fieldSelection/fieldSelection";
 import {
   addToZaakSelection,
   getZaakSelection,
   removeFromZaakSelection,
-} from "../../lib/zaakSelection/zaakSelection";
-import { ExpandZaak, Zaak } from "../../types";
+} from "../../../lib/zaakSelection/zaakSelection";
+import { ExpandZaak, Zaak } from "../../../types";
 
 /** The template used to format urls to an external application providing zaak details. */
 const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;

frontend/src/pages/destructionlist/hooks/index.ts

@@ -24,10 +24,7 @@ import { isZaakSelected } from "../../../lib/zaakSelection/zaakSelection";
 import { Zaak } from "../../../types";
 import { getDestructionListReviewKey } from "./DestructionListReview";
 
-/**
- * The context of the loader
- */
-export type DestructionListReviewLoaderContext = {
+export type DestructionListReviewContext = {
   reviewers: User[];
   reviewItems?: ReviewItem[];
   reviewResponse?: ReviewResponse;
@@ -43,11 +40,11 @@ export type DestructionListReviewLoaderContext = {
  * @param params
  */
 export const destructionListReviewLoader = loginRequired(
-  canReviewDestructionListRequired<DestructionListReviewLoaderContext>(
+  canReviewDestructionListRequired<DestructionListReviewContext>(
     async ({
       request,
       params,
-    }: ActionFunctionArgs): Promise<DestructionListReviewLoaderContext> => {
+    }: ActionFunctionArgs): Promise<DestructionListReviewContext> => {
       const searchParams = new URL(request.url).searchParams;
       const uuid = params.uuid as string;
       searchParams.set("destruction_list", uuid);
@@ -97,7 +94,7 @@ export const destructionListReviewLoader = loginRequired(
         selectedZaken,
         uuid,
         destructionList: list,
-      } satisfies DestructionListReviewLoaderContext;
+      } satisfies DestructionListReviewContext;
     },
   ),
 );