🚨 [#582] Address linter errors

Addressed the linter errors to minimize the impact on the project.

Some lines are ignored because they are valid and consistent in the
project, but ignoring the rule as a whole would allow other mistakes to
fall through/go undetected.

frontend/.storybook/decorators.tsx

@@ -1,5 +1,4 @@
 import { StoryContext, StoryFn } from "@storybook/react";
-import * as React from "react";
 import {
   RouterProvider,
   createBrowserRouter,

frontend/.storybook/playFunctions.ts

@@ -176,7 +176,6 @@ export const clickCheckbox: PlayFunction<ReactRenderer> = async (context) => {
  */
 export const clickElement: PlayFunction<ReactRenderer> = async (context) => {
   const {
-    checked = false,
     elementIndex = 0,
     inTBody = false,
     role,
@@ -237,12 +236,13 @@ export const fillForm: PlayFunction<ReactRenderer> = async (context) => {
         : fields[0]; // Exception if not found.
 
     switch (typeof value) {
-      case "boolean":
+      case "boolean": {
         const checkbox = field as HTMLInputElement;
         if (checkbox.checked !== value) {
           await userEvent.click(checkbox, { delay: 100 });
         }
         break;
+      }
       case "string":
         if ((field as HTMLSelectElement).options) {
           const select = field as HTMLSelectElement;

frontend/src/App.test.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react";
-import * as React from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 import App from "./App";

frontend/src/components/DestructionListAuditLog/DestructionListAuditLogDetails.stories.tsx

@@ -45,6 +45,6 @@ export const AuditLogDetails: StoryObj<typeof DestructionListAuditLogDetails> =
         canvas.getByText("31/12/2021", { exact: false }),
       ).toBeInTheDocument();
       expect(canvas.getByText("This is a comment")).toBeInTheDocument();
-      expect(canvas.getByText("10")).toBeInTheDocument;
+      expect(canvas.getByText("10")).toBeInTheDocument();
     },
   };

frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx

@@ -117,7 +117,7 @@ export function DestructionListReviewer({
           const data = await e.json();
           const errors = collectErrors(data).join("\n");
           alert("Foutmelding", data.detail || errors, "Ok");
-        } catch (e) {
+        } catch {
           alert(
             "Foutmelding",
             "Er is een fout opgetreden bij het bewerken van de mede beoordelaars!",
@@ -140,7 +140,7 @@ export function DestructionListReviewer({
           const data = await e.json();
           const errors = collectErrors(data).join("\n");
           alert("Foutmelding", data.detail || errors, "Ok");
-        } catch (e) {
+        } catch {
           alert(
             "Foutmelding",
             "Er is een fout opgetreden bij het bewerken van de beoordelaar!",

frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx

@@ -149,7 +149,7 @@ export function DestructionListToolbar({
           const data = await e.json();
           const errors = collectErrors(data).join("\n");
           alert("Foutmelding", data.detail || errors, "Ok");
-        } catch (e) {
+        } catch {
           alert(
             "Foutmelding",
             "Er is een fout opgetreden bij het bewerken van de naam van de vernietigingslijst.",

frontend/src/contexts/ZaakSelectionContext.test.tsx

@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
-import exp from "node:constants";
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
 import {
   DEFAULT_ZAAK_SELECTION_CONTEXT,

frontend/src/hooks/useCoReviews.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { CoReview, listCoReviews } from "../lib/api/coReview";
 import { DestructionList } from "../lib/api/destructionLists";

frontend/src/hooks/useDestructionListCoReviewers.ts

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import {
   DestructionList,
   DestructionListAssignee,
+  listDestructionListCoReviewers,
 } from "../lib/api/destructionLists";
-import { listDestructionListCoReviewers } from "../lib/api/destructionLists";
 import { useAlertOnError } from "./useAlertOnError";
 
 /**

frontend/src/hooks/useZaakSelection.test.ts

@@ -2,7 +2,6 @@ import { act, renderHook, waitFor } from "@testing-library/react";
 
 import { ZaakSelectionContextProvider } from "../contexts";
 import { ZaakIdentifier } from "../lib/zaakSelection";
-import { Zaak } from "../types";
 import { useZaakSelection } from "./useZaakSelection";
 
 jest.mock("react-router-dom", () => ({

frontend/src/hooks/useZaakSelection.ts

@@ -232,19 +232,6 @@ export function useZaakSelection<T = unknown>(
     throw error;
   };
 
-  /**
-   * Converts selection to string for camparison.
-   * @param selection
-   */
-  const _serializeSelection = (selection: ZaakSelection): string => {
-    return Object.entries(selection)
-      .map(([url, { selected, detail }]) => {
-        const json = detail ? JSON.stringify(detail) : "";
-        return `${url}${selected}${json}`;
-      })
-      .join();
-  };
-
   /**
    * @param size
    * @private
@@ -315,6 +302,7 @@ export function useZaakSelection<T = unknown>(
       ? await Promise.all(detailPromises)
       : undefined;
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     selected
       ? await addToZaakSelection(
           storageKey,

frontend/src/lib/api/zaakSelection.ts

@@ -12,6 +12,7 @@ export async function getSelection<DetailType = unknown>(
   signal?: AbortSignal,
 ) {
   const params = new URLSearchParams(exp as Record<string, string>);
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   selectedOnly && params.set("selected", "true");
 
   const response = await request(
@@ -37,6 +38,7 @@ export async function getSelectionItems<DetailType = unknown>(
 ) {
   const items = zaken.map((zaak) => _getZaakUrl(zaak));
   const params = new URLSearchParams();
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   selectedOnly && params.set("selected", "true");
   const response = await request(
     "POST",

frontend/src/lib/auth/permissions.test.ts

@@ -284,13 +284,11 @@ DESTRUCTION_LIST_STATUSES.forEach((status) => {
   describe(`canUpdateDestructionList() with destruction list status: ${status}`, () => {
     let destructionList: DestructionList;
     let user: User;
-    let anotherUser: User;
 
     beforeEach(() => {
       user = userFactory({
         role: { canStartDestruction: true, canReviewDestruction: true },
       });
-      anotherUser = { ...user, pk: 2 };
       destructionList = destructionListFactory({
         status,
         assignee: user,

frontend/src/lib/format/date.ts

@@ -106,6 +106,7 @@ export function timeAgo(
         result = `over ${intervalCount}${shortFormat ? "" : " "}${label}`;
       } else {
         // Special case to not include "geleden" for the short format
+        // eslint-disable-next-line max-depth
         if (shortFormat) {
           result = `${intervalCount}${shortFormat ? "" : " "}${label}`;
         } else {

frontend/src/pages/destructionlist/abstract/BaseListView.tsx

@@ -14,9 +14,12 @@ import { DestructionListToolbar } from "../../../components";
 import {
   ZaakSelectionDetailGetter,
   ZaakSelectionZaakFilter,
+  useFields,
+  useFilter,
+  usePage,
+  useSort,
   useZaakSelection,
 } from "../../../hooks";
-import { useFields, useFilter, usePage, useSort } from "../../../hooks";
 import { DestructionList } from "../../../lib/api/destructionLists";
 import { Review } from "../../../lib/api/review";
 import { PaginatedZaken } from "../../../lib/api/zaken";

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
 
 import {
   ClearSessionStorageDecorator,
@@ -12,11 +11,7 @@ import {
   fillForm,
 } from "../../../../.storybook/playFunctions";
 import { paginatedZakenFactory } from "../../../fixtures/paginatedZaken";
-import {
-  beoordelaarFactory,
-  recordManagerFactory,
-  usersFactory,
-} from "../../../fixtures/user";
+import { usersFactory } from "../../../fixtures/user";
 import { getZaakSelection } from "../../../lib/zaakSelection";
 import {
   DESTRUCTION_LIST_CREATE_KEY,

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import {
   Outlet,
   useLoaderData,

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

@@ -1,5 +1,5 @@
 import { ButtonProps, Solid, TypedField } from "@maykin-ui/admin-ui";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import {
   useNavigation,
   useRouteLoaderData,

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

@@ -1,5 +1,5 @@
 import { Outline, Toolbar, TypedField } from "@maykin-ui/admin-ui";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useRevalidator, useRouteLoaderData } from "react-router-dom";
 
 import { useZaakReviewStatuses, useZaakSelection } from "../../../../../hooks";

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

@@ -1,18 +1,13 @@
 import { ActionFunctionArgs, redirect } from "react-router-dom";
 
 import { TypedAction } from "../../../hooks";
-import {
-  CoReview,
-  CoReviewBase,
-  createCoReview,
-} from "../../../lib/api/coReview";
+import { CoReviewBase, createCoReview } from "../../../lib/api/coReview";
 import {
   Review,
   ZaakReview,
   createDestructionListReview,
 } from "../../../lib/api/review";
-import { RestBackend } from "../../../lib/zaakSelection";
-import { clearZaakSelection } from "../../../lib/zaakSelection";
+import { RestBackend, clearZaakSelection } from "../../../lib/zaakSelection";
 import { getDestructionListReviewKey } from "./DestructionListReview";
 
 export type DestructionListReviewActionContext = {

frontend/src/pages/login/Login.tsx

@@ -1,5 +1,4 @@
 import {
-  FormProps,
   LoginTemplate,
   LoginTemplateProps,
   forceArray,