Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Anupam
2023-11-02 08:23:34 +05:45
committed by Mythie
parent d6e3b2b5dc
commit 746c97b64f
3 changed files with 63 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/ui/components/document/document-share-button.tsx
View File

@ -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}>