🐛 #459 - fix: fix a bug that could cause the application to show an e…

…rror when reassigning a destruction list reviewer
maykinmedia · Oct 28, 2024 · 1a3c7c0 · 1a3c7c0
1 parent a0ec44b
commit 1a3c7c0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 55 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -80,7 +80,7 @@ function App() {
               children: <Solid.HomeIcon />,
               title: "Home",
               // size: "xl",
-              onClick: () => navigate("/destruction-lists/"),
+              onClick: () => navigate("/destruction-lists"),
             },
             {
               children: <Solid.DocumentPlusIcon />,

diff --git a/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx b/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx
@@ -6,18 +6,20 @@ import {
   Modal,
   SerializedFormData,
   Solid,
+  useAlert,
 } from "@maykin-ui/admin-ui";
 import { FormEvent, useState } from "react";
-import { useNavigation } from "react-router-dom";
+import { useNavigation, useRevalidator } from "react-router-dom";
 
-import { useSubmitAction } from "../../hooks";
-import { User } from "../../lib/api/auth";
-import { DestructionList } from "../../lib/api/destructionLists";
+import { useReviewers, useSubmitAction } from "../../hooks";
+import {
+  DestructionList,
+  reassignDestructionList,
+} from "../../lib/api/destructionLists";
 import { formatUser } from "../../lib/format/user";
 
 export type DestructionListReviewerProps = {
   destructionList: DestructionList;
-  reviewers: User[];
 };
 
 /**
@@ -27,11 +29,12 @@ export type DestructionListReviewerProps = {
  */
 export function DestructionListReviewer({
   destructionList,
-  reviewers,
 }: DestructionListReviewerProps) {
-  const { state } = useNavigation();
-  const submitAction = useSubmitAction();
   const [modalState, setModalState] = useState<boolean>(false);
+  const { state } = useNavigation();
+  const revalidator = useRevalidator();
+  const alert = useAlert();
+  const reviewers = useReviewers();
 
   /**
    * Gets called when the change is confirmed.
@@ -45,13 +48,25 @@ export function DestructionListReviewer({
     if (!modalState) {
       return;
     }
-    submitAction({
-      type: "UPDATE_REVIEWER",
-      payload: {
-        assignee: { user: Number(reviewer) },
-        comment: String(comment),
-      },
-    });
+    reassignDestructionList(destructionList.uuid, {
+      assignee: { user: Number(reviewer) },
+      comment: String(comment),
+    })
+      .then(revalidator.revalidate) // Reload the current route.
+      .catch(async (e) => {
+        console.error(e);
+
+        const promise = e instanceof Response && e.json();
+        const data = await promise;
+
+        alert(
+          "Foutmelding",
+          data.detail ||
+            "Er is een fout opgetreden bij het bewerken van de beoordelaar!",
+          "Ok",
+        );
+      });
+
     setModalState(false);
   };
 

diff --git a/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx b/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx
@@ -43,7 +43,6 @@ export function DestructionListToolbar({
   destructionList,
   review,
 }: DestructionListToolbarProps) {
-  const reviewers = useReviewers();
   const logItems = useAuditLog(destructionList);
   const reviewResponse = useLatestReviewResponse(review);
   const properties = (
@@ -81,12 +80,9 @@ export function DestructionListToolbar({
         </Column>
       )}
 
-      {destructionList && reviewers && (
+      {destructionList && (
         <Column span={3}>
-          <DestructionListReviewer
-            destructionList={destructionList}
-            reviewers={reviewers}
-          />
+          <DestructionListReviewer destructionList={destructionList} />
         </Column>
       )}
 

diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts b/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts
@@ -23,7 +23,6 @@ export type UpdateDestructionListAction<P = JsonValue> = TypedAction<
   | "MAKE_FINAL"
   | "PROCESS_REVIEW"
   | "READY_TO_REVIEW"
-  | "UPDATE_REVIEWER"
   | "UPDATE_ZAKEN",
   P
 >;
@@ -50,8 +49,6 @@ export async function destructionListUpdateAction({
         request,
         params,
       });
-    case "UPDATE_REVIEWER":
-      return await destructionListUpdateReviewerAction({ request, params });
     case "UPDATE_ZAKEN":
       return await destructionListUpdateZakenAction({ request, params });
     case "CANCEL_DESTROY":
@@ -143,36 +140,6 @@ export async function destructionListProcessReadyToReviewAction({
   return redirect("/");
 }
 
-export type DestructionListUpdateReviewerActionPayload =
-  UpdateDestructionListAction<{
-    assignee: { user: User["pk"] };
-    comment: string;
-  }>;
-
-/**
- * React Router action (user intents to reassign the destruction list).
- */
-export async function destructionListUpdateReviewerAction({
-  request,
-  params,
-}: ActionFunctionArgs) {
-  const data: DestructionListUpdateReviewerActionPayload = await request.json();
-  const { assignee, comment } = data.payload;
-
-  try {
-    await reassignDestructionList(params.uuid as string, {
-      assignee: assignee,
-      comment: comment,
-    });
-  } catch (e: unknown) {
-    if (e instanceof Response) {
-      return await (e as Response).json();
-    }
-    throw e;
-  }
-  return redirect(`/destruction-lists/${params.uuid}`);
-}
-
 export type DestructionListUpdateZakenActionPayload = {
   storageKey: string;
   add: string[];