fix: consolidate functionality used for adding third party scripts

components/shared/publizonPlayer/PublizonPlayer.tsx

@@ -2,7 +2,9 @@
 
 import React, { useEffect } from "react"
 
-import { appendAsset, assets, removeAsset } from "./helper"
+import { appendAsset, removeAsset } from "@/lib/helpers/helper.scripts"
+
+import { assets } from "./helper"
 
 // Define mutually exclusive types for identifier and orderId
 type ReaderType =

components/shared/publizonPlayer/helper.ts

@@ -1,29 +1,8 @@
-type TAssetType = {
-  src: string
-  type: "script" | "link"
-}
+import { TAssetType } from "@/lib/helpers/helper.scripts"
 
 export const assets: TAssetType[] = [
   {
     src: "https://play.pubhub.dk/1.3.0/js/player-kernel.min.js",
     type: "script",
   },
 ]
-
-export const appendAsset = ({ src, type }: TAssetType) => {
-  if (type === "script") {
-    const scriptElement = document.createElement("script")
-    scriptElement.src = src
-    scriptElement.defer = true
-    scriptElement.async = false
-    scriptElement.type = "module"
-    document.head.appendChild(scriptElement)
-  }
-}
-
-export const removeAsset = ({ src, type }: TAssetType) => {
-  if (type === "script") {
-    const scriptElement = document.querySelector(`script[src="${src}"]`)
-    scriptElement?.remove()
-  }
-}

components/shared/publizonReader/PublizonReader.tsx

@@ -2,7 +2,9 @@
 
 import React, { useEffect } from "react"
 
-import { appendAsset, readerAssets, removeAsset } from "./helper"
+import { appendAsset, removeAsset } from "@/lib/helpers/helper.scripts"
+
+import { readerAssets } from "./helper"
 
 // Define mutually exclusive types for identifier and orderId
 type ReaderType =

components/shared/publizonReader/helper.ts

@@ -1,7 +1,4 @@
-type TAssetType = {
-  src: string
-  type: "script" | "link"
-}
+import { TAssetType } from "@/lib/helpers/helper.scripts"
 
 export const readerAssets: TAssetType[] = [
   {
@@ -21,33 +18,3 @@ export const readerAssets: TAssetType[] = [
     type: "link",
   },
 ]
-
-export const appendAsset = ({ src, type }: TAssetType) => {
-  if (type === "script") {
-    const scriptElement = document.createElement("script")
-    scriptElement.src = src
-    scriptElement.defer = true
-    scriptElement.async = false
-    scriptElement.type = "module"
-    document.head.appendChild(scriptElement)
-  }
-
-  if (type === "link") {
-    const linkElement = document.createElement("link")
-    linkElement.href = src
-    linkElement.rel = "stylesheet"
-    document.head.appendChild(linkElement)
-  }
-}
-
-export const removeAsset = ({ src, type }: TAssetType) => {
-  if (type === "script") {
-    const scriptElement = document.querySelector(`script[src="${src}"]`)
-    scriptElement?.remove()
-  }
-
-  if (type === "link") {
-    const linkElement = document.querySelector(`link[href="${src}"]`)
-    linkElement?.remove()
-  }
-}

lib/helpers/helper.scripts.ts

@@ -0,0 +1,34 @@
+export type TAssetType = {
+  src: string
+  type: "script" | "link"
+}
+
+export const appendAsset = ({ src, type }: TAssetType) => {
+  if (type === "script") {
+    const scriptElement = document.createElement("script")
+    scriptElement.src = src
+    scriptElement.defer = true
+    scriptElement.async = false
+    scriptElement.type = "module"
+    document.head.appendChild(scriptElement)
+  }
+
+  if (type === "link") {
+    const linkElement = document.createElement("link")
+    linkElement.href = src
+    linkElement.rel = "stylesheet"
+    document.head.appendChild(linkElement)
+  }
+}
+
+export const removeAsset = ({ src, type }: TAssetType) => {
+  if (type === "script") {
+    const scriptElement = document.querySelector(`script[src="${src}"]`)
+    scriptElement?.remove()
+  }
+
+  if (type === "link") {
+    const linkElement = document.querySelector(`link[href="${src}"]`)
+    linkElement?.remove()
+  }
+}