fix: move getFile to client side

2025-11-13 00:03:33 +10:00 · 2023-10-20 13:42:10 +11:00
parent e8f08f4083
commit 284a2870c2
6 changed files with 119 additions and 72 deletions
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { base64 } from '@documenso/lib/universal/base64';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { Field, Prisma, Recipient } from '@documenso/prisma/client';
+import { DocumentDataType, Field, Prisma, Recipient } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
@ -199,7 +199,14 @@ export const SinglePlayerClient = () => {
          {uploadedFile ? (
            <Card gradient>
              <CardContent className="p-2">
-                <LazyPDFViewer document={uploadedFile.fileBase64} />
+                <LazyPDFViewer
+                  documentData={{
+                    id: '',
+                    data: uploadedFile.fileBase64,
+                    initialData: uploadedFile.fileBase64,
+                    type: DocumentDataType.BYTES_64,
+                  }}
+                />
              </CardContent>
            </Card>
          ) : (
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -4,7 +4,7 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import { Field, Recipient, User } from '@documenso/prisma/client';
+import { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@ -32,7 +32,7 @@ export type EditDocumentFormProps = {
  document: DocumentWithData;
  recipients: Recipient[];
  fields: Field[];
-  dataUrl: string;
+  documentData: DocumentData;
 };

 type EditDocumentStep = 'signers' | 'fields' | 'subject';
@ -43,7 +43,7 @@ export const EditDocumentForm = ({
  recipients,
  fields,
  user: _user,
-  dataUrl,
+  documentData,
 }: EditDocumentFormProps) => {
  const { toast } = useToast();
  const router = useRouter();
@ -153,7 +153,7 @@ export const EditDocumentForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <LazyPDFViewer document={dataUrl} />
+          <LazyPDFViewer documentData={documentData} />
        </CardContent>
      </Card>

--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@ -7,7 +7,6 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

@ -43,10 +42,6 @@ export default async function DocumentPage({ params }: DocumentPageProps) {

  const { documentData } = document;

-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
  const [recipients, fields] = await Promise.all([
    await getRecipientsForDocument({
      documentId,
@ -90,13 +85,13 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
          user={user}
          recipients={recipients}
          fields={fields}
-          dataUrl={documentDataUrl}
+          documentData={documentData}
        />
      )}

      {document.status === InternalDocumentStatus.COMPLETED && (
        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer document={documentDataUrl} />
+          <LazyPDFViewer documentData={documentData} />
        </div>
      )}
    </div>
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@ -46,10 +46,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp

  const { documentData } = document;

-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
  const { user } = await getServerComponentSession();

  if (
@ -86,7 +82,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
            gradient
          >
            <CardContent className="p-2">
-              <LazyPDFViewer document={documentDataUrl} />
+              <LazyPDFViewer documentData={documentData} />
            </CardContent>
          </Card>

--- a/packages/ui/components/document/document-dialog.tsx
+++ b/packages/ui/components/document/document-dialog.tsx
@ -5,8 +5,9 @@ import { useState } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';

-import { cn } from '@documenso/ui/lib/utils';
+import { DocumentDataType } from '@documenso/prisma/client';

+import { cn } from '../../lib/utils';
 import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';

@ -40,7 +41,12 @@ export default function DocumentDialog({ document, ...props }: DocumentDialogPro
        >
          <LazyPDFViewerNoLoader
            className="mx-auto w-full max-w-3xl xl:max-w-5xl"
-            document={`data:application/pdf;base64,${document}`}
+            documentData={{
+              id: '',
+              data: document,
+              initialData: document,
+              type: DocumentDataType.BYTES_64,
+            }}
            onClick={(e) => e.stopPropagation()}
            onDocumentLoad={onDocumentLoad}
          />
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@ -9,8 +9,12 @@ import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentData } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';

+import { useToast } from './use-toast';
+
 export type LoadedPDFDocument = PDFDocumentProxy;

 /**
@ -28,9 +32,17 @@ export type OnPDFViewerPageClick = (_event: {
  pageY: number;
 }) => void | Promise<void>;

+const PDFLoader = () => (
+  <>
+    <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+    <p className="text-muted-foreground mt-4">Loading document...</p>
+  </>
+);
+
 export type PDFViewerProps = {
  className?: string;
-  document: string;
+  documentData: DocumentData;
  onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
  onPageClick?: OnPDFViewerPageClick;
  [key: string]: unknown;
@ -38,13 +50,18 @@ export type PDFViewerProps = {

 export const PDFViewer = ({
  className,
-  document,
+  documentData,
  onDocumentLoad,
  onPageClick,
  ...props
 }: PDFViewerProps) => {
+  const { toast } = useToast();
+
  const $el = useRef<HTMLDivElement>(null);

+  const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
+  const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);
+
  const [width, setWidth] = useState(0);
  const [numPages, setNumPages] = useState(0);
  const [pdfError, setPdfError] = useState(false);
@ -110,63 +127,89 @@ export const PDFViewer = ({
    }
  }, []);

+  useEffect(() => {
+    const fetchDocumentBytes = async () => {
+      try {
+        setIsDocumentBytesLoading(true);
+
+        const bytes = await getFile(documentData);
+
+        setDocumentBytes(bytes);
+
+        setIsDocumentBytesLoading(false);
+      } catch (err) {
+        console.error(err);
+
+        toast({
+          title: 'Error',
+          description: 'An error occurred while loading the document.',
+          variant: 'destructive',
+        });
+      }
+    };
+
+    void fetchDocumentBytes();
+  }, [documentData, toast]);
+
  return (
    <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
-      <PDFDocument
-        file={document}
-        className={cn('w-full overflow-hidden rounded', {
-          'h-[80vh] max-h-[60rem]': numPages === 0,
-        })}
-        onLoadSuccess={(d) => onDocumentLoaded(d)}
-        // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
-        // Therefore we add some additional custom error handling.
-        onSourceError={() => {
-          setPdfError(true);
-        }}
-        externalLinkTarget="_blank"
-        loading={
-          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-            {pdfError ? (
+      {isDocumentBytesLoading ? (
+        <div className={cn('h-[80vh] max-h-[60rem] w-full overflow-hidden rounded')}>
+          <PDFLoader />
+        </div>
+      ) : (
+        <PDFDocument
+          file={documentBytes}
+          className={cn('w-full overflow-hidden rounded', {
+            'h-[80vh] max-h-[60rem]': numPages === 0,
+          })}
+          onLoadSuccess={(d) => onDocumentLoaded(d)}
+          // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
+          // Therefore we add some additional custom error handling.
+          onSourceError={() => {
+            setPdfError(true);
+          }}
+          externalLinkTarget="_blank"
+          loading={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+              {pdfError ? (
+                <div className="text-muted-foreground text-center">
+                  <p>Something went wrong while loading the document.</p>
+                  <p className="mt-1 text-sm">Please try again or contact our support.</p>
+                </div>
+              ) : (
+                <PDFLoader />
+              )}
+            </div>
+          }
+          error={
+            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
              <div className="text-muted-foreground text-center">
                <p>Something went wrong while loading the document.</p>
                <p className="mt-1 text-sm">Please try again or contact our support.</p>
              </div>
-            ) : (
-              <>
-                <Loader className="text-documenso h-12 w-12 animate-spin" />
-
-                <p className="text-muted-foreground mt-4">Loading document...</p>
-              </>
-            )}
-          </div>
-        }
-        error={
-          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-            <div className="text-muted-foreground text-center">
-              <p>Something went wrong while loading the document.</p>
-              <p className="mt-1 text-sm">Please try again or contact our support.</p>
            </div>
-          </div>
-        }
-      >
-        {Array(numPages)
-          .fill(null)
-          .map((_, i) => (
-            <div
-              key={i}
-              className="border-border my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
-            >
-              <PDFPage
-                pageNumber={i + 1}
-                width={width}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                loading={() => ''}
-                onClick={(e) => onDocumentPageClick(e, i + 1)}
-              />
-            </div>
-          ))}
-      </PDFDocument>
+          }
+        >
+          {Array(numPages)
+            .fill(null)
+            .map((_, i) => (
+              <div
+                key={i}
+                className="border-border my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
+              >
+                <PDFPage
+                  pageNumber={i + 1}
+                  width={width}
+                  renderAnnotationLayer={false}
+                  renderTextLayer={false}
+                  loading={() => ''}
+                  onClick={(e) => onDocumentPageClick(e, i + 1)}
+                />
+              </div>
+            ))}
+        </PDFDocument>
+      )}
    </div>
  );
 };