✨ #459 - feat: add frontend permission check for updating reviewer

frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx

@@ -11,11 +11,12 @@ import {
 import { FormEvent, useState } from "react";
 import { useNavigation, useRevalidator } from "react-router-dom";
 
-import { useReviewers, useSubmitAction } from "../../hooks";
+import { useReviewers, useWhoAmI } from "../../hooks";
 import {
   DestructionList,
   reassignDestructionList,
 } from "../../lib/api/destructionLists";
+import { canReassignDestructionList } from "../../lib/auth/permissions";
 import { formatUser } from "../../lib/format/user";
 
 export type DestructionListReviewerProps = {
@@ -35,6 +36,7 @@ export function DestructionListReviewer({
   const revalidator = useRevalidator();
   const alert = useAlert();
   const reviewers = useReviewers();
+  const user = useWhoAmI();
 
   /**
    * Gets called when the change is confirmed.
@@ -85,19 +87,26 @@ export function DestructionListReviewer({
                 value: (
                   <>
                     {formatUser(reviewer.user)}
-                    &nbsp;
-                    <Button
-                      aria-label="Beoordelaar bewerken"
-                      disabled={state === "loading" || state === "submitting"}
-                      size="xs"
-                      variant="secondary"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        setModalState(true);
-                      }}
-                    >
-                      <Solid.PencilIcon />
-                    </Button>
+                    {user &&
+                      canReassignDestructionList(user, destructionList) && (
+                        <>
+                          &nbsp;
+                          <Button
+                            aria-label="Beoordelaar bewerken"
+                            disabled={
+                              state === "loading" || state === "submitting"
+                            }
+                            size="xs"
+                            variant="secondary"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setModalState(true);
+                            }}
+                          >
+                            <Solid.PencilIcon />
+                          </Button>
+                        </>
+                      )}
                   </>
                 ),
               },

frontend/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from "./useLatestReviewResponse";
 export * from "./usePoll";
 export * from "./useReviewers";
 export * from "./useSubmitAction";
+export * from "./useWhoAmI";

frontend/src/hooks/useWhoAmI.ts

@@ -0,0 +1,29 @@
+import { useAlert } from "@maykin-ui/admin-ui";
+import { useEffect, useState } from "react";
+
+import { User, whoAmI } from "../lib/api/auth";
+
+/**
+ * Hook resolving the current user
+ */
+export function useWhoAmI(): User | null {
+  const alert = useAlert();
+
+  const [valueState, setValueState] = useState<ReturnType<
+    typeof useWhoAmI
+  > | null>(null);
+  useEffect(() => {
+    whoAmI()
+      .then((value) => setValueState(value))
+      .catch((e) => {
+        console.error(e);
+        alert(
+          "Foutmelding",
+          "Er is een fout opgetreden bij het ophalen van de huidige gebruiker!",
+          "Ok",
+        );
+      });
+  }, []);
+
+  return valueState;
+}

frontend/src/lib/auth/permissions.ts

@@ -106,3 +106,14 @@ export function canTriggerDestruction(
     destructionList.status === "ready_to_delete"
   );
 }
+
+export function canReassignDestructionList(
+  user: User,
+  destructionList: DestructionList,
+) {
+  return (
+    canStartDestructionList(user) &&
+    (destructionList.status === "new" ||
+      destructionList.status === "ready_to_review")
+  );
+}