Use webp thumbnail pdf for preview and pdf for details

src/components/document-details.tsx

@@ -13,7 +13,6 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
-import DocumentPreview, { getPaperlessDocument } from "./document-preview";
 import { getUserData } from "@/app/actions";
 import { Button, buttonVariants } from "./ui/button";
 import { useRouter } from "next/navigation";
@@ -25,12 +24,38 @@ import {
 import type { UsersTableType } from "@/server/db/schema";
 import LoadingSpinner from "./loading-spinner";
 import OpenExternalLink from "./external-link";
-import { PaperlessDocumentType } from "@/types";
+import type { PaperlessDocumentType } from "@/types";
 import React from "react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import BodyMessage from "./body-message";
 
 const queryClient = new QueryClient();
 
+export async function getPaperlessDocument(
+  documentId: number,
+  userData: UsersTableType,
+): Promise<string | null> {
+  try {
+    const url = `${userData.paperlessURL}/api/documents/${documentId}/download/`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Token ${userData.paperlessToken}`,
+      },
+    });
+    if (response.ok) {
+      const blob = await response.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      return objectUrl;
+    } else {
+      console.error("Failed to fetch PDF");
+      return null;
+    }
+  } catch (error) {
+    console.error("Error fetching PDF:", error);
+    return null;
+  }
+}
+
 async function deleteDocument(documentId: number) {
   const userData = await getUserData();
   if (!userData) {
@@ -92,18 +117,30 @@ function DocumentDetailsInner(props: { id: number }) {
     queryFn: fetchUserData,
   });
 
-  const { data: documentData, isLoading: isdocumentDataLoading } = useQuery({
+  const { data: pdfUrl, isLoading: isPdfUrlLoading } = useQuery({
     queryKey: ["pdfUrl", props.id, userData], // Include id and paperlessURL in the query key
+    queryFn: async () => {
+      return await getPaperlessDocument(props.id, userData!);
+    },
+    enabled: !!userData,
+  });
+
+  const { data: documentData, isLoading: isdocumentDataLoading } = useQuery({
+    queryKey: ["pdfData", props.id, userData], // Include id and paperlessURL in the query key
     queryFn: async () => {
       return await getPaperlessDocumentData(props.id, userData!);
     },
     enabled: !!userData,
   });
 
-  if (isUserDataLoading ?? isdocumentDataLoading) {
+  if (isUserDataLoading || isdocumentDataLoading || isPdfUrlLoading) {
     return <LoadingSpinner>Loading...</LoadingSpinner>;
   }
 
+  if (!userData || !documentData) {
+    return <BodyMessage>Error</BodyMessage>;
+  }
+
   return (
     <div className="flex h-full w-full min-w-0 justify-center">
       <div className="flex h-4/5 flex-col rounded-xl bg-slate-600/50 md:w-1/2">

src/components/document-preview.tsx

@@ -9,15 +9,17 @@ import type { AdviceAPIType } from "@/types";
 import OpenInternalLink from "./internal-link";
 import type { UsersTableType } from "@/server/db/schema";
 import { Button } from "./ui/button";
+import BodyMessage from "./body-message";
+import { buttonVariants } from "./ui/button";
 
 const queryClient = new QueryClient();
 
-export async function getPaperlessDocument(
+export async function getPaperlessThumbnail(
   documentId: number,
   userData: UsersTableType,
 ): Promise<string | null> {
   try {
-    const url = `${userData.paperlessURL}/api/documents/${documentId}/download/`;
+    const url = `${userData.paperlessURL}/api/documents/${documentId}/thumb/`;
     const response = await fetch(url, {
       headers: {
         Authorization: `Token ${userData.paperlessToken}`,
@@ -63,12 +65,6 @@ function SkeletonLoader() {
           </div>
         </div>
       </div>
-      {/* Button Skeleton */}
-      <div className="flex flex-shrink-0 animate-pulse flex-col gap-8">
-        {Array.from({ length: 7 }, (_, index) => (
-          <div key={index} className="h-10 w-24 rounded-md bg-gray-400" />
-        ))}
-      </div>
     </div>
   );
 }
@@ -92,7 +88,7 @@ function Preview(props: { id: number }) {
     queryKey: ["pdfUrl", props.id, userData], // Include id and paperlessURL in the query key
     queryFn: async () => {
       console.log("fetching");
-      return await getPaperlessDocument(props.id, userData!);
+      return await getPaperlessThumbnail(props.id, userData!);
     },
     enabled: !!userData,
   });
@@ -102,35 +98,21 @@ function Preview(props: { id: number }) {
   }
 
   if (!pdfUrl || !userData) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
-          <h1 className="w-full text-center text-2xl font-bold">
-            Failed to get document
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Failed to get document</BodyMessage>;
   }
-  return (
-    <>
-      <object data={pdfUrl} type="application/pdf" width="100%" height="100%">
-        <p>
-          Your web browser doesn&apos;t have a PDF plugin. Instead you can
-          <OpenInternalLink href={pdfUrl}>
-            click here to download the PDF file.
-          </OpenInternalLink>
-        </p>
-      </object>
-      <Button asChild></Button>
-    </>
-  );
+  return <img src={pdfUrl} alt="Document Preview" />;
 }
 
 export default function DocumentPreview(props: { id: number }) {
   return (
     <QueryClientProvider client={queryClient}>
       <Preview id={props.id} />
+      <OpenInternalLink
+        className={`${buttonVariants({ variant: "default" })}`}
+        href={`/paperless/details/${props.id}`}
+      >
+        Open full page
+      </OpenInternalLink>
     </QueryClientProvider>
   );
 }