Stackable material & reservation material's children should handle click

So the problem was that "stackable material" and "reservation material"
are cards that need to be clickable, but they also have elements inside
that need to be clickable, sometimes with different effects.
We now make sure that the children elements handle the click events and
don't trigger the parent card onClick event handler.

src/apps/loan-list/materials/stackable-material/material-info.tsx

@@ -53,7 +53,7 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
         </div>
         <div className="list-reservation__about">
           <button
-            onClick={openDetailsModal}
+            onClick={() => openDetailsModal()}
             type="button"
             // This is to handle focus when more items are loaded via pagination
             // eslint-disable-next-line jsx-a11y/no-autofocus

src/apps/loan-list/materials/stackable-material/material-status.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useCallback } from "react";
+import React, { FC, ReactNode } from "react";
 import {
   formatDate,
   isDigital,
@@ -31,7 +31,7 @@ const MaterialStatus: FC<MaterialStatusProps> = ({
   const { dueDate, loanDate, loanId, identifier } = loan;
   const isStacked = materialsAreStacked(additionalMaterials);
 
-  const notificationClickEventHandler = useCallback(() => {
+  const notificationClickEventHandler = () => {
     if (isStacked && openDueDateModal && dueDate) {
       openDueDateModal(dueDate);
     }
@@ -41,14 +41,7 @@ const MaterialStatus: FC<MaterialStatusProps> = ({
     if (!isStacked && identifier) {
       openDetailsModal(identifier);
     }
-  }, [
-    isStacked,
-    openDueDateModal,
-    dueDate,
-    openDetailsModal,
-    loanId,
-    identifier
-  ]);
+  };
 
   if (!dueDate || !loanDate)
     return (

src/apps/loan-list/materials/stackable-material/stackable-material.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, FC } from "react";
+import React, { FC } from "react";
 import clsx from "clsx";
 import MaterialOverdueLink from "./material-overdue-link";
 import AdditionalMaterialsButton from "./additional-materials-button";
@@ -29,14 +29,14 @@ const StackableMaterial: FC<StackableMaterialProps & MaterialProps> = ({
 }) => {
   const { dueDate, identifier, periodical } = loan;
 
-  const openLoanDetailsModalHandler = useCallback(() => {
+  const openLoanDetailsModalHandler = () => {
     if (loanId) {
       openLoanDetailsModal(String(loanId));
     }
     if (identifier) {
       openLoanDetailsModal(identifier);
     }
-  }, [loanId, identifier, openLoanDetailsModal]);
+  };
 
   return (
     <div

src/apps/reservation-list/reservation-material/reservation-material.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, FC } from "react";
+import React, { FC } from "react";
 import fetchMaterial, {
   MaterialProps
 } from "../../loan-list/materials/utils/material-fetch-hoc";
@@ -19,9 +19,9 @@ const ReservationMaterial: FC<ReservationMaterialProps & MaterialProps> = ({
   focused,
   openReservationDetailsModal
 }) => {
-  const openDetailsModal = useCallback(() => {
+  const openDetailsModal = () => {
     openReservationDetailsModal(reservation);
-  }, [openReservationDetailsModal, reservation]);
+  };
 
   return (
     <li>

src/apps/reservation-list/reservation-material/reservation-status.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useCallback } from "react";
+import React, { FC, ReactNode } from "react";
 import ArrowButton from "../../../components/Buttons/ArrowButton";
 import { ReservationType } from "../../../core/utils/types/reservation-type";
 import StatusCircleIcon from "../../loan-list/materials/utils/status-circle-icon";
@@ -24,11 +24,11 @@ const ReservationStatus: FC<ReservationStatusProps> = ({
   label,
   children
 }) => {
-  const notificationClickEventHandler = useCallback(() => {
+  const notificationClickEventHandler = () => {
     if (openReservationDetailsModal && reservationInfo) {
       openReservationDetailsModal(reservationInfo);
     }
-  }, [openReservationDetailsModal, reservationInfo]);
+  };
 
   return (
     <div className="list-reservation__status">

src/components/Buttons/ArrowButton.tsx

@@ -20,7 +20,12 @@ const ArrowButton: React.FC<ArrowButtonProps> = ({
       aria-labelledby={arrowLabelledBy}
       style={pointer}
       type="button"
-      onClick={clickEventHandler}
+      onClick={(e) => {
+        if (clickEventHandler) {
+          e.stopPropagation();
+          clickEventHandler();
+        }
+      }}
     >
       <Arrow />
     </button>