From 470c2f581c655757baa67fff8271536b397cf3b2 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sat, 17 Aug 2024 22:39:21 -0400
Subject: [PATCH] It doesn't work, but its a base to go on

---
 bun.lockb                  | Bin 224864 -> 224816 bytes
 package.json               |   2 +-
 src/app/paperless/page.tsx |  46 +++++++++++++++++++++++++++++--------
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 789ed7bc7439df1b431043883608ea0e17d61d80..811749e586835174fabd4e9e42000f89488f4231 100755
GIT binary patch
delta 207
zcmaEGhj+sr-U)h&ZhN=zJ@QsfKGE`|ETzJrc;^ZqmLnUo^Oc+Dh8ksj__$!B|4$!A
z@yUfs>YEFEdv`j-O?+Lhe#Iu0TUn`8d#ip6JJ*jDXH@T4m|0Hj+q0s-^ho0ek!MRy
z*V`*7L?0`z5SFyHKG7{F)ptxNvR*;`WNo`GJL7g+cBWsZ983%lu-)F4X@(@D@%9^G
zOfym$L$(+0VY+Dw<a>W&;;fd0s$wV!Dh)1ibxE0!%M2D;Fnv}ov-0!<xy%ayG%8Ii

delta 256
zcmdmRhxfr9-U)h&TdY~wV*RIeY+N*LAJ59h`Y#MS-)@?v-hbCH!26?`i1~$${y%*t
zcla7?uJCQ$=`c$#uKsxbMm-y;gS-A8wz}}PrD@N3?MPm`3ciAZ;3=)z?9<&Q3;(Tq
zc>nUm3GUKC%ct&?ikTNQ=iIEDTxQe%mbTlnGj6wKXZmHz!5C+%XKJ8lxZU2CX@(@D
z;r1J0Ofym$8@CtkVY+ELecLA{(e3e{n7&rI<>jZODrDvrmn7!o=w%gyxqAA=$wiq3
uCB^y$`NbtL$=s}B1}G>ADh)1ibxApp%M2E|Fg-VyS(%A}VS0Zq^Fja;jb~i|

diff --git a/package.json b/package.json
index a175536..4e2102d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@t3-oss/env-nextjs": "^0.11.0",
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query": "^5.45.0",
-    "@tanstack/react-query-devtools": "^5.50.1",
+    "@tanstack/react-query-devtools": "^5.51.23",
     "@tanstack/react-table": "^8.19.2",
     "@vercel/postgres": "^0.9.0",
     "class-variance-authority": "^0.7.0",
diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index 138ba3a..6fab9a4 100644
--- a/src/app/paperless/page.tsx
+++ b/src/app/paperless/page.tsx
@@ -26,7 +26,8 @@ import { getUserData } from "@/app/actions";
 import Link from "next/link";
 import OpenInternalLink from "@/components/internal-link";
 import type { PaperlessDocumentsType } from "@/types";
-import { UsersTableType } from "@/server/db/schema";
+import type { UsersTableType } from "@/server/db/schema";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 
@@ -134,7 +135,11 @@ function DocumentsPage() {
   const searchParams = useSearchParams();
   const query = searchParams.get("query");
 
-  const PaperlessDocuments = useQuery({
+  const {
+    data: PaperlessDocuments,
+    isLoading: isLoadingDocuments,
+    error: documentsError,
+  } = useQuery({
     queryKey: ["key", query],
     queryFn: async () => {
       if (!query) {
@@ -143,13 +148,16 @@ function DocumentsPage() {
       const response = await getPaperlessDocuments(query);
       return response;
     },
-    // 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({
+  const {
+    data: userData,
+    isLoading: isLoadingUserData,
+    error: userDataError,
+  } = useQuery({
     queryKey: ["userData"],
     queryFn: async () => {
       const data = await getUserData();
@@ -159,20 +167,37 @@ function DocumentsPage() {
     refetchOnWindowFocus: false,
   });
 
+  const documentIds = PaperlessDocuments.results.map((document) => document.id);
+
+  const { data: imageUrls, isLoading: isLoadingImages } = useQuery({
+    queryKey: ["imageUrls", documentIds, userData],
+    queryFn: async () => {
+      const imageUrls = new Map<number, string | null>();
+      if (documentIds && userData) {
+        for (const id of documentIds) {
+          const url = await getPaperlessThumbnail(id, userData);
+          imageUrls.set(id, url);
+        }
+      }
+      return imageUrls;
+    },
+    enabled: !!PaperlessDocuments?.results,
+  });
+
   if (!query) {
     return <h1 className="text-2xl font-bold">Start Searching!</h1>;
   }
 
-  if (PaperlessDocuments.isLoading || userData.isLoading) {
+  if (isLoadingDocuments || isLoadingUserData || isLoadingImages) {
     return <LoadingSpinner>Loading...</LoadingSpinner>;
-  } else if (!userData.data?.paperlessURL) {
+  } else if (userDataError || !userData?.paperlessURL) {
     return (
       <h1 className="text-2xl font-bold">
         You need to set your paperless url in
         <OpenInternalLink href="/settings">settings</OpenInternalLink>
       </h1>
     );
-  } else if (!PaperlessDocuments.data || PaperlessDocuments.error) {
+  } else if (documentsError || !PaperlessDocuments) {
     return (
       <h1 className="text-2xl font-bold">
         Connection failed! Check that the paperless url/token is set correctly
@@ -181,9 +206,9 @@ function DocumentsPage() {
     );
   }
 
-  const paperlessDocumentMap = PaperlessDocuments.data.results;
+  const paperlessDocumentMap = PaperlessDocuments.results;
 
-  if (!paperlessDocumentMap ?? paperlessDocumentMap.length === 0) {
+  if (paperlessDocumentMap.length === 0) {
     return <h1 className="text-2xl font-bold">No results!</h1>;
   }
 
@@ -195,7 +220,7 @@ function DocumentsPage() {
           className="rounded-lg border p-4 shadow transition-shadow duration-300 hover:shadow-lg"
         >
           <img
-            src={`${userData.data?.paperlessURL}/api/documents/${document.id}/thumb/`}
+            src={imageUrls?.get(document.id) || ""}
             alt={document.title}
             className="h-32 w-full rounded object-cover"
           />
@@ -234,6 +259,7 @@ export default function PaperlessPage() {
                   Search Results
                 </h1>
                 <DocumentsPage />
+                <ReactQueryDevtools initialIsOpen={false} />
               </QueryClientProvider>
             </div>
           </div>