fix: added the share btn in the UI and prewarm fetch (#615)

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

@@ -6,14 +6,9 @@ import { Edit, Pencil, Share } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
-import {
-  TOAST_DOCUMENT_SHARE_ERROR,
-  TOAST_DOCUMENT_SHARE_SUCCESS,
-} from '@documenso/lib/constants/toast';
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DataTableActionButtonProps = {
   row: Document & {
@@ -25,13 +20,6 @@ export type DataTableActionButtonProps = {
 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
 
-  const { toast } = useToast();
-
-  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
-    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
-    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
-  });
-
   if (!session) {
     return null;
   }
@@ -70,18 +58,15 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .otherwise(() => (
-      <Button
-        className="w-24"
-        loading={isCopyingShareLink}
-        onClick={async () =>
-          createAndCopyShareLink({
-            token: recipient?.token,
-            documentId: row.id,
-          })
-        }
-      >
-        {!isCopyingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
-        Share
-      </Button>
+      <DocumentShareButton
+        documentId={row.id}
+        token={recipient?.token}
+        trigger={({ loading }) => (
+          <Button className="w-24" loading={loading}>
+            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
+            Share
+          </Button>
+        )}
+      />
     ));
 };

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

@@ -18,15 +18,11 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
-import {
-  TOAST_DOCUMENT_SHARE_ERROR,
-  TOAST_DOCUMENT_SHARE_SUCCESS,
-} from '@documenso/lib/constants/toast';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -34,7 +30,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
 
@@ -48,13 +43,6 @@ export type DataTableActionDropdownProps = {
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
-  const { toast } = useToast();
-
-  const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
-    onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
-    onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
-  });
-
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   if (!session) {
@@ -156,22 +144,18 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Resend
         </DropdownMenuItem>
 
-        <DropdownMenuItem
-          disabled={isDraft}
-          onClick={async () =>
-            createAndCopyShareLink({
-              token: recipient?.token,
-              documentId: row.id,
-            })
-          }
-        >
-          {isCopyingShareLink ? (
-            <Loader className="mr-2 h-4 w-4" />
-          ) : (
-            <Share className="mr-2 h-4 w-4" />
+        <DocumentShareButton
+          documentId={row.id}
+          token={recipient?.token}
+          trigger={({ loading, disabled }) => (
+            <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
+              <div className="flex items-center">
+                {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
+                Share
+              </div>
+            </DropdownMenuItem>
           )}
-          Share
-        </DropdownMenuItem>
+        />
       </DropdownMenuContent>
 
       {isDocumentDeletable && (

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 
 import { Copy, Share } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';
@@ -25,11 +25,17 @@ import {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  token: string;
+  token?: string;
   documentId: number;
+  trigger?: (_props: { loading: boolean; disabled: boolean }) => React.ReactNode;
 };
 
-export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
+export const DocumentShareButton = ({
+  token,
+  documentId,
+  className,
+  trigger,
+}: DocumentShareButtonProps) => {
   const { toast } = useToast();
 
   const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
@@ -81,6 +87,9 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
       slug = result.slug;
     }
 
+    // Ensuring we've prewarmed the opengraph image for the Twitter
+    await fetch(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}/opengraph`);
+
     window.open(
       generateTwitterIntent(
         `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
@@ -94,16 +103,21 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>
-        <Button
-          variant="outline"
-          disabled={!token || !documentId}
-          className={cn('flex-1', className)}
-          loading={isLoading || isCopyingShareLink}
-        >
-          {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
-          Share
-        </Button>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger?.({
+          disabled: !token || !documentId,
+          loading: isLoading || isCopyingShareLink,
+        }) || (
+          <Button
+            variant="outline"
+            disabled={!token || !documentId}
+            className={cn('flex-1', className)}
+            loading={isLoading || isCopyingShareLink}
+          >
+            {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
+            Share
+          </Button>
+        )}
       </DialogTrigger>
 
       <DialogContent position="end">
@@ -126,6 +140,19 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
             >
               {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
             </span>
+            <div
+              className={cn('bg-muted/40 mt-4 aspect-video overflow-hidden rounded-lg border', {
+                'animate-pulse': !shareLink?.slug,
+              })}
+            >
+              {shareLink?.slug && (
+                <img
+                  src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${shareLink.slug}/opengraph`}
+                  alt="sharing link"
+                  className="h-full w-full object-cover"
+                />
+              )}
+            </div>
           </div>
 
           <Button variant="outline" className="mt-4" onClick={onTweetClick}>