refactor: download function to be reusable (#740)

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -6,7 +6,7 @@ import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -55,28 +55,14 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       const documentData = document?.documentData;
 
       if (!documentData) {
-        return;
+        throw Error('No document available');
       }
 
-      const documentBytes = await getFile(documentData);
+      await downloadPDF({ documentData, fileName: row.title });
-
+    } catch (err) {
-      const blob = new Blob([documentBytes], {
-        type: 'application/pdf',
-      });
-
-      const link = window.document.createElement('a');
-      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
-    } catch (error) {
       toast({
         title: 'Something went wrong',
-        description: 'An error occurred while trying to download file.',
+        description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
     }

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,6 +30,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -44,6 +45,7 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -63,39 +65,33 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
+    try {
+      let document: DocumentWithData | null = null;
 
-    if (!recipient) {
+      if (!recipient) {
-      document = await trpcClient.document.getDocumentById.query({
+        document = await trpcClient.document.getDocumentById.query({
-        id: row.id,
+          id: row.id,
-      });
+        });
-    } else {
+      } else {
-      document = await trpcClient.document.getDocumentByToken.query({
+        document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
+          token: recipient.token,
+        });
+      }
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
       });
     }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
   };
 
   const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');

packages/lib/client-only/download-pdf.ts

@@ -0,0 +1,29 @@
+import type { DocumentData } from '@documenso/prisma/client';
+
+import { getFile } from '../universal/upload/get-file';
+
+type DownloadPDFProps = {
+  documentData: DocumentData;
+  fileName?: string;
+};
+
+export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps) => {
+  const bytes = await getFile(documentData);
+
+  const blob = new Blob([bytes], {
+    type: 'application/pdf',
+  });
+
+  const link = window.document.createElement('a');
+
+  const [baseTitle] = fileName?.includes('.pdf')
+    ? fileName.split('.pdf')
+    : [fileName ?? 'document'];
+
+  link.href = window.URL.createObjectURL(blob);
+  link.download = `${baseTitle}_signed.pdf`;
+
+  link.click();
+
+  window.URL.revokeObjectURL(link.href);
+};

packages/ui/components/document/document-download-button.tsx

@@ -5,11 +5,11 @@ import { useState } from 'react';
 
 import { Download } from 'lucide-react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { DocumentData } from '@documenso/prisma/client';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { Button } from '../../primitives/button';
-import { useToast } from '../../primitives/use-toast';
 
 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
@@ -24,43 +24,29 @@ export const DocumentDownloadButton = ({
   disabled,
   ...props
 }: DownloadButtonProps) => {
-  const { toast } = useToast();
-
   const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
 
   const onDownloadClick = async () => {
     try {
       setIsLoading(true);
 
       if (!documentData) {
+        setIsLoading(false);
         return;
       }
 
-      const bytes = await getFile(documentData);
+      await downloadPDF({ documentData, fileName }).then(() => {
-
+        setIsLoading(false);
-      const blob = new Blob([bytes], {
-        type: 'application/pdf',
       });
-
-      const link = window.document.createElement('a');
-      const baseTitle = fileName?.includes('.pdf') ? fileName.split('.pdf')[0] : fileName;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
     } catch (err) {
-      console.error(err);
+      setIsLoading(false);
 
       toast({
-        title: 'Error',
+        title: 'Something went wrong',
         description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
-    } finally {
-      setIsLoading(false);
     }
   };