From ac4ac32c762a6764f0170c7e024eff5e33f47cd8 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Fri, 22 Nov 2024 12:51:32 +0100
Subject: [PATCH] Remove `ReaderModal` and Introduce `MaterialSecondaryLink`

After the `Reader` is no longer an app, the `ReaderModal` is no longer in use and has been removed.

A new component, `MaterialSecondaryLink`, has been added. It follows the same structure as `MaterialSecondaryButton` but is designed for links instead.

I considered reverting the `MaterialSecondaryButton` introduced in an earlier commit, but I believe the new structure is more readable. Additionally, it may be useful for the `Player` app/component in the future.

- Remove unnecessary `isFullScreen`  from `Modal`

With `Reader` now functioning as an  app on its own page, this property is no longer required.
---
 src/apps/material/material.tsx                |  8 ----
 .../material/Reader-modal/ReaderModal.tsx     | 48 -------------------
 .../generic/MaterialSecondaryLink.tsx         | 43 +++++++++++++++++
 .../online/MaterialButtonReaderTeaser.tsx     | 13 ++---
 src/core/utils/modal.tsx                      |  8 +---
 5 files changed, 47 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/material/Reader-modal/ReaderModal.tsx
 create mode 100644 src/components/material/material-buttons/generic/MaterialSecondaryLink.tsx

diff --git a/src/apps/material/material.tsx b/src/apps/material/material.tsx
index 54d8c40fea..5281d969c4 100644
--- a/src/apps/material/material.tsx
+++ b/src/apps/material/material.tsx
@@ -33,14 +33,11 @@ import {
   getBestMaterialTypeForWork,
   getDetailsListData,
   getInfomediaIds,
-  getManifestationIsbn,
   getManifestationsOrderByTypeAndYear,
   isParallelReservation
 } from "./helper";
 import MaterialDisclosure from "./MaterialDisclosure";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
-import ReaderModal from "../../components/material/Reader-modal/ReaderModal";
-import { hasReaderTeaser } from "../reader/helper";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -196,11 +193,6 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
             setSelectedPeriodical={setSelectedPeriodical}
           />
         )}
-        {hasReaderTeaser(selectedManifestations) && (
-          <ReaderModal
-            identifier={getManifestationIsbn(selectedManifestations[0])}
-          />
-        )}
       </MaterialHeader>
       <MaterialDescription pid={pid} work={work} />
       {/* Since we cannot trust the editions for global manifestations */}
diff --git a/src/components/material/Reader-modal/ReaderModal.tsx b/src/components/material/Reader-modal/ReaderModal.tsx
deleted file mode 100644
index 46fa5327ae..0000000000
--- a/src/components/material/Reader-modal/ReaderModal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
-import Modal from "../../../core/utils/modal";
-import { useText } from "../../../core/utils/text";
-import Reader from "../../reader-player/Reader";
-import { closeModal } from "../../../core/modal.slice";
-
-type ReaderModalType = {
-  identifier: string;
-};
-
-const ReaderModal = ({ identifier }: ReaderModalType) => {
-  const t = useText();
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    // Attach the closeModal function to the window object to be able to close the modal
-    // from the reader / player.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    window.closeModal = (modalId: string) => {
-      dispatch(closeModal({ modalId }));
-    };
-
-    return () => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      delete window.closeModal;
-    };
-  }, [dispatch]);
-
-  return (
-    <Modal
-      isFullScreen
-      modalId={`reader-modal-${identifier}`}
-      screenReaderModalDescriptionText={t("readerModalDescriptionText")}
-      dataCy="reader-modal"
-      // We don't want to show the close button in the reader modal
-      // as it's already present in the reader itself.
-      closeModalAriaLabelText=""
-    >
-      <Reader identifier={identifier} />
-    </Modal>
-  );
-};
-
-export default ReaderModal;
diff --git a/src/components/material/material-buttons/generic/MaterialSecondaryLink.tsx b/src/components/material/material-buttons/generic/MaterialSecondaryLink.tsx
new file mode 100644
index 0000000000..5f4ba610db
--- /dev/null
+++ b/src/components/material/material-buttons/generic/MaterialSecondaryLink.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { ButtonSize } from "../../../../core/utils/types/button";
+import LinkButton from "../../../Buttons/LinkButton";
+
+interface MaterialSecondaryLinkProps {
+  label: string;
+  size: ButtonSize;
+  url: URL;
+  dataCy?: string;
+}
+
+const MaterialSecondaryLink: FC<MaterialSecondaryLinkProps> = ({
+  label,
+  size,
+  url,
+  dataCy
+}) => {
+  if (size !== "small") {
+    return (
+      <LinkButton
+        url={url}
+        buttonType="none"
+        variant="outline"
+        size="large"
+        dataCy={dataCy}
+      >
+        {label}
+      </LinkButton>
+    );
+  }
+
+  return (
+    <a
+      href={url.toString()}
+      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
+      data-cy={dataCy}
+    >
+      {label}
+    </a>
+  );
+};
+
+export default MaterialSecondaryLink;
diff --git a/src/components/material/material-buttons/online/MaterialButtonReaderTeaser.tsx b/src/components/material/material-buttons/online/MaterialButtonReaderTeaser.tsx
index c1959b6a31..7e6b450fd5 100644
--- a/src/components/material/material-buttons/online/MaterialButtonReaderTeaser.tsx
+++ b/src/components/material/material-buttons/online/MaterialButtonReaderTeaser.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { useModalButtonHandler } from "../../../../core/utils/modal";
 import { useText } from "../../../../core/utils/text";
 import { ButtonSize } from "../../../../core/utils/types/button";
-import MaterialSecondaryButton from "../generic/MaterialSecondaryButton";
+import MaterialSecondaryLink from "../generic/MaterialSecondaryLink";
 
 type MaterialButtonOnlineTeaserType = {
   identifier: string;
@@ -16,19 +15,13 @@ const MaterialButtonReaderTeaser = ({
   dataCy = "material-buttons-reader-teaser"
 }: MaterialButtonOnlineTeaserType) => {
   const t = useText();
-  const { open } = useModalButtonHandler();
-
-  const onClick = () => {
-    open(`reader-modal-${identifier}`);
-  };
 
   return (
-    <MaterialSecondaryButton
+    <MaterialSecondaryLink
+      url={new URL(`/reader?identifier=${identifier}`, window.location.href)}
       label={t("onlineMaterialTeaserText")}
       size={size}
-      onClick={onClick}
       dataCy={dataCy}
-      ariaDescribedBy={t("onlineMaterialTeaserText")}
     />
   );
 };
diff --git a/src/core/utils/modal.tsx b/src/core/utils/modal.tsx
index f836ba3bdc..69c5cc01cb 100644
--- a/src/core/utils/modal.tsx
+++ b/src/core/utils/modal.tsx
@@ -24,7 +24,6 @@ type ModalProps = {
   eventCallbacks?: {
     close?: () => void;
   };
-  isFullScreen?: boolean;
 };
 
 export interface ModalIdsProps {
@@ -41,8 +40,7 @@ function Modal({
   classNames,
   isSlider,
   dataCy = "modal",
-  eventCallbacks,
-  isFullScreen
+  eventCallbacks
 }: ModalProps) {
   const dispatch = useDispatch();
   const { modalIds } = useSelector((s: ModalIdsProps) => s.modal);
@@ -82,10 +80,6 @@ function Modal({
     dispatch(closeModal({ modalId }));
   };
 
-  if (isFullScreen) {
-    return <div className="modal-fullscreen">{children}</div>;
-  }
-
   return (
     <FocusTrap
       focusTrapOptions={{