Merge pull request #60 from Ray-D-Song/download-button

feat: add a download button
Ray-D-Song · Dec 4, 2024 · 45e2b3e · 45e2b3e
2 parents 56f67b8 + 24d1df4
commit 45e2b3e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/packages/web/src/components/iframe-page-content.tsx b/packages/web/src/components/iframe-page-content.tsx
@@ -1,9 +1,8 @@
 interface IframePageContentProps {
-  pageHtml: string
+  pageContentUrl: string
 }
 
-function IframePageContent({ pageHtml }: IframePageContentProps) {
-  const pageContentUrl = URL.createObjectURL(new Blob([pageHtml], { type: 'text/html' }))
+function IframePageContent({ pageContentUrl }: IframePageContentProps) {
   return (
     <iframe
       src={pageContentUrl}

diff --git a/packages/web/src/hooks/useObjectUrl.ts b/packages/web/src/hooks/useObjectUrl.ts
@@ -8,10 +8,10 @@ import { useEffect, useState } from 'react'
  * @param initialObject - `null` or an instance of `File`, `Blob` or `MediaSource`.
  * @source https://github.com/VitorLuizC/use-object-url/blob/master/src/index.ts
  */
-function useObjectURL(initialObject: null | File | Blob | MediaSource) {
+function useObjectURL(initialObject: null | File | Blob | MediaSource | string | undefined) {
   const [objectURL, setObjectURL] = useState<null | string>(null)
 
-  const [object, setObject] = useState<null | File | Blob | MediaSource>(
+  const [object, setObject] = useState<null | File | Blob | MediaSource | string | undefined>(
     initialObject,
   )
 
@@ -20,7 +20,9 @@ function useObjectURL(initialObject: null | File | Blob | MediaSource) {
       return
     }
 
-    const objectURL = URL.createObjectURL(object)
+    const targetObject = (typeof object === 'string' ? new Blob([object], { type: 'text/html' }) : object)
+
+    const objectURL = URL.createObjectURL(targetObject)
     setObjectURL(objectURL)
     return () => {
       URL.revokeObjectURL(objectURL)

diff --git a/packages/web/src/pages/(layout)/page.[slug].tsx b/packages/web/src/pages/(layout)/page.[slug].tsx
@@ -6,6 +6,7 @@ import IframePageContent from '~/components/iframe-page-content'
 import LoadingWrapper from '~/components/loading-wrapper'
 import ReadabilityPageContent from '~/components/readability-page-content'
 import { deletePage, getPageDetail } from '~/data/page'
+import { useObjectURL } from '~/hooks/useObjectUrl'
 import { useNavigate, useParams } from '~/router'
 import AppContext from '~/store/app'
 
@@ -52,15 +53,18 @@ function ArchivePage() {
       window.history.back()
   }
 
-  const { data: pageContentUrl, loading: pageLoading } = useRequest(async () => {
-    const pageHtml = await getPageContent(slug)
-    return pageHtml
-  })
-  useEffect(() => {
-    return () => {
-      pageContentUrl && URL.revokeObjectURL(pageContentUrl)
-    }
-  }, [pageContentUrl])
+  const { objectURL: pageContentUrl, setObject } = useObjectURL(null)
+  const { data: pageHtml, loading: pageLoading } = useRequest(
+    async () => {
+      const pageHtml = await getPageContent(slug)
+      return pageHtml
+    },
+    {
+      onSuccess: (pageHtml) => {
+        setObject(pageHtml)
+      },
+    },
+  )
 
   const { runAsync: runDeletePage } = useRequest(
     deletePage,
@@ -86,6 +90,18 @@ function ArchivePage() {
           <ArrowLeft className="w-5 h-5" />
         </Button>
         <div className="flex space-x-2">
+          <a
+            href={pageContentUrl ?? ''}
+            download={`${pageDetail?.title ?? 'Download'}.html`}
+          >
+            <Button
+              variant="default"
+              size="sm"
+            >
+              Download
+            </Button>
+          </a>
+
           <Button
             variant="secondary"
             size="sm"
@@ -105,8 +121,8 @@ function ArchivePage() {
       <div className="flex-1 p-4 w-full">
         <LoadingWrapper loading={pageLoading}>
           {readMode
-            ? <ReadabilityPageContent pageHtml={pageContentUrl || ''} />
-            : <IframePageContent pageHtml={pageContentUrl || ''} />}
+            ? <ReadabilityPageContent pageHtml={pageHtml || ''} />
+            : <IframePageContent pageContentUrl={pageContentUrl || ''} />}
         </LoadingWrapper>
       </div>
     </main>