fix: only download the pdf once

aamirazad · Jun 29, 2024 · a428570 · a428570
1 parent 89a0c87
commit a428570
Showing 1 changed file with 27 additions and 22 deletions.
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import LoadingSpinner from "@/components/loading-spinner";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
 import { getUserData } from "@/app/actions";
@@ -40,10 +39,11 @@ export default function DocumentViewer(props: { id: number }) {
 
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const fetchDataCalledRef = useRef(false);
 
   const SkeletonLoader = () => (
-    <div className="flex h-4/5 justify-center w-full">
-      <div className="flex h-full md:w-1/2 min-w-0 justify-center">
+    <div className="flex h-4/5 w-full justify-center">
+      <div className="flex h-full min-w-0 justify-center md:w-1/2">
         <div className="flex h-full w-full flex-col rounded-xl bg-slate-600/50">
           <div className="m-4 flex flex-grow animate-pulse flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
             {/* PDF Skeleton */}
@@ -65,27 +65,32 @@ export default function DocumentViewer(props: { id: number }) {
   );
 
   useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
+    if (!fetchDataCalledRef.current) {
+      const fetchData = async () => {
+        setLoading(true);
 
-      try {
-        const objectUrl = await getPaperlessDocument(props.id);
-        if (objectUrl) {
-          setPdfUrl(objectUrl);
-        } else {
+        try {
+          const objectUrl = await getPaperlessDocument(props.id);
+          if (objectUrl) {
+            setPdfUrl(objectUrl);
+          } else {
+            setPdfUrl(null);
+          }
+        } catch (error) {
+          console.error("An error occurred:", error);
           setPdfUrl(null);
+        } finally {
+          setLoading(false);
         }
-      } catch (error) {
+      };
+
+      fetchData().catch((error) => {
         console.error("An error occurred:", error);
-        setPdfUrl(null);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData().catch((error) => {
-      console.error("An error occurred:", error);
-    });
-  }, [props.id]); // Dependency array to refetch if id changes
+      });
+
+      fetchDataCalledRef.current = true; // Mark as fetched
+    }
+  }, [props.id]); // Include props.id in the dependency array if refetch is needed on id change
 
   if (loading) {
     return <SkeletonLoader />;
@@ -96,7 +101,7 @@ export default function DocumentViewer(props: { id: number }) {
   }
 
   return (
-    <div className="flex min-w-0 justify-center">
+    <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">
           <div className="h-full flex-shrink flex-grow">