Preview looks pretty good

src/app/@modal/(.)paperless/document/[id]/page.tsx

@@ -1,20 +1,9 @@
-import DocumentPreview from "@/components/document-preview";
-import { Modal } from "@/components/modal";
+import DocumentModal from "@/components/document-modal";
 
 export default function ModalDocumentPage({
   params,
 }: {
   params: { id: number };
 }) {
-  return (
-    <Modal>
-      <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">
-          <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
-            <DocumentPreview id={params.id} />
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
+  return <DocumentModal params={params} />;
 }

src/app/actions.ts

@@ -47,34 +47,4 @@ export async function getUserData() {
   });
 
   return userData;
-}
-
-/*
-Paperless
-|  _ \ __ _ _ __   ___ _ __| | ___ ___ ___
-| |_) / _` | '_ \ / _ | '__| |/ _ / __/ __|
-|  __| (_| | |_) |  __| |  | |  __\__ \__ \
-|_|   \__,_| .__/ \___|_|  |_|\___|___|___/
-           |_|
-*/
-
-export async function getPaperlessDocuments(query: string) {
-  const userData = await getUserData();
-
-  if (!query || query == "null" || query.length < 3 || !userData) return null;
-
-  const response = await fetch(
-    `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    },
-  );
-
-  const data = (await response.json()) as PaperlessDocumentsType;
-
-  return data;
-}
+}

src/app/paperless/document/[id]/page.tsx

@@ -1,18 +1,19 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import BodyMessage from "@/components/body-message";
+import DocumentPreview from "@/components/document-preview";
 
 export default function FullPageDocumentPage({
   params,
 }: {
   params: { id: number };
 }) {
-  const router = useRouter();
-  router.replace(`/paperless/details/${params.id}`);
   return (
-    <main className="h-full w-full">
-      <BodyMessage>Redirecting ...</BodyMessage>
+    <main className="flex h-full w-full min-w-0 justify-center">
+      <div className="flex h-fit flex-col rounded-xl bg-slate-600/50 md:w-1/2">
+        <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+          <DocumentPreview id={params.id} />
+        </div>
+      </div>
     </main>
   );
 }

src/app/paperless/page.tsx

@@ -22,12 +22,35 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 import LoadingSpinner from "@/components/loading-spinner";
-import { getPaperlessDocuments, getUserData } from "@/app/actions";
+import { getUserData } from "@/app/actions";
 import Link from "next/link";
 import OpenInternalLink from "@/components/internal-link";
+import type { PaperlessDocumentsType } from "@/types";
 
 const queryClient = new QueryClient();
 
+async function getPaperlessDocuments(query: string) {
+  const userData = await getUserData();
+
+  if (!query || query == "null" || query.length < 3 || !userData) return null;
+
+  const response = await fetch(
+    `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Token ${userData.paperlessToken}`,
+      },
+    },
+  );
+
+  const data = (await response.json()) as PaperlessDocumentsType;
+
+  return data;
+}
+
+
 function DocumentsSearch() {
   const formSchema = z.object({
     query: z.string().min(3).max(256),

src/components/document-details.tsx

@@ -90,21 +90,22 @@ const fetchUserData = async (): Promise<UsersTableType> => {
 
 async function getPaperlessDocumentData(id: number, userData: UsersTableType) {
   try {
-    const url = `${userData.paperlessURL}/api/documents/${id}/`;
+    const url = `${userData.paperlessURL}/api/documents/${id}/&page=1&page_size=10&truncate_content=true`;
     const response = await fetch(url, {
       headers: {
         Authorization: `Token ${userData.paperlessToken}`,
       },
     });
+    console.log(response);
     if (response.ok) {
       const data = (await response.json()) as PaperlessDocumentType[];
       return data[0];
     } else {
-      console.error("Failed to fetch PDF");
+      console.error("Failed to fetch PD dataF");
       return null;
     }
   } catch (error) {
-    console.error("Error fetching PDF:", error);
+    console.error("Error fetching PDF data:", error);
     return null;
   }
 }
@@ -139,9 +140,7 @@ function DocumentDetailsInner(props: { id: number }) {
 
   if (isUserDataLoading || isdocumentDataLoading || isPdfUrlLoading) {
     return <LoadingSpinner>Loading...</LoadingSpinner>;
-  }
-
-  if (!userData || !documentData) {
+  } else if (!userData || !documentData || !pdfUrl) {
     return <BodyMessage>Error</BodyMessage>;
   }
 

src/components/document-modal.tsx

@@ -0,0 +1,20 @@
+import DocumentPreview from "@/components/document-preview";
+import { Modal } from "@/components/modal";
+
+export default function ModalDocumentPage({
+  params,
+}: {
+  params: { id: number };
+}) {
+  return (
+    <Modal>
+      <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">
+          <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+            <DocumentPreview id={params.id} />
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/components/document-preview.tsx

@@ -8,7 +8,6 @@ import {
 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";
 
@@ -82,6 +81,8 @@ function Preview(props: { id: number }) {
   const { data: userData, isLoading: isUserDataLoading } = useQuery({
     queryKey: ["userData"],
     queryFn: fetchUserData,
+    staleTime: 24 * 60 * 60 * 1000, // 1 day in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   const { data: pdfUrl, isLoading: isPdfUrlLoading } = useQuery({
@@ -96,12 +97,11 @@ function Preview(props: { id: number }) {
 
   if (isPdfUrlLoading ?? isUserDataLoading) {
     return <SkeletonLoader />;
-  }
-
-  if (!pdfUrl || !userData) {
+  } else if (!pdfUrl || !userData) {
     return <BodyMessage>Failed to get document</BodyMessage>;
   }
-  return <img src={pdfUrl} alt="Document Preview" className="size-fit" />;
+
+  return <img src={pdfUrl} alt="Document Preview" className="h-full" />;
 }
 
 export default function DocumentPreview(props: { id: number }) {