fix: update ESLint rules and update inflicted files accordingly

eslint.config.mjs

@@ -21,7 +21,9 @@ export default [
       "src/core/cover-service-api/cover-service.ts",
       "src/core/dpl-cms/model",
       "src/core/dpl-cms/dpl-cms.ts",
+      "src/core/fbs/model",
       "src/core/fbs/fbs.ts",
+      "src/core/publizon/model",
       "src/core/publizon/publizon.ts",
       "postcss.config.js"
     ]
@@ -33,7 +35,12 @@ export default [
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "plugin:cypress/recommended"
+    "plugin:cypress/recommended",
+    "plugin:import/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended"
   ),
   {
     plugins: {
@@ -65,7 +72,16 @@ export default [
       react: {
         version: "detect" // Automatically detect the React version
       },
-      "import/core-modules": ["vitest"]
+      "import/core-modules": ["vitest"],
+      "import/resolver": [
+        "webpack",
+        {
+          node: {
+            extensions: [".ts", ".tsx", ".js", ".jsx"],
+            moduleDirectory: ["src", "node_modules"]
+          }
+        }
+      ]
     },
 
     rules: {

package.json

@@ -101,6 +101,7 @@
     "dotenv": "^16.4.7",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import": "^2.31.0",

src/apps/dashboard/dashboard-notification-list/Notifications.tsx

@@ -34,8 +34,8 @@ const Notifications: FC<NotificationsProps> = ({
   if (isLoading && displayedNotifications.length === 0) {
     return (
       <>
-        {[0, 1].map(() => {
-          return <NotificationSkeleton />;
+        {[0, 1].map((number) => {
+          return <NotificationSkeleton key={number} />;
         })}
       </>
     );

src/apps/favorites-list-material-component/FavoritesListMaterialComponent.tsx

@@ -40,7 +40,12 @@ const FavoritesListMaterialComponent: FC = () => {
       </div>
       <ul className="recommender__grid">
         {materials.map((pid) => (
-          <SimpleMaterialAdapter app="favorites-list-mc" bright pid={pid} />
+          <SimpleMaterialAdapter
+            key={pid}
+            app="favorites-list-mc"
+            bright
+            pid={pid}
+          />
         ))}
       </ul>
     </div>

src/apps/favorites-list/FavoritesList.tsx

@@ -51,8 +51,8 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
         {/*
           We'll show 5 skeleton cards which should cover most screens.
         */}
-        {[...Array(5)].map(() => (
-          <li className="content-list__item">
+        {[...Array(5)].map((_, index) => (
+          <li key={index} className="content-list__item">
             <CardListItemSkeleton />
           </li>
         ))}

src/apps/loan-list/list/loan-list-items.tsx

@@ -49,7 +49,7 @@ const LoanListItems: FC<LoanListItemProps> = ({
           );
           const loan = loansUniqueDueDate[0] || {};
           return (
-            <ul>
+            <ul key={i}>
               {loan && (
                 <StackableMaterial
                   focused={i === indexOfFocus}

src/apps/loan-list/materials/selectable-material/StatusMessage.tsx

@@ -18,9 +18,13 @@ const StatusMessage: FC<StatusMessageProps> = ({
   return (
     <>
       {renewalStatusList &&
-        renewalStatusList.map((text) => {
+        renewalStatusList.map((text, index) => {
           if (text !== "deniedOtherReason") {
-            return <span className={className}>{getStatusText(text, t)}</span>;
+            return (
+              <span key={index} className={className}>
+                {getStatusText(text, t)}
+              </span>
+            );
           }
           return null;
         })}

src/apps/loan-list/materials/utils/digital-material-fetch-hoc.tsx

@@ -14,17 +14,13 @@ const fetchDigitalMaterial =
     Component: ComponentType<P & MaterialProps>,
     LoadingComponent?: ComponentType
   ): FC<P & InputProps> =>
+  // TODO: rewrite the code below and remove the eslint-disable-next-line react/display-name comment
+  // eslint-disable-next-line react/display-name
   ({ item, ...props }: InputProps) => {
     // If this is a physical book, another HOC fetches the data and this
     // HOC just returns the component
     if (item.faust) {
-      return (
-        <Component
-          /* eslint-disable-next-line react/jsx-props-no-spreading */
-          {...(props as P)}
-          item={item}
-        />
-      );
+      return <Component {...(props as P)} item={item} />;
     }
 
     if (item.identifier) {
@@ -59,12 +55,7 @@ const fetchDigitalMaterial =
       if (!digitalMaterial) return null;
 
       return (
-        <Component
-          /* eslint-disable-next-line react/jsx-props-no-spreading */
-          {...(props as P)}
-          item={item}
-          material={digitalMaterial}
-        />
+        <Component {...(props as P)} item={item} material={digitalMaterial} />
       );
     }
     return null;

src/apps/loan-list/materials/utils/material-fetch-hoc.tsx

@@ -23,17 +23,13 @@ const fetchMaterial =
     Component: ComponentType<P & MaterialProps>,
     FallbackComponent?: ComponentType
   ): FC<P & InputProps> =>
+  // TODO: rewrite the code below and remove the eslint-disable-next-line react/display-name comment
+  // eslint-disable-next-line react/display-name
   ({ item, ...props }: InputProps) => {
     // If this is a digital book, another HOC fetches the data and this
     // HOC just returns the component
     if (item?.identifier) {
-      return (
-        <Component
-          /* eslint-disable-next-line react/jsx-props-no-spreading */
-          {...(props as P)}
-          item={item}
-        />
-      );
+      return <Component {...(props as P)} item={item} />;
     }
 
     if (item?.faust) {
@@ -77,14 +73,7 @@ const fetchMaterial =
       // in cases where the material is not found we return null, else we would load forever
       if (!material) return null;
 
-      return (
-        <Component
-          /* eslint-disable-next-line react/jsx-props-no-spreading */
-          {...(props as P)}
-          item={item}
-          material={material}
-        />
-      );
+      return <Component {...(props as P)} item={item} material={material} />;
     }
     return null;
   };

src/apps/material-grid/MaterialGrid.tsx

@@ -60,7 +60,6 @@ const MaterialGrid: React.FC<MaterialGridProps> = ({
   }
 
   if (!materials.length) {
-    // eslint-disable-next-line no-console
     console.warn(`No materials to show for MaterialGrid: ${title}`);
     return null;
   }

src/apps/material-grid/MaterialGridSkeleton.tsx

@@ -10,8 +10,8 @@ const MaterialGridSkeleton: FC<MaterialGridSkeletonType> = ({ title }) => {
     <div className="material-grid">
       {title && <div className="material-grid__title">{title}</div>}
       <div className="material-grid__items">
-        {[...Array(4)].map(() => (
-          <div className="material-grid__item">
+        {[...Array(4)].map((_, index) => (
+          <div key={index} className="material-grid__item">
             <RecommendedMaterialSkeleton partOfGrid />
           </div>
         ))}

src/apps/material-search/MaterialSearch.stories.tsx

@@ -76,7 +76,6 @@ const MaterialSearchHiddenInputs = ({
           />
         </label>
       </div>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <MaterialSearch uniqueIdentifier={uniqueIdentifier} {...args} />
     </div>
   );
@@ -247,7 +246,6 @@ export const WithPreviouslySelectedValues: Story = {
     const defaultMaterialType = previouslySelectedMaterialType;
     const modifiedProps = { ...args, defaultWorkId, defaultMaterialType };
 
-    // eslint-disable-next-line react/jsx-props-no-spreading
     return <MaterialSearchHiddenInputs {...modifiedProps} />;
   }
 };
@@ -261,7 +259,6 @@ export const materialWithInvalidType: Story = {
     const defaultMaterialType = "invalid-type";
     const modifiedProps = { ...args, defaultWorkId, defaultMaterialType };
 
-    // eslint-disable-next-line react/jsx-props-no-spreading
     return <MaterialSearchHiddenInputs {...modifiedProps} />;
   }
 };
@@ -275,7 +272,6 @@ export const materialWithInvalidWorkId: Story = {
     const defaultMaterialType = previouslySelectedMaterialType;
     const modifiedProps = { ...args, defaultWorkId, defaultMaterialType };
 
-    // eslint-disable-next-line react/jsx-props-no-spreading
     return <MaterialSearchHiddenInputs {...modifiedProps} />;
   }
 };

src/apps/material-search/useGetHiddenInputs.tsx

@@ -24,7 +24,6 @@ const useGetHiddenInputs = (uniqueIdentifier: string): HiddenInputsResult => {
     ) as HTMLInputElement | null;
 
     if (!workElement) {
-      // eslint-disable-next-line no-console
       console.debug(
         `Could not find input for work ID with unique identifier: ${uniqueIdentifier}`
       );
@@ -34,7 +33,6 @@ const useGetHiddenInputs = (uniqueIdentifier: string): HiddenInputsResult => {
     }
 
     if (!materialElement) {
-      // eslint-disable-next-line no-console
       console.debug(
         `Could not find input for material type with unique identifier: ${uniqueIdentifier}`
       );

src/apps/material-search/useUpdateFields.ts

@@ -41,7 +41,6 @@ const useUpdateFields = ({
       }
 
       // Leaving a debug message hif the input element is not found.
-      // eslint-disable-next-line no-console
       console.debug(
         `Could not find input element to update with ID: ${uniqueIdentifier}`
       );

src/apps/material/material.tsx

@@ -163,6 +163,7 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
       >
         {manifestations.map((manifestation) => (
           <ReservationFindOnShelfModals
+            key={manifestation.pid}
             patron={userData?.patron}
             manifestations={[manifestation]}
             selectedPeriodical={selectedPeriodical}

src/apps/menu/menu-logged-in/MenuLoggedInContent.tsx

@@ -101,6 +101,7 @@ const MenuLoggedInContent: FC<MenuLoggedInContentProps> = ({ pageSize }) => {
           <ul className="modal-profile__links">
             {menuNavigationData.map((menuNavigationItem) => (
               <MenuNavigationItem
+                key={menuNavigationItem.dataId}
                 menuNavigationItem={menuNavigationItem}
                 loansCount={loans.length}
                 reservationCount={reservations.length}

src/apps/menu/menu.stories.tsx

@@ -218,7 +218,6 @@ export const UserMenu: Story = {
     searchHeaderFavoritesText: "Liked"
   },
   render: (args) => {
-    // eslint-disable-next-line react/jsx-props-no-spreading
     const menu = <WrappedMenu {...args} />;
     // We use the Header component as context to the search bar.
     // It is the Header that creates the Search bar's design -

src/apps/opening-hours-editor/DialogFormEdit.tsx

@@ -45,7 +45,6 @@ const DialogFormEdit: React.FC<DialogFormEditProps> = ({
     endTime
   }: EventFormOnSubmitType) => {
     if (!eventInfo.start || !eventInfo.end) {
-      // eslint-disable-next-line no-alert
       alert(t("openingHoursInvalidEventText"));
       return;
     }
@@ -120,7 +119,6 @@ const DialogFormEdit: React.FC<DialogFormEditProps> = ({
   };
 
   if (!eventInfo.start || !eventInfo.end) {
-    // eslint-disable-next-line no-alert
     alert(t("openingHoursInvalidEventText"));
     return null;
   }

src/apps/opening-hours-editor/helper.ts

@@ -187,7 +187,7 @@ export const getInitialDateFromUrl = (): Date | null => {
   if (!Number.isNaN(date.getTime())) {
     return date;
   }
-  // eslint-disable-next-line no-console
+
   console.debug(
     "Invalid date format in URL parameter: initialDate =",
     initialDateString

src/apps/opening-hours-editor/useOpeningHoursEditor.tsx

@@ -56,7 +56,6 @@ const useOpeningHoursEditor = () => {
   };
 
   const onError = (message: string) => {
-    // eslint-disable-next-line no-alert
     alert(message);
     // reload page to get the latest data
     window.location.reload();

src/apps/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx

@@ -56,6 +56,5 @@ export default meta;
 type Story = StoryObj<typeof OpeningHoursSidebar>;
 
 export const App: Story = {
-  // eslint-disable-next-line react/jsx-props-no-spreading
   render: (args) => <OpeningHoursSidebar {...args} />
 };

src/apps/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx

@@ -10,7 +10,6 @@ const OpeningHoursSidebarDetails: FC<
     <div className="opening-hours-sidebar-details__content">
       <dl className="opening-hours-sidebar-details__list">
         {openingHoursData.map(({ term, description }, i) => (
-          // eslint-disable-next-line react/no-array-index-key
           <div key={i} className="opening-hours-sidebar-details__item">
             <dt className="opening-hours-sidebar-details__term">{term}</dt>
             <dd className="opening-hours-sidebar-details__description">

src/apps/opening-hours/OpeningHourWeekListSkeleton.tsx

@@ -4,14 +4,14 @@ import clsx from "clsx";
 const OpeningHourWeekListSkeleton = () => {
   return (
     <ul className="opening-hours__content">
-      {[...Array(5)].map(() => (
-        <li className="opening-hours__row">
+      {[...Array(5)].map((_, index) => (
+        <li key={index} className="opening-hours__row">
           <div className="opening-hours__individual-day ssc-line ssc-line-headline" />
           <ul>
-            {[...Array(3)].map((_, index) => {
+            {[...Array(3)].map((_, indexInner) => {
               const isOdd = index % 2 === 0;
               return (
-                <li>
+                <li key={indexInner}>
                   <div
                     className={clsx("ssc-line", {
                       "ssc-line--odd": !isOdd

src/apps/patron-page/util/BranchesDropdown.tsx

@@ -58,6 +58,7 @@ const BranchesDropdown: FC<BranchesDropdownProps> = ({
               )}
               {branches.map(({ branchId, title }) => (
                 <option
+                  key={branchId}
                   value={branchId}
                   selected={selected === branchId}
                   className="dropdown__option"

src/apps/recommendation/recommendation.stories.tsx

@@ -60,6 +60,5 @@ export const Skeleton: Story = {
     ...Default.args
   },
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
   render: (args) => <RecommendationSkeleton {...args} />
 };

src/apps/recommender/InspirationRecommender.tsx

@@ -42,6 +42,7 @@ const InspirationRecommender: FC = () => {
         {recommendedMaterials &&
           recommendedMaterials.search.works.map((work) => (
             <RecommendMaterial
+              key={work.workId}
               app="inspiration-recommender"
               work={work as Work}
             />

src/apps/recommender/RecommendList.tsx

@@ -51,7 +51,11 @@ const RecommendList: FC<RecommendListProps & MaterialProps> = ({
       <ul className="recommender__triple-grid">
         {recommendedMaterials &&
           recommendedMaterials.recommend.result.map(({ work }) => (
-            <RecommendMaterial work={work as Work} app="recommender" />
+            <RecommendMaterial
+              key={work.workId}
+              work={work as Work}
+              app="recommender"
+            />
           ))}
       </ul>
     </>

src/apps/reservation-list/modal/reservation-details/physical-list-details.tsx

@@ -83,7 +83,7 @@ const PhysicalListDetails: FC<PhysicalListDetailsProps & MaterialProps> = ({
   const saveChanges = (formSelectValue: FormSelectValue) => {
     setReservationStatus("pending");
     if (!reservationIds || reservationIds.length === 0 || !selectedBranch) {
-      console.error("Missing reservationId or selectedBranch"); // eslint-disable-line no-console
+      console.error("Missing reservationId or selectedBranch");
       setReservationStatus("error");
       return;
     }