refactor: update reader component props and rename asset type

danskernesdigitalebibliotek · Nov 22, 2024 · 0314c4e · 0314c4e
1 parent b6b2519
commit 0314c4e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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()