From ad82e4902a0439c737494b42cdbcf37634f1361d Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Thu, 11 Jul 2024 22:06:15 -0400
Subject: [PATCH] Lots of refactoring

---
 src/app/paperless/details/[id]/page.tsx  |  9 +++++++
 src/app/paperless/document/[id]/page.tsx |  8 ++++--
 src/components/document-details.tsx      | 33 +++++++++++++++++++++---
 src/components/document-preview.tsx      |  2 +-
 4 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/app/paperless/details/[id]/page.tsx

diff --git a/src/app/paperless/details/[id]/page.tsx b/src/app/paperless/details/[id]/page.tsx
new file mode 100644
index 0000000..8e4324a
--- /dev/null
+++ b/src/app/paperless/details/[id]/page.tsx
@@ -0,0 +1,9 @@
+import DocumentDetails from "@/components/document-details";
+
+export default function FullPageDocumentPage({
+  params,
+}: {
+  params: { id: number };
+}) {
+  return <DocumentDetails id={params.id} />;
+}
diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
index 7aa5fe7..90fbb15 100644
--- a/src/app/paperless/document/[id]/page.tsx
+++ b/src/app/paperless/document/[id]/page.tsx
@@ -1,13 +1,17 @@
-import DocumentPreview from "@/components/document-preview";
+"use client";
+
+import { useRouter } from "next/navigation";
 
 export default function FullPageDocumentPage({
   params,
 }: {
   params: { id: number };
 }) {
+  const router = useRouter();
+  router.replace(`/paperless/details/${params.id}`);
   return (
     <main className="h-full w-full">
-      <DocumentPreview id={params.id} />
+      <h1>Redirecting ...</h1>
     </main>
   );
 }
diff --git a/src/components/document-details.tsx b/src/components/document-details.tsx
index 211b185..a8dae87 100644
--- a/src/components/document-details.tsx
+++ b/src/components/document-details.tsx
@@ -12,6 +12,16 @@ import {
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
 import DocumentPreview from "./document-preview";
+import { getUserData } from "@/app/actions";
+import { Button } from "./ui/button";
+import { useRouter } from "next/navigation";
+import {
+  useQuery,
+  QueryClientProvider,
+  QueryClient,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 async function deleteDocument(documentId: number) {
   const userData = await getUserData();
@@ -36,13 +46,28 @@ async function deleteDocument(documentId: number) {
   return response;
 }
 
-function DocumentDetails(props: { id: number }) {
+export default function DocumentDetails(props: { id: number }) {
+  const router = useRouter();
+
+  const { data: userData, isLoading: isUserDataLoading } = useQuery({
+    queryKey: ["userData"],
+    queryFn: fetchUserData,
+  });
+
+  const { data: pdfUrl, isLoading: isPdfUrlLoading } = useQuery({
+    queryKey: ["pdfUrl", props.id, userData], // Include id and paperlessURL in the query key
+    queryFn: async () => {
+      console.log("fetching");
+      return await getPaperlessDocument(props.id, userData!);
+    },
+    enabled: !!userData,
+  });
 
   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">
         <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
-<DocumentPreview />
+          <DocumentPreview id={props.id} />
           <div className="flex flex-col gap-8">
             <Button
               onClick={(e) => {
@@ -107,4 +132,6 @@ function DocumentDetails(props: { id: number }) {
           </div>
         </div>
       </div>
-    </div>
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/src/components/document-preview.tsx b/src/components/document-preview.tsx
index 1366057..a058b19 100644
--- a/src/components/document-preview.tsx
+++ b/src/components/document-preview.tsx
@@ -12,7 +12,7 @@ import { Button } from "./ui/button";
 
 const queryClient = new QueryClient();
 
-async function getPaperlessDocument(
+export async function getPaperlessDocument(
   documentId: number,
   userData: UsersTableType,
 ): Promise<string | null> {