From 515666da0a28338f0759c1e8b5b9a660fab9f0f1 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Fri, 12 Jul 2024 19:05:03 -0400
Subject: [PATCH] Stop refetching and seperate components

---
 src/app/paperless/document/[id]/page.tsx |  3 ++-
 src/app/paperless/page.tsx               |  4 ++++
 src/components/audio-preview.tsx         | 21 +++------------------
 src/components/body-message.tsx          | 13 +++++++++++++
 src/components/document-details.tsx      |  5 ++++-
 src/components/document-preview.tsx      |  3 ++-
 6 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 src/components/body-message.tsx

diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
index 90fbb15..d005031 100644
--- a/src/app/paperless/document/[id]/page.tsx
+++ b/src/app/paperless/document/[id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import BodyMessage from "@/components/body-message";
 
 export default function FullPageDocumentPage({
   params,
@@ -11,7 +12,7 @@ export default function FullPageDocumentPage({
   router.replace(`/paperless/details/${params.id}`);
   return (
     <main className="h-full w-full">
-      <h1>Redirecting ...</h1>
+      <BodyMessage>Redirecting ...</BodyMessage>
     </main>
   );
 }
diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index 8108f09..795d983 100644
--- a/src/app/paperless/page.tsx
+++ b/src/app/paperless/page.tsx
@@ -97,6 +97,8 @@ function DocumentsPage() {
     },
     // This ensures the query does not run if there's no query string
     enabled: !!query,
+    staleTime: 60 * 1000, // 1 minute in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   const userData = useQuery({
@@ -105,6 +107,8 @@ function DocumentsPage() {
       const data = await getUserData();
       return data;
     },
+    staleTime: 24 * 60 * 60 * 1000, // 1 day in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   if (!query) {
diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
index 903e67a..1553ede 100644
--- a/src/components/audio-preview.tsx
+++ b/src/components/audio-preview.tsx
@@ -30,6 +30,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { toast } from "sonner";
+import BodyMessage from "./body-message";
 
 const queryClient = new QueryClient();
 
@@ -123,15 +124,7 @@ function AudioInfo({ id }: AudioInfoProps) {
   }
 
   if (userDataError ?? !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">
-            Error loading user data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading user data</BodyMessage>;
   }
 
   if (isRecordingDataLoading) {
@@ -139,15 +132,7 @@ function AudioInfo({ id }: AudioInfoProps) {
   }
 
   if (recordingDataError ?? !recordingData) {
-    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">
-            Error loading recording data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading recording data</BodyMessage>;
   }
 
   const decodedName = decodeURIComponent(recordingData.fileName);
diff --git a/src/components/body-message.tsx b/src/components/body-message.tsx
new file mode 100644
index 0000000..1fb1d85
--- /dev/null
+++ b/src/components/body-message.tsx
@@ -0,0 +1,13 @@
+export default function BodyMessage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  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">{children}</h1>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/document-details.tsx b/src/components/document-details.tsx
index ca2858a..0fc954e 100644
--- a/src/components/document-details.tsx
+++ b/src/components/document-details.tsx
@@ -115,6 +115,8 @@ function DocumentDetailsInner(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({
@@ -123,6 +125,7 @@ function DocumentDetailsInner(props: { id: number }) {
       return await getPaperlessDocument(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   const { data: documentData, isLoading: isdocumentDataLoading } = useQuery({
@@ -131,6 +134,7 @@ function DocumentDetailsInner(props: { id: number }) {
       return await getPaperlessDocumentData(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   if (isUserDataLoading || isdocumentDataLoading || isPdfUrlLoading) {
@@ -146,7 +150,6 @@ function DocumentDetailsInner(props: { id: number }) {
       <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">
           <div>{documentData?.title}</div>
-          <DocumentPreview id={props.id} />
           <div className="flex flex-col gap-8">
             <Button
               onClick={(e) => {
diff --git a/src/components/document-preview.tsx b/src/components/document-preview.tsx
index 76fc8fd..d90e8ff 100644
--- a/src/components/document-preview.tsx
+++ b/src/components/document-preview.tsx
@@ -91,6 +91,7 @@ function Preview(props: { id: number }) {
       return await getPaperlessThumbnail(props.id, userData!);
     },
     enabled: !!userData,
+    refetchOnWindowFocus: false,
   });
 
   if (isPdfUrlLoading ?? isUserDataLoading) {
@@ -100,7 +101,7 @@ function Preview(props: { id: number }) {
   if (!pdfUrl || !userData) {
     return <BodyMessage>Failed to get document</BodyMessage>;
   }
-  return <img src={pdfUrl} alt="Document Preview" />;
+  return <img src={pdfUrl} alt="Document Preview" className="size-fit" />;
 }
 
 export default function DocumentPreview(props: { id: number }) {