From 93d3be6547329bcc7b5dbbc8abca6ebfddbd0c2f Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Tue, 20 Aug 2024 19:31:05 -0400
Subject: [PATCH] Finishing touches on basic functionality

---
 src/app/paperless/document/[id]/page.tsx |  19 ----
 src/app/paperless/page.tsx               |  17 ++--
 src/components/document-preview.tsx      | 107 -----------------------
 3 files changed, 9 insertions(+), 134 deletions(-)
 delete mode 100644 src/app/paperless/document/[id]/page.tsx
 delete mode 100644 src/components/document-preview.tsx

diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
deleted file mode 100644
index 71a025d..0000000
--- a/src/app/paperless/document/[id]/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-import DocumentPreview from "@/components/document-preview";
-
-export default function FullPageDocumentPage({
-  params,
-}: {
-  params: { id: number };
-}) {
-  return (
-    <main className="flex h-full w-full min-w-0 justify-center">
-      <div className="flex h-fit 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 id={params.id} />
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index d1fd24b..2cae964 100644
--- a/src/app/paperless/page.tsx
+++ b/src/app/paperless/page.tsx
@@ -27,7 +27,7 @@ import Link from "next/link";
 import OpenInternalLink from "@/components/internal-link";
 import type { PaperlessDocumentsType } from "@/types";
 import type { UsersTableType } from "@/server/db/schema";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import Image from "next/image";
 
 const queryClient = new QueryClient();
 
@@ -223,15 +223,17 @@ function DocumentsPage() {
             key={index}
             className="rounded-lg border p-4 shadow transition-shadow duration-300 hover:shadow-lg"
           >
-            <img
-              src={imageUrls.get(document.id) || ""}
-              alt={document.title}
-              className="h-32 w-full rounded object-cover"
-            />
             <Link
               className="mt-2 block text-lg font-semibold underline hover:text-slate-300"
-              href={`/paperless/document/${document.id}?query=${query}`}
+              href={`/paperless/details/${document.id}?query=${query}`}
             >
+              <Image
+                src={imageUrls.get(document.id) ?? ""}
+                alt={document.title}
+                width={40}
+                height={128}
+                className="h-32 w-full rounded object-cover mb-2"
+              />
               {document.title}
             </Link>
           </div>
@@ -261,7 +263,6 @@ export default function PaperlessPage() {
             <div className="w-full">
               <QueryClientProvider client={queryClient}>
                 <DocumentsPage />
-                <ReactQueryDevtools initialIsOpen={false} />
               </QueryClientProvider>
             </div>
           </div>
diff --git a/src/components/document-preview.tsx b/src/components/document-preview.tsx
deleted file mode 100644
index 78a169e..0000000
--- a/src/components/document-preview.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client";
-
-import {
-  useQuery,
-  QueryClientProvider,
-  QueryClient,
-} from "@tanstack/react-query";
-import type { UsersTableType } from "@/server/db/schema";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { ChevronLeft } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useSearchParams } from "next/navigation";
-
-const queryClient = new QueryClient();
-
-export async function getPaperlessThumbnail(
-  documentId: number,
-  userData: UsersTableType,
-): Promise<string | null> {
-  try {
-    const url = `${userData.paperlessURL}/api/documents/${documentId}/thumb/`;
-    const response = await fetch(url, {
-      headers: {
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    });
-    if (response.ok) {
-      const blob = await response.blob();
-      const objectUrl = URL.createObjectURL(blob);
-      return objectUrl;
-    } else {
-      console.error("Failed to fetch PDF");
-      return null;
-    }
-  } catch (error) {
-    console.error("Error fetching PDF:", error);
-    return null;
-  }
-}
-
-function SkeletonLoader() {
-  return (
-    <div className="m-4 flex h-full flex-grow flex-col justify-center gap-8 bg-gray-200 md:m-8 md:flex-row md:gap-16">
-      <div className="relative flex h-full w-full flex-shrink flex-grow items-center justify-center rounded-lg">
-        {/* Pulsing Background */}
-        <div className="absolute inset-0 h-full w-full animate-pulse rounded-lg bg-gray-300" />
-      </div>
-    </div>
-  );
-}
-
-const fetchUserData = async (): Promise<UsersTableType> => {
-  const response = await fetch(`/api/getUserData`);
-  if (!response.ok) {
-    throw new Error("Network error");
-  }
-  const data = (await response.json()) as UsersTableType;
-  return data;
-};
-
-function Preview(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({
-    queryKey: ["pdfUrl", props.id, userData], // Include id and paperlessURL in the query key
-    queryFn: async () => {
-      console.log("fetching");
-      return await getPaperlessThumbnail(props.id, userData!);
-    },
-    enabled: !!userData,
-    refetchOnWindowFocus: false,
-  });
-
-  if (isPdfUrlLoading ?? isUserDataLoading) {
-    return <SkeletonLoader />;
-  }
-
-  return <img src={pdfUrl} alt="Document Preview" />;
-}
-
-export default function DocumentPreview(props: { id: number }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const query = searchParams.get("query");
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Preview id={props.id} />
-      <div className="flex flex-col items-center gap-8">
-        <Button size="icon" className="bg-white" onClick={() => router.back()}>
-          <ChevronLeft className="h-4 w-4" color="black" />
-        </Button>
-        <a
-          className={`${buttonVariants({ variant: "default" })}`}
-          href={`/paperless/details/${props.id}?query=${query}`}
-        >
-          Open full page
-        </a>
-      </div>
-    </QueryClientProvider>
-  );
-}