Logic is done, but need to authorize now

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

@@ -1,9 +1,10 @@
 import { Modal } from "./modal";
+import DocumentViewer from "@/components/DocumentViewer";
 
 export default function DocumentModal(props: { id: number }) {
   return (
     <Modal>
-      <DocumentViewer url="https://pdfobject.com/pdf/sample.pdf"></DocumentViewer>
+      <DocumentViewer id={props.id}></DocumentViewer>
     </Modal>
   );
 }

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

@@ -1,11 +1,7 @@
+import DocumentViewer from "@/components/DocumentViewer";
+
 export default function FullPageDocumentPage(props: { id: number }) {
   return (
-    <embed
-      src="https://pdfobject.com/pdf/sample.pdf"
-      className="h-screen w-2/3"
-      type="application/pdf"
-      width="100%"
-      height="100%"
-    />
+    <DocumentViewer id={props.id} />
   );
 }

src/app/paperless/page.tsx

@@ -22,7 +22,7 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 import LoadingSpinner from "@/components/loading-spinner";
-import { getPaperlessDocuments, getUserData } from "../actions";
+import { getPaperlessDocuments, getUserData } from "@/app/actions";
 import Link from "next/link";
 
 const queryClient = new QueryClient();

src/components/DocumentViewer.tsx

@@ -1,10 +1,22 @@
-export default function DocumentViewer(props: {url: string}) {
-  <embed
-  src={url}
-  className="h-screen w-2/3"
-  type="application/pdf"
-  width="100%"
-  height="100%"
-/>
-
-}
+import { getUserData } from "@/app/actions";
+import LoadingSpinner from "./loading-spinner";
+
+export default async function DocumentViewer(props: { id: number }) {
+  const userData = await getUserData();
+
+  if (!userData) {
+    return <h1>Failure</h1>;
+  }
+
+  const url = `${userData.paperlessURL}/api/documents${props.id}/preview`;
+
+  return (
+    <embed
+      src={url}
+      className="h-screen w-2/3"
+      type="application/pdf"
+      width="100%"
+      height="100%"
+    />
+  );
+}