feat: add dropdown to tweet or copy signing link

This commit is contained in:
Ephraim Atta-Duncan
2023-09-25 11:15:31 +00:00
committed by Mythie
parent 016ae6ec6f
commit 127dc42dc5
2 changed files with 65 additions and 14 deletions

View File

@ -2,10 +2,16 @@
import { HTMLAttributes } from 'react'; import { HTMLAttributes } from 'react';
import { Share } from 'lucide-react'; import { Copy, Share, Twitter } from 'lucide-react';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@documenso/ui/primitives/dropdown-menu';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
@ -15,6 +21,12 @@ export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
documentId: number; documentId: number;
}; };
const generateTwitterIntent = (text: string, shareUrl: string) => {
return `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}%0A${encodeURIComponent(
shareUrl,
)}`;
};
export const ShareButton = ({ token, documentId }: ShareButtonProps) => { export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
const { toast } = useToast(); const { toast } = useToast();
const [, copyToClipboard] = useCopyToClipboard(); const [, copyToClipboard] = useCopyToClipboard();
@ -22,7 +34,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
const { mutateAsync: createOrGetShareLink, isLoading } = const { mutateAsync: createOrGetShareLink, isLoading } =
trpc.shareLink.createOrGetShareLink.useMutation(); trpc.shareLink.createOrGetShareLink.useMutation();
const onShareClick = async () => { const onCopyClick = async () => {
const { slug } = await createOrGetShareLink({ const { slug } = await createOrGetShareLink({
token: token, token: token,
documentId, documentId,
@ -36,16 +48,48 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
}); });
}; };
const onTweetClick = async () => {
const { slug } = await createOrGetShareLink({
token: token,
documentId,
});
window.open(
generateTwitterIntent(
'I just signed a document with @documenso. Check it out!',
`${window.location.origin}/share/${slug}`,
),
'_blank',
);
};
return ( return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button <Button
variant="outline" variant="outline"
className="flex-1"
disabled={!token || !documentId} disabled={!token || !documentId}
className="flex-1"
loading={isLoading} loading={isLoading}
onClick={onShareClick}
> >
{!isLoading && <Share className="mr-2 h-5 w-5" />} {!isLoading && <Share className="mr-2 h-5 w-5" />}
Share Share
</Button> </Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="px-10 py-3" asChild>
<div className="border-0" onClick={onCopyClick}>
<Copy className="mr-2 h-5 w-5" />
Copy Link
</div>
</DropdownMenuItem>
<DropdownMenuItem className="px-10 py-3" asChild>
<div onClick={onTweetClick}>
<Twitter className="mr-2 h-5 w-5" />
Tweet
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
); );
}; };

11
package-lock.json generated
View File

@ -20029,6 +20029,7 @@
"@aws-sdk/signature-v4-crt": "^3.410.0", "@aws-sdk/signature-v4-crt": "^3.410.0",
"@documenso/email": "*", "@documenso/email": "*",
"@documenso/prisma": "*", "@documenso/prisma": "*",
"@documenso/signing": "*",
"@next-auth/prisma-adapter": "1.0.7", "@next-auth/prisma-adapter": "1.0.7",
"@pdf-lib/fontkit": "^1.1.1", "@pdf-lib/fontkit": "^1.1.1",
"@scure/base": "^1.1.3", "@scure/base": "^1.1.3",
@ -20082,17 +20083,23 @@
"packages/signing": { "packages/signing": {
"name": "@documenso/signing", "name": "@documenso/signing",
"version": "1.0.0", "version": "1.0.0",
"license": "MIT", "license": "AGPLv3",
"dependencies": { "dependencies": {
"@documenso/tsconfig": "*", "@documenso/tsconfig": "*",
"node-forge": "^1.3.1", "node-forge": "^1.3.1",
"node-signpdf": "^2.0.0", "node-signpdf": "^2.0.0",
"pdf-lib": "^1.17.1" "pdf-lib": "^1.17.1",
"ts-pattern": "^5.0.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node-forge": "^1.3.4" "@types/node-forge": "^1.3.4"
} }
}, },
"packages/signing/node_modules/ts-pattern": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.5.tgz",
"integrity": "sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA=="
},
"packages/tailwind-config": { "packages/tailwind-config": {
"name": "@documenso/tailwind-config", "name": "@documenso/tailwind-config",
"version": "0.0.0", "version": "0.0.0",