From 0314c4e8b7f79778a10a6c11f67e1ea1c9a79012 Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Fri, 22 Nov 2024 16:11:23 +0100
Subject: [PATCH] refactor: update reader component props and rename asset type

---
 .../pages/workPageLayout/WorkPageLayout.tsx    |  2 +-
 .../shared/publizonReader/PublizonReader.tsx   | 18 ++++++++++--------
 components/shared/publizonReader/helper.ts     |  8 ++++----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/pages/workPageLayout/WorkPageLayout.tsx b/components/pages/workPageLayout/WorkPageLayout.tsx
index b9d9e8e4..665fa1e4 100644
--- a/components/pages/workPageLayout/WorkPageLayout.tsx
+++ b/components/pages/workPageLayout/WorkPageLayout.tsx
@@ -27,7 +27,7 @@ function WorkPageLayout({ wid }: { wid: string }) {
       {identifier && (
         <Button ariaLabel="Prøv ebog" asChild>
           <SmartLink linkType="external" href={url}>
-            Read
+            Prøv ebog
           </SmartLink>
         </Button>
       )}
diff --git a/components/shared/publizonReader/PublizonReader.tsx b/components/shared/publizonReader/PublizonReader.tsx
index 45eb891d..2dcde1b0 100644
--- a/components/shared/publizonReader/PublizonReader.tsx
+++ b/components/shared/publizonReader/PublizonReader.tsx
@@ -9,15 +9,17 @@ type ReaderType =
   | {
       type: "demo"
       identifier: string
+      orderId?: never
       onBackCallback: () => void
     }
   | {
       type: "rent"
+      identifier?: never
       orderId: string
       onBackCallback: () => void
     }
 
-const Reader = (props: ReaderType) => {
+const Reader = ({ type, onBackCallback, identifier, orderId }: ReaderType) => {
   useEffect(() => {
     readerAssets.forEach(appendAsset)
 
@@ -26,7 +28,7 @@ const Reader = (props: ReaderType) => {
     // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-shadow
     window.onReaderBackCallback = () => {
-      props.onBackCallback()
+      onBackCallback()
     }
 
     return () => {
@@ -35,16 +37,16 @@ const Reader = (props: ReaderType) => {
       delete window.onReaderBackCallback
       readerAssets.forEach(removeAsset)
     }
-  }, [props])
+  }, [])
 
-  if (props.type === "rent") {
+  if (type === "rent") {
     return (
       <div>
-        <p>orderId: {props.orderId}</p>
+        <p>orderId: {orderId}</p>
         <div
           id="pubhub-reader"
           // eslint-disable-next-line react/no-unknown-property
-          order-id={props.orderId}
+          order-id={orderId}
           role="button"
           tabIndex={0}
           close-href="javascript:window.onReaderBackCallback()"
@@ -54,14 +56,14 @@ const Reader = (props: ReaderType) => {
     )
   }
 
-  if (props.type === "demo") {
+  if (type === "demo") {
     return (
       <div
         id="pubhub-reader"
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         // eslint-disable-next-line react/no-unknown-property
-        identifier={props.identifier}
+        identifier={identifier}
         close-href="javascript:window.onReaderBackCallback()"
         role="button"
         tabIndex={0}
diff --git a/components/shared/publizonReader/helper.ts b/components/shared/publizonReader/helper.ts
index fd6cc8a2..bf68e564 100644
--- a/components/shared/publizonReader/helper.ts
+++ b/components/shared/publizonReader/helper.ts
@@ -1,9 +1,9 @@
-type AssetType = {
+type TAssetType = {
   src: string
   type: "script" | "link"
 }
 
-export const readerAssets: AssetType[] = [
+export const readerAssets: TAssetType[] = [
   {
     src: "https://reader.pubhub.dk/2.2.0/js/chunk-vendors.js",
     type: "script",
@@ -22,7 +22,7 @@ export const readerAssets: AssetType[] = [
   },
 ]
 
-export const appendAsset = ({ src, type }: AssetType) => {
+export const appendAsset = ({ src, type }: TAssetType) => {
   if (type === "script") {
     const scriptElement = document.createElement("script")
     scriptElement.src = src
@@ -40,7 +40,7 @@ export const appendAsset = ({ src, type }: AssetType) => {
   }
 }
 
-export const removeAsset = ({ src, type }: AssetType) => {
+export const removeAsset = ({ src, type }: TAssetType) => {
   if (type === "script") {
     const scriptElement = document.querySelector(`script[src="${src}"]`)
     scriptElement?.remove()