The big scary errors are gone, but it still doesn't work..

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

@@ -1,5 +1,5 @@
 import { Modal } from "./modal";
-import DocumentViewer from "@/components/DocumentViewer";
+import DocumentViewer from "@/components/document-viewer";
 
 export default function DocumentModal(props: { id: number }) {
   return (

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

@@ -1,4 +1,4 @@
-import DocumentViewer from "@/components/DocumentViewer";
+import DocumentViewer from "@/components/document-viewer";
 
 export default function FullPageDocumentPage(props: { id: number }) {
   return (

src/app/settings/page.tsx

@@ -19,7 +19,7 @@ import { useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import { redirect, usePathname } from "next/navigation";
 import LoadingSpinner from "@/components/loading-spinner";
-import { getUserData, setUserProperty } from "../actions";
+import { getUserData, setUserProperty } from "@/app/actions";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import {

src/components/document-viewer.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getUserData } from "@/app/actions";
+import LoadingSpinner from "@/components/loading-spinner";
+
+export default function DocumentViewer(props: { id: number }) {
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      const userData = await getUserData();
+      if (!userData) {
+        setLoading(false);
+        return;
+      }
+
+      const url = `${userData.paperlessURL}/api/documents/${props.id}/download/`;
+      try {
+        const response = await fetch(url, {
+          headers: {
+            "Content-Type": "application/pdf",
+            Authorization: `Token ${userData.paperlessToken}`,
+          },
+        });
+        if (response.ok) {
+          const blob = await response.blob();
+          const objectUrl = URL.createObjectURL(blob);
+          setPdfUrl(objectUrl);
+          // Cleanup function to revoke URL when component unmounts or pdfUrl changes
+          return () => URL.revokeObjectURL(objectUrl);
+        } else {
+          console.error("Failed to fetch PDF");
+        }
+      } catch (error) {
+        console.error("Error fetching PDF:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData().catch((error) => {
+      console.error("An error occurred:", error);
+    });
+  }, [props.id]); // Dependency array to refetch if id changes
+
+  if (loading) {
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
+  }
+
+  if (!pdfUrl) {
+    return <h1>Failure</h1>;
+  }
+
+  return (
+    <embed
+      src={pdfUrl}
+      className="h-screen w-2/3"
+      type="application/pdf"
+      width="100%"
+      height="100%"
+    />
+  );
+}