refactor: access policy enum (#4601)

Co-authored-by: Mateo Ivankovic <[email protected]>
inovex · Nov 8, 2024 · 72124f9 · 72124f9
1 parent d63404c
commit 72124f9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 37 deletions.
diff --git a/src/components/AccessPolicySelection/AccessPolicySelection.tsx b/src/components/AccessPolicySelection/AccessPolicySelection.tsx
@@ -22,16 +22,10 @@ export const AccessPolicySelection: FC<AccessPolicySelectionProps> = ({accessPol
   const {t} = useTranslation();
   const [visiblePassphrase, setVisiblePassphrase] = useState(true);
 
-  const handlePolicyChange = (newAccessPolicy: AccessPolicy) => {
-    if (newAccessPolicy >= 0 && newAccessPolicy <= 2) {
-      onAccessPolicyChange(newAccessPolicy);
-    }
-  };
-
   let AccessPolicyDescription;
   let AdditionalAccessPolicySettings;
   switch (accessPolicy) {
-    case AccessPolicy.BY_PASSPHRASE:
+    case "BY_PASSPHRASE":
       AccessPolicyDescription = <span>{t("AccessPolicySelection.byPassphrase")}</span>;
       AdditionalAccessPolicySettings = (
         <>
@@ -68,10 +62,10 @@ export const AccessPolicySelection: FC<AccessPolicySelectionProps> = ({accessPol
         </>
       );
       break;
-    case AccessPolicy.BY_INVITE:
+    case "BY_INVITE":
       AccessPolicyDescription = <span>{t("AccessPolicySelection.manualVerification")}</span>;
       break;
-    case AccessPolicy.PUBLIC:
+    case "PUBLIC":
     default:
       AccessPolicyDescription = <span>{t("AccessPolicySelection.public")}</span>;
       break;
@@ -82,24 +76,20 @@ export const AccessPolicySelection: FC<AccessPolicySelectionProps> = ({accessPol
       <h2 className="access-policy-selection__title">{t("AccessPolicySelection.title")}</h2>
 
       <div className="access-policy-selection__tabs">
-        <Button
-          className="access-policy-selection__access-policy"
-          variant={accessPolicy === AccessPolicy.PUBLIC ? "contained" : "outlined"}
-          onClick={() => handlePolicyChange(AccessPolicy.PUBLIC)}
-        >
+        <Button className="access-policy-selection__access-policy" variant={accessPolicy === "PUBLIC" ? "contained" : "outlined"} onClick={() => onAccessPolicyChange("PUBLIC")}>
           {t("AccessPolicySelection.publicTitle")}
         </Button>
         <Button
           className="access-policy-selection__access-policy"
-          variant={accessPolicy === AccessPolicy.BY_PASSPHRASE ? "contained" : "outlined"}
-          onClick={() => handlePolicyChange(AccessPolicy.BY_PASSPHRASE)}
+          variant={accessPolicy === "BY_PASSPHRASE" ? "contained" : "outlined"}
+          onClick={() => onAccessPolicyChange("BY_PASSPHRASE")}
         >
           {t("AccessPolicySelection.byPassphraseTitle")}
         </Button>
         <Button
           className="access-policy-selection__access-policy"
-          variant={accessPolicy === AccessPolicy.BY_INVITE ? "contained" : "outlined"}
-          onClick={() => handlePolicyChange(AccessPolicy.BY_INVITE)}
+          variant={accessPolicy === "BY_INVITE" ? "contained" : "outlined"}
+          onClick={() => onAccessPolicyChange("BY_INVITE")}
         >
           {t("AccessPolicySelection.manualVerificationTitle")}
         </Button>

diff --git a/src/components/AccessPolicySelection/__tests__/AccessPolicySelection.test.tsx b/src/components/AccessPolicySelection/__tests__/AccessPolicySelection.test.tsx
@@ -1,24 +1,21 @@
 import {fireEvent, waitFor} from "@testing-library/react";
 import {AccessPolicySelection} from "components/AccessPolicySelection/AccessPolicySelection";
-import {AccessPolicy} from "store/features/board/types";
 import {render} from "testUtils";
 
 describe("AccessPolicySelection", () => {
   test("dont show passphrase input on default state", () => {
-    const {container} = render(<AccessPolicySelection accessPolicy={AccessPolicy.PUBLIC} onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={jest.fn()} />);
+    const {container} = render(<AccessPolicySelection accessPolicy="PUBLIC" onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={jest.fn()} />);
     expect(container.querySelector(`[data-testid="passphrase-input"]`)).toBeNull();
   });
 
   test("show passphrase input on access policy by passphrase", () => {
-    const {container} = render(<AccessPolicySelection accessPolicy={AccessPolicy.BY_PASSPHRASE} onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={jest.fn()} />);
+    const {container} = render(<AccessPolicySelection accessPolicy="BY_PASSPHRASE" onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={jest.fn()} />);
     expect(container.querySelector(`[data-testid="passphrase-input"]`)).toBeDefined();
   });
 
   test("trigger on change on passphrase change", async () => {
     const onChangeOfPassphrase = jest.fn();
-    const {container} = render(
-      <AccessPolicySelection accessPolicy={AccessPolicy.BY_PASSPHRASE} onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={onChangeOfPassphrase} />
-    );
+    const {container} = render(<AccessPolicySelection accessPolicy="BY_PASSPHRASE" onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={onChangeOfPassphrase} />);
 
     fireEvent.change(container.querySelector(`[data-testid="passphrase-input"]`)!, {target: {value: "1234"}});
 
@@ -29,9 +26,7 @@ describe("AccessPolicySelection", () => {
 
   test("trigger on password change when random generator is clicked", async () => {
     const onChangeOfPassphrase = jest.fn();
-    const {container} = render(
-      <AccessPolicySelection accessPolicy={AccessPolicy.BY_PASSPHRASE} onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={onChangeOfPassphrase} />
-    );
+    const {container} = render(<AccessPolicySelection accessPolicy="BY_PASSPHRASE" onAccessPolicyChange={jest.fn()} passphrase="" onPassphraseChange={onChangeOfPassphrase} />);
 
     fireEvent.click(container.querySelector(`[data-testid="random-passwort-generator"]`)!);
 

diff --git a/src/routes/NewBoard/NewBoard.tsx b/src/routes/NewBoard/NewBoard.tsx
@@ -16,13 +16,13 @@ export const NewBoard = () => {
   const navigate = useNavigate();
   const [boardName, setBoardName] = useState<string | undefined>();
   const [columnTemplate, setColumnTemplate] = useState<string | undefined>(undefined);
-  const [accessPolicy, setAccessPolicy] = useState(0);
+  const [accessPolicy, setAccessPolicy] = useState<AccessPolicy>("PUBLIC");
   const [passphrase, setPassphrase] = useState("");
   const [extendedConfiguration, setExtendedConfiguration] = useState(false);
 
   async function onCreateBoard() {
     let additionalAccessPolicyOptions = {};
-    if (accessPolicy === AccessPolicy.BY_PASSPHRASE && Boolean(passphrase)) {
+    if (accessPolicy === "BY_PASSPHRASE" && Boolean(passphrase)) {
       additionalAccessPolicyOptions = {
         passphrase,
       };
@@ -32,7 +32,7 @@ export const NewBoard = () => {
       const boardId = await API.createBoard(
         boardName,
         {
-          type: AccessPolicy[accessPolicy],
+          type: accessPolicy,
           ...additionalAccessPolicyOptions,
         },
         columnTemplates[columnTemplate].columns
@@ -41,7 +41,7 @@ export const NewBoard = () => {
     }
   }
 
-  const isCreatedBoardDisabled = !columnTemplate || (accessPolicy === AccessPolicy.BY_PASSPHRASE && !passphrase);
+  const isCreatedBoardDisabled = !columnTemplate || (accessPolicy === "BY_PASSPHRASE" && !passphrase);
 
   return (
     <div className="new-board__wrapper">

diff --git a/src/store/features/board/types.ts b/src/store/features/board/types.ts
@@ -6,17 +6,13 @@ import {Reaction} from "../reactions";
 import {Vote} from "../votes";
 import {Voting} from "../votings";
 
-export enum AccessPolicy {
-  "PUBLIC" = 0,
-  "BY_PASSPHRASE" = 1,
-  "BY_INVITE" = 2,
-}
+export type AccessPolicy = "PUBLIC" | "BY_PASSPHRASE" | "BY_INVITE";
 
 export interface Board {
   id: string;
 
   name?: string;
-  accessPolicy: keyof typeof AccessPolicy;
+  accessPolicy: AccessPolicy;
   showAuthors: boolean;
   showNotesOfOtherUsers: boolean;
   showNoteReactions: boolean;